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. 吴裕雄--天生自然HADOOP操作实验学习笔记:hbase的javaAPI应用

    实验目的 进一步了解hbase的操作 熟悉使用IDEA进行java开发 熟悉hbase的javaAPI 实验原理 前面已经了解通过hbase的shell操作hbase,确实比较难以使用,另外通过hiv ...

  2. 使用Python库paramiko登录远程设备

    前言 手动下载paramiko库的安装包.在PyPi库中查找即可,但是不到是我的电脑问题还是网络问题,2.0.0以上版本我都安装不了,因此我自己是安装的paramiko 1.17.0版本,此版本经过测 ...

  3. Pikachu-XSS(跨站脚本)

    XSS(跨站脚本)概述 Cross-Site Scripting 简称为“CSS”,为避免与前端叠成样式表的缩写"CSS"冲突,故又称XSS.一般XSS可以分为如下几种常见类型:  ...

  4. vue登录管理

    pc端页面登录逻辑,用户未登录状态下可以访问所有页面,但是请求数据是有限的,只有在登录状态下才能访问全部数据,同时未登录状态下,可视区有遮挡元素提示登录. 主要使用的技术vue.vuex.vue-ro ...

  5. Docker+Nginx+Tomcat实现负载均衡

    环境检测: 1.Docker没有安装的小伙伴请查看https://www.cnblogs.com/niuniu0108/p/12372531.html 2.没有创建Nginx容器的小伙伴请查看http ...

  6. idea中如何配置git以及在idea中初始化git,并push到码云

    一.给idea配置git 打开IDEA,按照路径  Fie-->Settings --> Tools -->Terminal 找到后设置右边的Shell path(自己安装的Git路 ...

  7. StarUML 2下载、安装、破解全过程

      StarUML官方下载地址:  http://staruml.io/download 破解: ​  1.使用Editplus或者Notepad++等特殊的文本编辑器打开 安装位置下/www/lic ...

  8. phpstudy+phpstorm 浏览器没有解析php文件,直接显示源码

    用phpstorm编辑完项目,右键浏览器预览时页面报错:502 Bad Gateway PhpStorm 2019.1 此时默认打开的地址是:localhost:63339/开头的一长串…… 查资料说 ...

  9. [转] c# 中使用opencv进行视频捕获

    简介 这个项目是关于如何从网络摄像头或者视频文件(*.AVI)中捕获视频的,这个项目是用C#和OPENCV编写的. 这将有助于那些喜欢C#和OpenCV环境的人.这个程序完全基于Visual Stud ...

  10. MongoDB的安装问题

    Mongo的安装与启动: npm install mongodb -g MongoDB高性能.开源.无模式的文档型数据库,它基于分布式文件存储.介于关系数据库和非关系数据库之间的一种产品.其最大特点: ...