ECharts实现地图飞线

echarts版本：https://echarts.apache.org/zh/changelog.html

v5.x.x版本：不提供china.js和china.json文件

v4.x.x版本：使用npm安装echarts，默认包含china.js和china.json文件

目录

一、Html工程

二、vue工程

三、vue工程

四、矢量小图标

方案一：

方案二：

一、Html工程

效果图如下：

源码百度网盘： 

链接：https://pan.baidu.com/s/1tsPE5Qo1fKqWKGTCEmspuA?pwd=p0ib 
提取码：p0ib

二、vue工程

echarts版本v4.9.0：使用echarts依赖中的json文件，效果图如下，可以完整显示地图。

源码百度网盘：

链接：https://pan.baidu.com/s/17STxMmTSTxbZuHGbI2XzBw?pwd=irym 
提取码：irym

三、vue工程

echarts版本v5.5.0：使用从阿里云下载的json文件，效果图如下，不能完整显示地图。

源码百度网盘：

链接：https://pan.baidu.com/s/1hFifJNq8wbT5JpZRYGRn4Q?pwd=ptc1 
提取码：ptc1

四、矢量小图标

echarts中关于矢量小图标的描述：Documentation - Apache EChartshttps://echarts.apache.org/zh/option.html#series-effectScatter.symbol在上文效果图中，飞机和火车的小图标是用的svg矢量图，将文件用记事本打开，将<path d="">标签d后的内容复制到echarts地图symbol属性中即可，复杂的svg矢量小图标可能是符合路径，解决方案如下：

方案一：

• 电脑已经安装 Adobe Illustrator CS6，可以使用
• 鼠标点击选取整个图标：上方菜单对象  →  复合路径  →  建立 
• 导出 svg 格式，以文本打开 svg，将 <path 的 d 属性复制
• 复制后放入 symbol 中，前面加以 path://

方案二：

• 使用GIMP软件，官网地址：https://www.gimp.org/downloads/
• 使用教程参考：https://www.cnblogs.com/jasongrass/p/16011765.html