要实现的成果在地图上的各个地区增加 自定义图标 (默认 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 图标