echarts 地图绘制自定义标记

最近用到了echarts做地图,需要在地图上绘制自定义的标记,如下图

echarts 地图绘制自定义标记_第1张图片

 此处需要用到symbol属性

echarts 地图绘制自定义标记_第2张图片

这里提到的可以用base64图片格式 ,我从墨客下载了切图,然后用大佬给的地址去转换成了需要的路径

图片转 BASE64 编码 | 菜鸟工具

结果。。。。展示方块,没有达到我要的效果,不知道哪里出了问题,猜测是base64路径出了问题,但是不知道怎么解决,哈哈哈

echarts 地图绘制自定义标记_第3张图片

 于是大佬教我另一种方式实现

echarts 地图绘制自定义标记_第4张图片

 于是,搞定了,在此记录一下,

重点代码:

{
            tooltip: {
              show: false,
            },
            type: "effectScatter",
            coordinateSystem: "geo",
            rippleEffect: {
              color:"#3facef",
              // number:3,
              // period:5,
              // scale:2.5,
              // brushType: "stroke",
            },
            showEffectOn: "render",
            
            label: {
              normal: {
                color: "#fff",
              },
            },
            symbol: 'image://'+require('@/assets/images/home/redMark.png'),
            symbolSize: 28,
            data: convertData(data),
            zlevel: 1,
          },

 

附上代码:



你可能感兴趣的:(echarts,echarts,前端,javascript)