zoukankan      html  css  js  c++  java
  • 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))


                    }

                  }

                })

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

  • 相关阅读:
    虚树学习笔记
    CF487E Tourists
    [HNOI/AHOI2018]毒瘤
    [HEOI2014]大工程
    hive初始化元数据报错
    layui简单的两个页面
    springboot配置swagger信息入门2
    spark连接hive出现错误,javax.jdo.JDODataStoreException: Required table missing : "`DBS`" in Catalog "" Schema ""
    springboot整合shiro关于任务入门3
    Flink部署Standalone模式
  • 原文地址:https://www.cnblogs.com/qingcui277/p/9914249.html
Copyright © 2011-2022 走看看