Bridger for OpenLayers and Apache ECharts

将 Apache ECharts 图层叠加到 OpenLayers 地图上，自动同步视图与坐标系。

包支持

Project	Version	Description
ol-echarts		面向 ol 7 / 8 / 9 / 10（推荐）
ol3-echarts		面向旧版 openlayers 3 / 4

TIP

• OpenLayers 7+ 请使用 ol-echarts v4.x
• OpenLayers 5 / 6 请使用 ol-echarts v3.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 echarts

import EChartsLayer from 'ol-echarts';
// 或
import ol3Echarts from 'ol3-echarts';

CDN

<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。

截图示例

致谢

echarts openlayers

License