在UI设计的时候,可能我们在使用echarts时,legend是用图片渲染的,未选中的legend是用置灰的图片展示的。即彩色图片,置灰图片交互切换。

主要代码如下:

//图例事件
let lgdt = this._ledgend(),
lgData = lgdt.legendData,lgList = lgdt.legendList,
imgs = this._icon(),imglg = imgs.length,unIng = this._lgiconUnActive(),
iconUnActive = `image://${unIng}`;
myChart.on('legendselectchanged', (params)=>{
let {selected,name} = params,i = lgList.indexOf(name);
let theOption = lgData.find(dt => dt.name === name); let iconActive = `image://${imgs[i%imglg]}`;
theOption.icon = selected[name] ? iconActive : iconUnActive;
// 更新图列
this.$chart.setOption({
legend: { data: lgData }
})
})

有问题的可以直接在评论下问我,欢迎~

echarts常用方法,legend状态支持两张图片切换(四)的更多相关文章

  1. javascript 两张图片切换 三目运算符

    <body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.sr ...

  2. echarts常用方法,饼图切换圆环中文字(三)

    在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...

  3. JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招

    一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...

  4. echarts饼图默认状态高亮显示

    需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...

  5. opencv_判断两张图片是否相同

    QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...

  6. HTML两张图片叠加问题的进一步修改

    要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...

  7. Echarts的legend改变图例图标为自定义图片

    当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...

  8. matplotlib 显示两张图片,折线图 和 scipy

    显示两张图片的代码: import numpy as np from scipy.misc import imread, imsave, imresize import matplotlib.pypl ...

  9. Linux 下wdcp支持两种安装方式

    wdcp支持两种安装方式1 源码编译 此安装比较麻烦和耗时,一般是20分钟至一个小时不等,具体视机器配置情况而定2 RPM包安装 简单快速,下载快的话,几分钟就可以完成源码安装(ssh登录服务器,执行 ...

随机推荐

  1. IIS部署Angular2

    因為Angular無刷新的特性,所以瀏覽器地址欄上的網址其實不會真實映射到磁盤的特定位置,所以我們需要安裝.Rewrite Module, 如下: Web.config 如下: <?xml ve ...

  2. php魔术变量以及命名空间

    魔术变量: PHP 向它运行的任何脚本提供了大量的预定义常量. 不过很多常量都是由不同的扩展库定义的,只有在加载了这些扩展库时才会出现,或者动态加载后,或者在编译时已经包括进去了. 有八个魔术常量它们 ...

  3. kaggle learn python

    def has_lucky_number(nums): return any([num % 7 == 0 for num in nums]) def menu_is_boring(meals): &q ...

  4. bootstrap 无需引入 直接使用

    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="styl ...

  5. 并查集 P3367 【模板】并查集

    P3367 [模板]并查集 #include<iostream> #include<algorithm> #include<cstdio> #include< ...

  6. JavaScript之事件的绑定与移除

    对于事件的绑定的方法有多种多样,但是在解除绑定事件的时候,就要注意使用的是那种绑定事件的方法,因为不同的绑定方法所对应的解除事件是不同的. 1. 原始写法 1.1 绑定事件:对象.事件=事件处理函数 ...

  7. Flutter 输入控件TextField设置内容并保持光标(cursor)在末尾

    TextField( controller: TextEditingController.fromValue(TextEditingValue( // 设置内容 text: inputText, // ...

  8. MapReduce编程模型简介和总结

    MapReduce应用广泛的原因之一就是其易用性,提供了一个高度抽象化而变得非常简单的编程模型,它是在总结大量应用的共同特点的基础上抽象出来的分布式计算框架,在其编程模型中,任务可以被分解成相互独立的 ...

  9. [C++ Primer Plus] 第9章、内存模型和名称空间(二)课后习题

    一.复习题 2.using声明和using编译指令的区别 using声明: using std::cin; using std::cout; using std::endl; using编译指令:us ...

  10. md5 collision(md5碰撞)之记录一些MD5值

    md5 collision之记录一些MD5值   “Magic Hash”的PHP漏洞可以使得攻击者非法获取用户的账号信息.   漏洞原因: PHP以一种特定的方式处理被哈希的字符串,攻击者可以利用其 ...