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登录服务器,执行 ...
随机推荐
- js前后五年的时间日期万年历
<script src='bootstrap/js/jquery-1.11.2.min.js'></script>//引入JQUERY文件<div> <sel ...
- nist-sha
nist目前支持的sha运算,sha1系列,输出mac160bit. sha2系列,支持sha2-224,sha2-256,sha2-384,sha2-512,sha2-512/224,sha2-51 ...
- 使用StringEscapeUtils转义、反转义字符串
使用commmons-lang.jar中的字符串转义工具类org.apache.commons.lang.StringEscapeUtils转义.反转义字符串,支持CSV.HTML.JAVA.Java ...
- C# 弹出确定、取消窗口
if (MessageBox.Show("确定要退出吗?", "", MessageBoxButtons.OKCancel, MessageBoxIcon.Qu ...
- Conv1D、Conv2D、Conv3D
由于计算机视觉的大红大紫,二维卷积的用处范围最广.因此本文首先介绍二维卷积,之后再介绍一维卷积与三维卷积的具体流程,并描述其各自的具体应用. 1. 二维卷积 图中的输入的数据维度为14×1414×14 ...
- python-列表与元组
列表(List) 特性: 列表也是一种Sequence 类型 下标 能切片 可以存储任何类型的数据,每个元素是任意类型,可以存放任 ...
- struts2+springmvc+hibernate开发。个人纪录
对于很多新手来说,都不太清楚应该怎么去放置代码并让他成为一种习惯.个人的总结如下: 一.基础包类的功能 1.dao :提供底层接口 2.daoimpl:实现底层接口类,与底层交互 3.entity:实 ...
- nodejs基础快速上手
node 快速了解 hello node.js console.log("hello Node.js"); let http = require("http") ...
- java0424 wen 集合框架2
- hdfs性能调优(cloudera)
参照官方文档:http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/cdh_ig_yarn_tuni ...