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 Hystrix
最近在学习Spring Cloud的知识,现将容错保护机制Spring Cloud Hystrix 的相关知识笔记整理如下.[采用 oneNote格式排版]
- Vue中进度条的使用
1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...
- java网页程序采用 spring 防止 csrf 攻击 转
银行项目开发过程中,基本都会采用 spring 框架,所以完全可以不用自己开发 filter 去拦截 csrf 攻击的请求,而直接采用实现 spring 提供的 HandlerInterceptor ...
- H5_0022:判断平台和微信及弹出推广提示
1,原文 <script> var t = document.createElement("div"); t.style.cssText="position: ...
- Uva12034 (组合数取模)
题意:两匹马比赛有三种比赛结果,n匹马比赛的所有可能结果总数 解法: 设答案是f[n],则假设第一名有i个人,有C(n,i)种可能,接下来还有f(n-i)种可能性,因此答案为 ΣC(n,i)f(n-i ...
- C语言递归之二叉树的最小深度
题目描述 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例 输入:[3,9,20,null,null,15,7] ...
- c#在类里不能使用Response解决方法
response对应的类是HttpResponse, 在System.Web 命名字间里, 如果你在类中要使用 Response 的话, 需要使用System.Web.HttpConte ...
- PAT (Advanced Level) Practice 1120 Friend Numbers (20 分) (set)
Two integers are called "friend numbers" if they share the same sum of their digits, and t ...
- 126.自动处理上传的文件,获取上传文件的url
使用模型来处理上传的文件: 在定义模型的时候,我们可以给存储的文件的字段指定为FileField,这个field可以传递一个upload_to参数,用来指定上传上来的文件保存到哪里,比如我们让它保存到 ...
- python基础(1):第一个python程序的编写
1.第一个python编程 1.1 python的安装 1> https://www.python.org/ 进入python官网,选择目标版本进行download 2> 点击setup ...