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 ...
随机推荐
- 微信退款时候报”请求被中止: 未能创建 SSL/TLS 安全通道“或”The request was aborted: Could not create SSL/TLS secure channel“的错误
如题,英文中文表述的是一个意思 退款测试在我本机测试一切都是正常的,但是发布到了服务器就报这样的一个错啦 但是无论百度或者google或者bing,你能够搜索到的结果都很类似,综合起来就是加这样一些代 ...
- E. Vanya and Balloons Codeforces Round #355 (Div. 2)
http://codeforces.com/contest/677/problem/E 题意:有n*n矩形,每个格子有一个值(0.1.2.3),你可以在矩形里画一个十字(‘+’形或‘x’形),十字的四 ...
- 【ShaderToy】画一个球体
嗯,其实渲染球体,可以看做就是一个2d圆形图案+渲染光泽的函数. 定义球体结构——半径,球心坐标 struct Sphere { vec3 center; float radius; };edzx- ...
- important的妙用解决firefox和ie的css兼容问题
设置css的min-height属性.min-height在Firefox里有效,但IE无法识别.下面有个不错的解决方案,大家可以参考下 对于某些内容可变的层(比如用户评论),我们希望它有个最小的高度 ...
- 【转】Java 通过JDBC连接Mysql数据库的方法和实例【图文说明】
JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...
- Django commands自定制
什么是Django Commands Django 对于命令的添加有一套规范,你可以为每个app 指定命令.通俗一点讲,比如在使用manage.py文件执行命令的时候,可以自定制自己的命令,来实现命令 ...
- 20175306 MyCP博客总结
课后必做题:MyCP总结 cp命令了解: · 作用:cp指令用于复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件或目录复制到此目录中.若同 ...
- MongoDB代码——Python篇
需要安装的库:pymongo 一.添加文档 from pymongo import MongoClient # 连接服务器 conn = MongoClient("localhost&quo ...
- SQLServer如果查询表相关的视图以及存储过程
最近在维护一个电商平台,需要对订单表增加字段,但是在review代码的时候发现这个平台的代码写的很有提升价值,且大量的使用了识图和存储过程,所以也给刚接触这个平台的萌新,也就是瓦,造成了不小的困扰,毕 ...
- 2018-2019-2 20165234 《网络对抗技术》 Exp0 Kali安装 Week1
Week1 kali安装 一.下载系统镜像文件 首先下载系统镜像,进入kali官网,在Downloads中选择Download Kali Linux. 我选择的是64位版本,点击HTTP下载镜像文件. ...