ECharts 地理可视化：从地图接入到图表复用

本文源于一次覆盖 30+ 人的团队内部分享，整理了在疫情防控指挥平台中的实战经验。

背景

在广州疫情防控指挥平台项目中，我们需要将疫情风险数据以地图为载体进行三维可视化展示。技术栈是 Vue2 + ECharts + OpenLayers + 高德地图。

地图接入策略

OpenLayers + 高德地图

import { Map, View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';

// 高德地图底图
const gaodeLayer = new TileLayer({
  source: new XYZ({
    url: 'https://webrd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
  })
});

const map = new Map({
  target: 'map',
  layers: [gaodeLayer],
  view: new View({
    center: [113.2644, 23.1291], // 广州
    zoom: 10,
    projection: 'EPSG:4326'
  })
});

ECharts 叠加

将 ECharts 的 geo 组件与 OpenLayers 对齐坐标系，实现数据点叠加渲染。

配置化图表复用

核心思路：将图表配置抽为参数化函数，10 余种图表统一管理。

interface ChartConfig {
  type: 'bar' | 'line' | 'pie' | 'scatter' | 'map';
  dataSource: string;
  options?: Record<string, unknown>;
}

function createChart(config: ChartConfig) {
  const baseOption = getBaseOption(config.type);
  return mergeOption(baseOption, config.options);
}

性能优化

• 虚拟滚动：大数据量穿梭框采用虚拟滚动，渲染性能提升约 40%
• 动态表单：配置文件生成表单项，减少模板冗余代码超 50%
• 按需加载：ECharts 按需引入模块，减小包体积

小结

地理可视化的关键不在图表库本身，而在于坐标系对齐、数据清洗和性能策略。配置化复用让团队开发效率显著提升。