地理坐标系和地图系列的 SVG 底图

更多关于Apache ECharts的文档，请阅读:

• Apache ECharts文档专题

---

《Apache ECharts教程》

• 5 分钟上手 ECharts
• ECharts 5 新特性
• ECharts 5 升级指南
• 在打包环境中使用 ECharts
• ECharts 基础概念概览
• 个性化图表的样式
• ECharts 中的样式简介
• 异步数据加载和更新
• 使用 dataset 管理数据
• 使用 transform 进行数据转换第一部分
• 使用 transform 进行数据转换第二部分
• 在图表中加入交互组件
• 移动端自适应
• 数据的视觉映射
• ECharts 中的事件和行为
• 动态排序柱状图
• 小例子：自己实现拖拽
• 小例子：实现日历图
• 旭日图
• 自定义系列
• 富文本标签
• 服务端渲染
• 使用 Canvas 或者 SVG 渲染
• 地理坐标系和地图系列的 SVG 底图
• 在图表中支持无障碍访问
• 使用 ECharts GL 实现基础的三维可视化
• 在微信小程序中使用 ECharts

---

从 v5.1.0 开始，ECharts 支持在 地理坐标系（geo） 和 地图系列（map series） 中使用 SVG 作为底图。之前只支持 GeoJSON 格式的底图。

有了这个功能，ECharts 能在任一种渲染模式（canvas 渲染模式和 svg 渲染模式）中绘制 SVG 底图，并且能够只用简单的 ECharts 配置项（option）就带来 放大、平移、点选（select）、高亮强调（emphasis）、聚焦-淡出（focus-blur）、标签（label）、标签布局（labelLayout）、提示框（tooltip） 等特性。ECharts 中的所有在 地理坐标系（geo） 中可用系列（如 散点图（scatter）、特效散点图（effectScatter），路径图（lines），自定义系列（custom））也能显示在 SVG 底图上。

这些是使用 SVG 底图的例子：

庖丁解牛 | 内脏数据 | 航班选座 | 地图 | 散点图 | 路径图 | 交通

基本用法

SVG 底图的用法与 GeoJSON 底图的用法相同。

如果在 地理坐标系（geo） 中使用：

$.get('map/organ.svg', function (svg) {
   
    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
    echarts.registerMap('organ_diagram', {
   svg: svg});

    var chart = echarts.init(document.getElementById('main'))。
    chart.setOption({
   
        geo: [{
   
            // 引用注册过的底图。
            map: 'organ_diagram',
            ...
        }]
    });
});

如果在 地图系列（map series） 中使用：

$.get('map/beef_cuts.svg', function (svg) {
   
    // 首先向 echarts 注册 SVG 字符串或解析过的 SVG DOM
    echarts.registerMap('beef_cuts_diagram',