# ol-echarts

> a openlayers extension to echarts

Latest version **4.1.0** (published 2026-07-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install ol-echarts
pnpm add ol-echarts
yarn add ol-echarts
bun add ol-echarts
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2026-07-22 |
| First published | 2018-07-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 699.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 333 |
| Author | sakitam-fdd |
| Maintainers | sakitam-fdd |
| Keywords | javascript, webgis, canvas, echarts, openlayers, ol |

## Links

- npm: https://www.npmjs.com/package/ol-echarts
- Repository: https://github.com/sakitam-fdd/ol3Echarts
- Homepage: https://sakitam-fdd.github.io/ol3Echarts
- Issues: https://github.com/sakitam-fdd/ol3Echarts/issues
- npm.io page: https://npm.io/package/ol-echarts

## Dependencies (1)

- [zrender](https://npm.io/package/zrender.md) ^6.0.0

## Alternatives

- [postcss-color-hex-alpha](https://npm.io/package/postcss-color-hex-alpha.md) — 6.4M weekly downloads
- [randomcolor](https://npm.io/package/randomcolor.md) — 348.0K weekly downloads
- [bows](https://npm.io/package/bows.md) — 1.3K weekly downloads
- [ep_prefer_color_scheme](https://npm.io/package/ep_prefer_color_scheme.md) — 260 weekly downloads
- [coc-yank](https://npm.io/package/coc-yank.md) — 61 weekly downloads

## Recent versions

- 4.1.0 (latest) — 2026-07-22
- 4.0.1 — 2024-05-29
- 4.0.0 — 2023-07-08
- 3.0.0 — 2022-09-26
- 2.0.6 — 2022-01-06
- 2.0.5 — 2022-01-06
- 2.0.4 — 2021-03-16
- 2.0.3 — 2020-09-12
- 2.0.2 — 2019-12-31
- 2.0.1 — 2019-12-04
- 2.0.0 — 2019-07-28
- 1.3.6 — 2018-12-22
- 1.3.5 — 2018-08-05
- 1.3.4 — 2018-07-31

## README

# ol-echarts

OpenLayers (`ol` 7 / 8 / 9 / 10) 与 Apache ECharts（5 / 6）的桥接图层。

## Install

```bash
pnpm add ol-echarts ol echarts
```

```ts
import EChartsLayer, { type EChartsLayerOptions, type ChartOptions } from 'ol-echarts';
```

## Usage

```ts
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import EChartsLayer from 'ol-echarts';

const map = new Map({
  target: 'map',
  layers: [new TileLayer({ source: new OSM() })],
  view: new View({
    projection: 'EPSG:4326',
    center: [108.18, 34.34],
    zoom: 5,
  }),
});

const layer = new EChartsLayer(option, {
  hideOnMoving: true,
  hideOnZooming: true,
  hideOffscreenLabels: true,
});
layer.appendTo(map);
```

## Options

| 配置项 | 类型 | 默认 | 说明 |
| --- | --- | --- | --- |
| `source` | `string` | `EPSG:4326` | 数据源投影 |
| `destination` | `string` | 地图视图投影 | 目标投影 |
| `forcedRerender` | `boolean` | `false` | 重绘前 `clear()` |
| `forcedPrecomposeRerender` | `boolean` | `false` | `prerender` 时重绘（兼容旧选项名） |
| `hideOnZooming` / `hideOnMoving` / `hideOnRotating` | `boolean` | `false` | 交互时隐藏 |
| `hideOffscreenLabels` | `boolean` | `true` | pie 锚点移出视口时隐藏标签和引导线 |
| `convertTypes` | `string[]` | `['pie','line','bar']` | 使用 `coordinates` 转换的图表类型 |
| `insertFirst` | `boolean` | `false` | 插入到 overlay 最前 |
| `stopEvent` | `boolean` | `false` | 使用 stopevent 容器 |
| `polyfillEvents` | `boolean` | OL≤6.1.1 为 `true` | 指针事件代理 |

## API

- `appendTo(map)` / `setMap(map)`
- `setChartOptions(option)` / `getChartOptions()`
- `getECharts()` / `getOptions()`
- `appendData({ seriesIndex, data })`
- `show()` / `hide()` / `setVisible()` / `isVisible()`
- `setZIndex()` / `getZIndex()`
- `remove()`

## Docs

- 仓库文档：https://sakitam-fdd.github.io/ol3Echarts/
- 旧版 openlayers 请使用 [`ol3-echarts`](../ol3-echarts)

---
_Source: https://npm.io/package/ol-echarts · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._