Echarts使用一个图例legend实现全选和全部取消的功能
1、修改legend的data值,在前面加上全选和全不选,data = ['全选','全不选',1,2,3]
2、监听 legendselectchanged事件
/ 使用刚指定的配置项和数据显示图表
var selectArr = option.legend.data;
myChart.on('legendselectchanged', function(obj) {
var selected = obj.selected;
var name = obj.name;
// 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event,导致本函数重复运行
// 使得 无 selected 对象
if (name == '全选') {//需要配置一个legend为‘全选’的名称
//alert("33");
var flag = $(this).attr('flag');
if(flag == 1){
var val = false;
$(this).attr('flag',0);
$(this).val('全选中');
}else{
var val = true;
$(this).attr('flag',1);
$(this).val('全不选');
}
var obj = {};
for(var key in selectArr){
obj[selectArr[key]] = val;
}
option.legend.selected = obj;
myChart.setOption(option);
}
});
Echarts使用一个图例legend实现全选和全部取消的功能的更多相关文章
- jQuery checkbox全选 和全部取消
1.chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...
- Vue 全选/取消全选,反选/取消反选
这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...
- js实现全选与全部取消功能
function checkAll() { //把所有参与选择的checkbox使用相同的name,这里为"num_iid" var eles = document.getE ...
- jquery实现checkbox全选和全部取消,以及获取值
在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...
- ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js
直接看代码: JS代码如下: <script type="text/javascript" language="javascript"> funct ...
- echarts设置图标图例legend多种形状
legend: { icon: "circle", // 字段控制形状 类型包括 circle,rect,line,roundRect,triangle,diamond ...
- js动态获取子复选项并设计全选及提交
在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加 ...
- angularJS全选功能实现
最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...
- angularjs实现 checkbox全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
随机推荐
- git签名设置
作用:只区分不同开发人员的身份 一.项目级别/仓库级别:仅在当前本地库范围内有效 签名设置用户名(UserName)和邮箱(User@email),邮箱可以是任意邮箱(无效邮箱也可以) git con ...
- 论文阅读笔记(十四)【AAAI2020】:Appearance and Motion Enhancement for Video-based Person Re-identification
Introduction 本文的贡献:提出了基于视频的行人重识别模型:Appearance and Motion Enhancement Model(AMEM).该模型对两类信息进行提取:提出了App ...
- 2-1.了解Pod对象
1.Pod参数定义 # 必填,版本号 apiVersion: string kind: Pod # 必填,元数据 metadata: # 必填,Pod对象的名称(命名规范需要符合RFC 1035规范) ...
- 【15】ML项目流程与正交化
结构化机器学习项目 一 ML项目流程 1,确立目标(确定开发/测试集 + 唯一最优化指标) 确定开发/测试集:开发/测试集应尽可能接近将来应用场景中的数据. 划分数据集:开发集和测试集大小足以评估模型 ...
- 对于tensorflow中的gradient_override_map函数的理解
# #############添加############## def binarize(self, x): """ Clip and binarize tensor u ...
- 《Photoshop 2020》初心版_v6 21.0.2.57
<Phtoshop 2020>初心版_v6 下载地址(5245) SHA1:E926A1B99D147A27A44050A5BCE2E69E2CDAEEAE 版本信息 发行版本 20 ...
- HTML文档快捷键
一.web浏览器 1.刷新网页 F5 二.VS Code 常用快捷键 1.快速生成HTML代码 首先,建立一个空文档,选择编程语言为HTML: 其次,按下!(英文状态下),再按下tab键,就可以了 ...
- Vue中axios有关请求头的几点小结
在Vue前端中向后端发起http请求会有着两种写法:一种是在vue文件中直接导入axios模板,另外一种是使用Vue的属性$http. 1.在第一种方式中,在同一个工程中所添加的vue文件直接使用ax ...
- 【vue 权威指南】 学习笔记 二
1.指令 1.1内部指令 基础指令:v-show , v-else , v-model , v-repeat , v-for , v-text , v-el , v-html , v-on , v-b ...
- hadoop 部署在centos 7 上
一.准备工作 (文章写于 2019-6) 根据官方文档而来,请注意时间,官方可能有更新,以官方文档为准 1. 配置网站参考: http://hadoop.apache.org/docs/r1.0.4 ...