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全选、反选的思考
之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...
随机推荐
- 客户端负载均衡框架:Spring Cloud Ribbon
最近在学习Spring Cloud的知识,现将客户端负载均衡框架 Spring Cloud Ribbon 的相关知识笔记整理如下.[采用 oneNote格式排版]
- java课后作业10.14
一.简单总结一下java中类的初始化的规律: 1.类的构造函数优先 2.初始化块儿和定义时候的赋值,这俩个初始化方法优先级是一样的,在程序中谁最后执行,那么程序就采用谁的初始化值. 二.在java中想 ...
- 我用 Python 集齐了五福
[新智元导读]又到了每年集五福的时间.你的五福集齐了吗?每天在各种群里苦苦求扫福,或者忍受着别人天天求扫福,是不是有点厌倦了.作为技术人员,怎么能忍受得了这种低效的全人工操作呢?今天就为大家推荐用 ...
- linux服务基础之编译安装nginx
nginx源码下载地址: http://nginx.org/download/nginx-1.16.0.tar.gz //根据需要下载其他版本 1. 下载nginx # wget http://ngi ...
- 必看!macOS进阶不得不知的实用小技巧
不知道大家对使用苹果电脑的体验如何?您充分利用您的mac了吗?其实macOS上存在着许多快捷方式和技巧可以帮助简化我们的工作流程,提高效率,但是在日常生活中经常被人们忽略或者遗忘.以下是macdown ...
- stun/turn服务器部署
目录: 一.简介 二.安装 三.配置与运行 四.运行检测 五.答疑环节 一.简介 本文通过在服务器上安装coturn这个软件,实现搭建STUN服务器和TURN服务器. coturn 简介:是一个免费的 ...
- PHP 冷知识
1,执行Linux命令 <?php $a =`ls -a /`; // execute linux command echo '<pre>'.$a; 2.为变量起别名 <?ph ...
- Hadoop学习之路(5)Mapreduce程序完成wordcount
程序使用的测试文本数据: Dear River Dear River Bear Spark Car Dear Car Bear Car Dear Car River Car Spark Spark D ...
- jsonp 完成跨域请求注意事项
jsonp 不支持post方式请求跨域数据 可以使用get方式请求 !jsonp 不支持post方式请求跨域数据 可以使用get方式请求 !jsonp 不支持post方式请求跨域数据 可以使用get方 ...
- CSS的模板资源+编辑图像大小
模板资源 源码之家搜登录页面,链接:https://www.mycodes.net/190/10144.htm (或者搜门户网站 模板之家,里面页面更强大!) 编辑图像大小 然 ...