Vue + Echarts 实现中国地图的绘制

Vue + Echarts 实现中国地图的绘制

在做业务的时候，有一个数据大屏的需求，这里总结一下遇到绘制地图时遇到的问题以及解决方法，包括：

• 中国地图的引入；

• 外边框和内边框（每个省边框细，而整体中国地图外边框粗）；

• 阴影的实现；

• 轮播每个省份，并显示图注 tooltip；

1. 地图的引入

在 package.json 文件中发现 echarts 版本为 5.2.2，该版本的 echarts 库已经暂停了中国地图的提供（低版本的 echarts 在 node_modules 中会注册好中国地图的 json 文件）。

因此，我们要自己下好地图的 js 或 json 文件，这里提供一下我的数据文件(提取码：4h1e)。

在引入地图数据包后，我们要在入口文件注册地图。

// 这里我是按需引入
import china from '@/map/json/china.json'
// 引入 echarts
import * as echarts from 'echarts'