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实现全选和全部取消的功能的更多相关文章

  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. k8s 在Centos上 安装

    k8s安装步骤: 1.所有机器上执行以下命令,准备安装环境:(注意是所有机器,主机master,从机node都要安装) 1.1.安装epel-release源(EPEL (Extra Packages ...

  2. linux安装最新(任意)版本nodejs

    首先在终端中使用命令 uname -a 查看系统版本 uname -a x86_64 是64位的 所以要安装64位对应的nodejs 打开nodejs中文网里的下载 找到64位的文件 点击后就下载了 ...

  3. Educational Codeforces Round 80 (Rated for Div. 2)(A-E)

    C D E 这三道题感觉挺好       决定程序是否能通过优化在要求的时间内完成,程序运行时间为t,你可以选择花X天来优化,优化后程序的运行时间为t/(x+1)取上整,花费的时间为程序运行时间加上优 ...

  4. beautifulsoup4进阶学习笔记

    requests库是可以找到想要的东西,基本上几行代码就搞定,但是进一步把有用的内容提取出来变成自己想要的格式来方便后续进行数据分析 正则表达式提取的话,需要一些时间成本,这个可以每天积累一点. 这里 ...

  5. 小白月赛22 D : 收集纸片

    D:收集纸片 考察点 : 全排列,对数据范围的估计程度 坑点 : 注意算最后回到初始的那步距离 析题得侃 : 一看题目最短路,诶呦,这不是最拿手的 BFS 走最短路吗?哈哈,定睛一看 这么多目的地,这 ...

  6. 在linux中安装nginx

    linux系统安装在vmware中,首先在主机中利用shell工具与虚拟机连接 1.在linux中查看虚拟机的ip地址 在终端输入 ifconfig 红框里面就是ip地址 2.在主机中打开shell工 ...

  7. Visual Studio 问题汇总

    VS2019 16.3.6   1   JSON 文件没有进行格式化验证 开发时运行正常,部署在IIS中有错误提示. 2  .NET Core 3.0 没有提供中文包 所有注释都是英文的.

  8. 数据预处理 | python 第三方库 imblearn 处理样本分布不均衡问题

    说明:目前 只记录了 过采样 和 欠采样 的代码部分 1 样本分布不均衡描述: 主要出现在与分类相关的建模问题上,不均衡指的是不同类别的样本量差异非常大. 样本量差距过大会影响到建模结果 2 出现的场 ...

  9. Codeforce 515A - Drazil and Date

    Someday, Drazil wanted to go on date with Varda. Drazil and Varda live on Cartesian plane. Drazil's ...

  10. AtCoder Beginner Contest 068 ABCD题

    A - ABCxxx Time limit : 2sec / Memory limit : 256MB Score : 100 points Problem Statement This contes ...