v-charts修改点击图例事件,legendselectchanged
html:
<!--折线图-->
<ve-line :extend="item.chartExtend"
:data-zoom="dataZoom"
:height="chartHeight"
:legend="item.legend"
:data="item"
:events="chartEvents"
:settings="isRateTypeData(item.id)?successRateSettings:chartSettings"></ve-line> 需要在v-charts图表添加legend属性
chartDataColumns.map(item => {
console.log('chartDataColumns66',chartDataColumns)
if(item !== 'TIME'){
selectedObj[item] = true
}
})
chartItem['legend'] = selectedObj// 如果点击设置selected无效,则先去掉这行
this.chartEvents = {
legendselectchanged: (item) => {
let currSelectName = item.name
let currChartItem = self.chartData[self.deleteIndex]
let selectedObj = item.selected
let selectedNum = 0
for(let key in selectedObj){
if(selectedObj[key]){ // selected对象内值为true
selectedNum++
}
selectedObj[key] = false
}
if(selectedNum > 1){ // selectedNum > 1说明当前全部选中,此时点击,只有当前的设为选中
for(let key in selectedObj){
selectedObj[key] = false
}
selectedObj[currSelectName] = true
}else{ // 当前只有一个选中,点击后,全部重置为选中
for(let key in selectedObj){
selectedObj[key] = true
}
}
self.$set(currChartItem['legend'], 'selected', selectedObj)
},
legendscroll: (params) => {// 选中图例时,设置legend滚动页码,防止自动切回第一页
let legend = this.chartItemData['legend']
this.$set(legend, 'scrollDataIndex', params.scrollDataIndex)
},
}
v-charts修改点击图例事件,legendselectchanged的更多相关文章
- Echarts 自定义legend图片,修改点击之后的颜色图解
第一个问题:echarts 可以自定义图例的图标,百度上很多回答都是引用的相对路径,但是不知道为啥,我的vue项目就是引用不显示,在network里面找不到相应图片 后来我想了个法子,就是先获取到这个 ...
- QT5 QtreeWidget 实现点击item事件以及右键菜单删除item 和 重命名item
1.new 一个QTreeWidget 对象,并设置头标签,和根节点(个人程序需要) QTreeWidget* treeWidget = ui.treeWidget;//我已经在ui设计师中拖了一个Q ...
- android 防止多次点击,导致事件监听响应到其他界面
下面有个案例: A点击的时候就跳转到B界面,点击B界面后结束,返回到A界面中 1.此时在B界面中,设置点击事件,点击后结束B v.setOnClickListener(new OnClickListe ...
- 昨天所写的JQ 点击隐藏事件,关键性原理
JQ 点击隐藏事件,关键性原理 1.JQ 库的调用 一般选择为: 1)库越小越好 2)库的功能越强大越好 <script src="js/jquery.js" type=&q ...
- c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 .
// c#控制IE浏览器自动点击等事件WebBrowser,mshtml.IHTMLDocument2 分类: c# 2013-02-06 15:18 3008人阅读 评论(0) 收藏 举报 可以实现 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- Vue 框架-02-事件:点击, 双击事件,鼠标移上事件
Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...
- js去掉浏览器右键点击默认事件(+vue项目开启右键行为)
js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...
- 18.Yii2.0框架模型修改记录 和 修改点击量
目录 修改数据 修改点击量 修改数据 上面要 use app\models\Article; //修改 //http://yii.com/?r=home/Edit public function ac ...
随机推荐
- Arrays和String单元测试 20175301
要求 在IDEA中以TDD的方式对String类和Arrays类进行学习 一.String类相关方法的单元测试 1.ChatAt的测试 代码: import org.junit.Test; impor ...
- JGUI源码:DataTable固定列样式(20)
本来感觉这个固定列很容易实现的,一般都是几个table组合实现,真正自己从头做的时候,发现有很多坑,本文只是固定列原理,真正实现datatable的话,代码量比较大的,后续再进行完善. 使用左中右三个 ...
- mysql8用户管理
查看当前登录用户: 创建用户: create user '用户名'@'主机地址' identified with mysql_native_password by '密码'; 修改密码: alter ...
- linux服务器磁盘挂载操作
具体操作是:先对磁盘进行格式化,格式化后挂载到需要的挂载点,最后添加分区启动表,以便下次系统启动随机自动挂载.1.首先查看系统中磁盘信息,命令为:fdisk -l; 2.找到未使用的磁盘,对其进行格式 ...
- CentOS7.6搭建redis4.0.1 cluster集群
1. 操作系统信息: $ uname -a Linux iZbp11d57wmumnwuihb2czZ -.el7.x86_64 # SMP Fri Feb :: UTC x86_64 x86_64 ...
- Mybatis 常用注解
Mybatis常用注解对应的目标和标签如表所示: 注解 目标 对应的XML标签 @CacheNamespace 类 <cache> @CacheNamespaceRef 类 <cac ...
- Spring Tools4
Spring Tools4是一个集成了STS插件的Eclipse,所以下载之后就不需要再下载eclipse. 访问 https://spring.io/tools/ 点击“Download STS4 ...
- 如何使用npm构建一个react demo项目
方法一: 1) 安装node.js环境 点我进入nodejs官网 1.1) 下载LTS(Long term support)版本,安装 1.2) 在cmd中使用以下命令查看node是否安装成功 no ...
- CNN解析和模型分析
https://wenku.baidu.com/view/b0add84eb94ae45c3b3567ec102de2bd9605de8a.html?pn=51 http://www.cnblogs. ...
- UiAutomator2.0 - 控件实现点击操作原理
目录 一.UiObject 二.UiObject2 穿梭各大技术博客网站,每天都能看到一些的新的技术.突然感觉UiAutomator 2.0相对于现在来说已经是个很久远的东西了ε=(´ο`*))).写 ...