Echarts 自定义legend图片,修改点击之后的颜色图解

第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片

后来我想了个法子,就是先获取到这个图片,然后复制它的dataURL 也就是在网页上解析之后的图片路径,就能正常显示了——————至于原因,emmmmmmmm……

第二个问题:echarts 自定义图例的图标成功后,点击会显示关闭的功能(我是这样理解的);要实现点击颜色变浅并且实现关闭功能,经过我和我另一个前端同事总结出了两种方法,

  第一种,绘制svg图片,在阿里巴巴图标库上制作新的svg图片下载,下载的包里面会有一个iconxx,svg 获取到路径,写在icon:'path://',echarts会自动识别这个图例图片,好处是图片也不需要上传,

    并且echarts自己会处理颜色变化,个人觉得可能是echarts图例的实现原理也是这样的,但是没看到原码——这是我同事的实现方式

     第二种,写个自定义的png图片,利用icon:icon ,data:{

      icon:''xxxxxxxx.png

    },。利用echarts的点击选择图例事件触发

      代码如下:  var myChart = echarts.init(this.$refs.xxxx);

            myChart.on('legendselectchanged',function(params){

              var name = params.name;

              if(name === '主动风险'){

                if(!params.selected[name]){

                  this.icon = 'aaaaaaa.png';

                  mychart.setOption(self.getOption(data))

                }else{

                  this.icon = 'xxxxxx.png';

                  mychart.setOption(self.getOption(data))


                }

              }

            })

暂时自定义需求只有一个图标需要处理,如果多的话,可以自定去写个公共方法封装一下,应该也是可以的

猜你喜欢

转载自www.cnblogs.com/qingcui277/p/9914249.html