echarts常用方法,legend状态支持两张图片切换(四)
在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状态支持两张图片切换(四)的更多相关文章
- javascript 两张图片切换 三目运算符
<body> <script> function changeImage(){ var s = document.getElementById('myimage'); s.sr ...
- echarts常用方法,饼图切换圆环中文字(三)
在echarts的饼图应用时,遇到过一个需求就是鼠标移到半环上可以切换环中的文字,同时支持legend点击事件.误区是,鼠标移动到环上重新渲染option,以切换内部的文字.重新渲染option的做法 ...
- JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
一般商业网站都有一个语言的需求,就是为了照顾使用正体中文的国人,会特地提供一个切换到正体中文的选项(或曰“繁体中文”).传统做法是在服务端完成的,即通过某些控件或者过滤器转换文本语言.这里笔者介绍一种 ...
- echarts饼图默认状态高亮显示
需求:饼状图默认状态下高亮显示指定内容. 最常见的两种: 一.饼图中间始终默认展示数据总数和统计事项的名字(如下图),这种实现方式比较简单,就不多介绍 二.饼图中间默认展示某一图例的具体数据,鼠标放在 ...
- opencv_判断两张图片是否相同
QQ:231469242 pip install opencv 如果找不到版本,去非官方下载opencv第三方包http://www.lfd.uci.edu/~gohlke/pythonlibs/ 下 ...
- HTML两张图片叠加问题的进一步修改
要想两张图片叠加,只需在circle添加一个Position:absolute就OK了 以上几步,很多大侠前辈都已经说过,相信不用再啰嗦,我想说的是一种扩展,将示例放到右边,可能因为我悟性低,研究了一 ...
- Echarts的legend改变图例图标为自定义图片
当折线图时,legend默认时rect形式,如果需要改图例形状,可以自己设置legend的icon属性 legend: { icon:'stack' }, 1.自定义每个图例样式:为data的每个对象 ...
- matplotlib 显示两张图片,折线图 和 scipy
显示两张图片的代码: import numpy as np from scipy.misc import imread, imsave, imresize import matplotlib.pypl ...
- Linux 下wdcp支持两种安装方式
wdcp支持两种安装方式1 源码编译 此安装比较麻烦和耗时,一般是20分钟至一个小时不等,具体视机器配置情况而定2 RPM包安装 简单快速,下载快的话,几分钟就可以完成源码安装(ssh登录服务器,执行 ...
随机推荐
- 【JavaScript】学习中遇到的一些问题
一.JavaScript中没法直接比较两个object和array是否相等
- spring-boot 参考链接
http://blog.csdn.net/jsu_9207/article/details/66472096 http://blog.csdn.net/lu1005287365/article/det ...
- 如何在Jenkins上配置一个可以从其它Job取回Artifact的Job
今天因为工作上的需求,需要在Jenskin上配置一个job, 它应该可以从其它所选择的Job中取回Artifact. 首先,在"构建"步骤中添加 "Copy Artifa ...
- python学习笔记之paramiko和sqlalchemy (第九天)
参考银角大王 :http://www.cnblogs.com/wupeiqi/articles/5095821.html http://www.cnblogs.com/wupeiqi/articles ...
- linux 扩展文件系统
1. 创建新分区 [root@localhost ~]# fdisk -l Disk /dev/sda: bytes, sectors Units = sectors of * = bytes Sec ...
- PAT (Basic Level) Practice (中文)1002 写出这个数 (20 分)
题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805324509200384 #include <iost ...
- pandas的基本功能(一)
第16天pandas的基本功能(一) 灵活的二进制操作 体现在2个方面 支持一维和二维之间的广播 支持缺失值数据处理 四则运算支持广播 +add - sub *mul /div divmod()分区和 ...
- python基础部分----文件、copy、内存指针
0.来源:https://www.cnblogs.com/jin-xin/articles/9439483.html 1.is VS id() VS == 2.小数据池.代码块缓存机制 3.赋值符号= ...
- 移动端与pc端如何用localStorage实现历史纪录?
1.使用jq完成localStorage实现历史纪录版. 代码如下: <!DOCTYPE html> <html> <head lang="en"&g ...
- day 04
今天学些的内容 流程控制 1.在python一般代码执行顺序都从上到下依次解释执行称为顺序结构. 2.然而遇到需要一些条件判断的时候需要选择不同的执行路线去解释执行 这种流程控制称为 分支结构 也可叫 ...