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

三猪技术团队

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

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

第一种:链接引入

e1.png

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

symbolRotate: 35,表示旋转的角度

第二种:base64格式引入

e2.png

base64格式引入的话,其中需要注意的问题是是base64代码串不能换行,要显示在一行.
如果是png格式的图片可以在上网进行转换解析出图片的base64格式

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

第三种:svg图引入

e3.png

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

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

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

解决echarts 展示动态gif图 无法正常显示gif图 问题
HTML CSS 部分:

e4.png

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

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

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

Javascript 部分:

e5.png

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

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

阅读 598

想你所想争取给你最全面的亚马逊开发知识交流通道x118422

6 声望
2 粉丝
0 条评论
你知道吗?

想你所想争取给你最全面的亚马逊开发知识交流通道x118422

6 声望
2 粉丝
宣传栏