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


                    }

                  }

                })

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

  • 相关阅读:
    hdu1506(dp)
    windows下安装JMeter
    phpstudy 80端口被占用,修改端口
    久违的phpstorm
    软件项目版本号的命名规则及格式
    phpstudy 局域网访问
    java+eclipse+selenium环境搭建
    软件测试方法汇总
    功能测试大全
    如何有效地描述软件缺陷(Defect)?
  • 原文地址:https://www.cnblogs.com/qingcui277/p/9914249.html
Copyright © 2011-2022 走看看