在使用echarts的地图插件过程中遇到的标注icon自定义路径的问题

要实现的效果在地图上的各个地区添加 自定义图标 （默认 echarts 只有三种可选图标）

echarts的series方法中有一个symbol属性可以引入图片路径，以下列出三种方法：

第一种：链接引入

在symbol中直接引入图片的路径，注意格式，要加image://

symbolRotate: 35,表示旋转的角度

第二种：base64格式引入

base64格式引入的话，其中需要注意的问题是是base64代码串不能换行，要显示在一行.

如果是png格式的图片可以在上网进行转换解析出图片的base64格式

这样会自动转换出base64码，直接在symbol中引入即可。

第三种：svg图引入

这是最常用的一种，也是官网用的方法，svg图用notepad++软件或者记事本打开，将d属性值复制出来前面加path://即可

这样标注就显示在了地图上面，另外记得设置出需要标注的地点和数据，如代码中的data。

第四种：使用 Echarts 方法 convertToPixel() 和 CSS样式 添加图标 （可添加 gif 动图）

解决echarts 展示动态gif图 无法正常显示gif图 问题

HTML CSS 部分：

此处 我们使用 vue.js 使得 可以将 地图上各个区域的 图片进行v-for 循环出来

CSS部分 给.map添加相对定位 给img添加绝对定位 使用行内样式动态绑定 top 以及 left

.chart 为我们的 图表 只需在边上新建img标签

Javascript 部分：

此处 使用 charts 方法 convertToPixel() 方法 将中国地图的 经度，纬度 转换为对应的 px（单位） 距离

将处理好的 坐标放入 新的数组 使用v-for 循环。地图上即可显示动态 gif 图标

PS:大家看了后觉得对自己有帮助可以三连留言,如有正在寻找工作机会的小伙伴也请私信小助手微信 x118422 详聊,欢迎加入三猪科技开发组大家庭哦~