将 Apache ECharts 图层叠加到 OpenLayers 地图上，自动同步视图与坐标系。
| Project | Version | Description |
|---|---|---|
| ol-echarts |  |
面向 ol 7 / 8 / 9 / 10（推荐） |
| ol3-echarts |  |
面向旧版 openlayers 3 / 4 |
- OpenLayers 7+ 请使用
ol-echartsv4.x - OpenLayers 5 / 6 请使用
ol-echartsv3.x - 原因见 issues/115
要求 Node.js 24（最低 22）和 package.json#packageManager 指定的 pnpm 版本。
git clone https://github.com/sakitam-fdd/ol3Echarts.git
cd ol3Echarts
pnpm install --frozen-lockfile
pnpm check# 现代 ol 包（推荐）
pnpm add ol-echarts ol echarts
# 旧版 openlayers
pnpm add ol3-echarts openlayers echartsimport EChartsLayer from 'ol-echarts';
// 或
import ol3Echarts from 'ol3-echarts';<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@10.9.0/ol.css" />
<script src="https://cdn.jsdelivr.net/npm/ol@10.9.0/dist/ol.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@6.1.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ol-echarts@4.0.1/dist/ol-echarts.js"></script>全局变量：ol、echarts、EChartsLayer。
import 'ol/ol.css';
import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import EChartsLayer from 'ol-echarts';
const map = new Map({
target: 'map',
layers: [new TileLayer({ source: new OSM() })],
view: new View({
center: fromLonLat([108.18, 34.34]),
zoom: 5,
}),
});
const layer = new EChartsLayer(
{
series: [
{
type: 'effectScatter',
data: [
[116.4, 39.9, 100],
[121.47, 31.23, 80],
],
symbolSize: (val) => val[2] / 10,
},
],
},
{
hideOnMoving: true,
hideOnZooming: true,
hideOffscreenLabels: true,
},
);
layer.appendTo(map);pie / bar / line 可通过扩展字段 coordinates: [lng, lat] 锚定到地图位置。
遇到饼图越界引导线、Tooltip 或投影问题，请查看常见问题。仓库维护约束见 AGENTS.md。
