1、修改legend的data值,在前面加上全选和全不选,data = ['全选','全不选',1,2,3]

2、监听 legendselectchanged事件

  1. / 使用刚指定的配置项和数据显示图表
  2. var selectArr = option.legend.data;
  3. myChart.on('legendselectchanged', function(obj) {
  4. var selected = obj.selected;
  5. var name = obj.name;
  6. // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event,导致本函数重复运行
  7. // 使得 无 selected 对象
  8. if (name == '全选') {//需要配置一个legend为‘全选’的名称
  9. //alert("33");
  10. var flag = $(this).attr('flag');
  11. if(flag == 1){
  12. var val = false;
  13. $(this).attr('flag',0);
  14. $(this).val('全选中');
  15. }else{
  16. var val = true;
  17. $(this).attr('flag',1);
  18. $(this).val('全不选');
  19. }
  20. var obj = {};
  21. for(var key in selectArr){
  22. obj[selectArr[key]] = val;
  23. }
  24. option.legend.selected = obj;
  25. myChart.setOption(option);
  26. }
  27. });

Echarts使用一个图例legend实现全选和全部取消的功能的更多相关文章

  1. jQuery checkbox全选 和全部取消

    1.chkAll选中,全部chk选中  ,chkAll取消选中,全部chk取消选中 //chkAll选中,全部chk选中 ,chkAll取消选中,全部chk取消选中 $("#chkAll&q ...

  2. Vue 全选/取消全选,反选/取消反选

    这是一个组件: <template> <div> <div> <input type="checkbox" v-model="i ...

  3. js实现全选与全部取消功能

    function checkAll() { //把所有参与选择的checkbox使用相同的name,这里为"num_iid"    var eles = document.getE ...

  4. jquery实现checkbox全选和全部取消,以及获取值

    在后台管理中经常会遇到列表全选和取消的功能,如评论审核.申请等,用到的html标记就是checkbox.我用的是mysql数据库,代码如下: <!DOCTYPE html PUBLIC &quo ...

  5. ASP.NET CheckBoxList 控件实现全选、反选、清除功能 利用js

    直接看代码: JS代码如下: <script type="text/javascript" language="javascript"> funct ...

  6. echarts设置图标图例legend多种形状

    legend: {   icon: "circle",   //  字段控制形状  类型包括 circle,rect,line,roundRect,triangle,diamond ...

  7. js动态获取子复选项并设计全选及提交

    在做项目的时候,会遇到根据父选项,动态的获取子选项,并列出多个复选框,提交时,把选中的合并成一个字符提交后台 本章将讲述如何通过js控制实现该操作: 1:设计父类别为radio,为每一个radio都加 ...

  8. angularJS全选功能实现

    最近在做的一个项目要增加全选和反选功能,之前只做过JQ版的全选和反选. 实现效果: 1.点击全选checkbox可以切换全选和全部清空 2.点击列表中的checkbox,当全部选中时全选选中 3.在全 ...

  9. angularjs实现 checkbox全选、反选的思考

    之前做了一周的打酱油测试,其实感觉其实测试也是上辈子折翼的天使. 好长时间没写代码,感觉好多都不会了. 感谢这周没有单休,我能看熬夜看奥运了.我能有时间出去看个电影,我能有时间出去逛个商城,我能有时间 ...

随机推荐

  1. 容错保护机制:Spring Cloud Hystrix

    最近在学习Spring Cloud的知识,现将容错保护机制Spring Cloud Hystrix 的相关知识笔记整理如下.[采用 oneNote格式排版]

  2. Vue中进度条的使用

    1. 安装npm install --save nprogress 2.导入js和css import NProgress from 'nprogress'import 'nprogress/npro ...

  3. java网页程序采用 spring 防止 csrf 攻击 转

    银行项目开发过程中,基本都会采用 spring 框架,所以完全可以不用自己开发 filter 去拦截 csrf 攻击的请求,而直接采用实现 spring 提供的 HandlerInterceptor ...

  4. H5_0022:判断平台和微信及弹出推广提示

    1,原文 <script> var t = document.createElement("div"); t.style.cssText="position: ...

  5. Uva12034 (组合数取模)

    题意:两匹马比赛有三种比赛结果,n匹马比赛的所有可能结果总数 解法: 设答案是f[n],则假设第一名有i个人,有C(n,i)种可能,接下来还有f(n-i)种可能性,因此答案为 ΣC(n,i)f(n-i ...

  6. C语言递归之二叉树的最小深度

    题目描述 给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例 输入:[3,9,20,null,null,15,7] ...

  7. c#在类里不能使用Response解决方法

    response对应的类是HttpResponse,  在System.Web 命名字间里,   如果你在类中要使用   Response 的话,   需要使用System.Web.HttpConte ...

  8. 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 ...

  9. 126.自动处理上传的文件,获取上传文件的url

    使用模型来处理上传的文件: 在定义模型的时候,我们可以给存储的文件的字段指定为FileField,这个field可以传递一个upload_to参数,用来指定上传上来的文件保存到哪里,比如我们让它保存到 ...

  10. python基础(1):第一个python程序的编写

    1.第一个python编程 1.1 python的安装 1> https://www.python.org/  进入python官网,选择目标版本进行download 2> 点击setup ...