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))

　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　}

　　　　　　　　　　　　})

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

 

转载于:https://www.cnblogs.com/qingcui277/p/9914249.html