平时做图表的时候经常用echarts，确实是一款很好用的插件。

开发中遇到了一个问题，在展示的曲线，也就是legend很多的时候，不太好只展示其中几条。配置中是可以默认设置初始化是否展示，但不适用于全选和全不选的场景。

研究了文档后发现，可以通过修改配置，然后再次调用setOption方法实现。

我的做法是添加一个button，点击按钮的时候，触发事件重新画图。代码不复杂，贴在下面。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

    <!-- 引入 echarts.js -->

    <script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.4.0/echarts.common.js"></script>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <input id="selectall" type="button" value="全不选" flag="1"/>

    <div id="main" style="width: 600px;height:400px;"></div>

    <script type="text/javascript">

        // 基于准备好的dom，初始化echarts实例

        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据

        var option = {

            tooltip : {

                trigger: 'axis'

            },

            legend: {

                data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎'],

                //selected:{'邮件营销':true,'联盟广告':false,'视频广告':true,'直接访问':true,'搜索引擎':true}

            },

            calculable : true,

            xAxis : [

                {

                    type : 'category',

                    boundaryGap : false,

                    data : ['周一','周二','周三','周四','周五','周六','周日']

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    name:'邮件营销',

                    type:'line',

                    stack: '总量',

                    data:[120, 132, 101, 134, 90, 230, 210],

                    selected:false

                },

                {

                    name:'联盟广告',

                    type:'line',

                    stack: '总量',

                    data:[220, 182, 191, 234, 290, 330, 310]

                },

                {

                    name:'视频广告',

                    type:'line',

                    stack: '总量',

                    data:[150, 232, 201, 154, 190, 330, 410]

                },

                {

                    name:'直接访问',

                    type:'line',

                    stack: '总量',

                    data:[320, 332, 301, 334, 390, 330, 320]

                },

                {

                    name:'搜索引擎',

                    type:'line',

                    stack: '总量',

                    data:[820, 932, 901, 934, 1290, 1330, 1320]

                }

            ]

        };

        // 使用刚指定的配置项和数据显示图表。

        myChart.setOption(option);

        var selectArr = myChart.getOption().legend[0].data;

        $('#selectall').click(function(){

            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);

        });

    </script>

</body>

</html>

然后点击button,就可以实现全选和全不选了，页面如下。

点击按钮后效果如下

echarts图标legend全选功能添加的更多相关文章

  1. Android高级控件（一）——ListView绑定CheckBox实现全选，添加和删除等功能

    Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...

  2. C# winform中的datagridview控件标头加入checkbox，实现全选功能。

    /// <summary> /// 给DataGridView添加全选 /// </summary> public class AddCheckBoxToDataGridVie ...

  3. Form - CHECKBOX全选功能

    FORM BUILDER开发,遇到这样一个需求: 添加一个CHECKBOX完成全选功能,红框为新添加的CHECKBOX(如图示) Try to use APP_RECORD.FOR_ALL_RECOR ...

  4. Java Swing 如何实现记事本中“编辑”菜单下的 剪切，复制，粘贴，删除，全选 功能

    这篇文字将要学习以下知识点: 1.如何给JButton按钮添加鼠标点击事件监听器 #1.addMouseListener(MouseListener l)  给JButton添加一个鼠标点击监听器l ...

  5. JS实现全选功能

    000. 开始 学习JS有一段时间了,最近看了一些JS练手的小demo实例,自己也尝试着用JS进行实现. 全选功能是在很多注册页面.获取用户兴趣爱好.让用户勾选一些选项等页面中常见的一种效果,主要有全 ...

  6. Vue的全选功能实现思路

    全选功能的实现主要分两步: 1. 点击全选框选中所有选择框. 2. 当所有选择框都被选中时,勾选全选框. 详细思路: 1. 点击全选框选中所有选择框: 给全选框绑定一个值,然后添加change时间,当 ...

  7. html javascript checkbox实现全选功能

    html代码 <input type="checkbox" id="all" />all</input> <input type= ...

  8. 第八十二篇：Vue购物车(三) 实现全选功能

    好家伙, 继续完善购物车相应功能 1.如何实现全选和反全选 1.1.全选框的状态显示(父传子) 来一波合理分析: 在页面中,有三个商品中 三个商品中的第二个未选择, 我么使用一个计算属性(fullSt ...

  9. js初学—实现checkbox全选功能

    布局如下: <p ><input type="checkbox" id="che1"/>全选</p><div id=& ...

随机推荐

  1. 我和domino不得不说的故事（连载2016-3-2）

    1.关于NotesViewEntry 注意:通过NotesViewEntry获取某列的值时,若该列的值为@IsExpandable or @DocNumber 或者是常量时,将不会显示. Set en ...

  2. urllib2模块中文翻译与学习 - Python 2.7.8官方文档

    总结 目的 打开指定网址 要求 了解需要处理的网站的操作流程 数据包的构造与提交 对可能的响应处理选择合适的处理器(模块内的各种 *Handler()) 核心 urllib.urlencode(que ...

  3. 淘宝的前端类库-KISSY

    KISSY(淘宝) KISSY是淘宝的前端类库,几乎在淘宝的每个页面上都能看到它的身影. KISSY提供稳定的核心,包括 oo.dom.Event.Anim.Ajax 等:强大且易用的脚本加载器,特有 ...

  4. 数据库学习笔记 (三) python操作数据库

    python 操作MYSQL数据库主要有两种方式: 使用原生模块:pymysql ORM框架:SQLAchemy 一.pymysql 1.1下载安装模块 第一种:cmd下:执行命令下载安装:pip3 ...

  5. linq to sql 类的使用

    本文介绍linq to sql模型类的使用 EntityFramework是重量级的数据库模型,如果你想要一个简单轻量级的数据库模型,建议使用linq to sql类 创建模型类 在项目中添加linq ...

  6. 问题：只能在执行 Render() 的过程中调用 RegisterForEventValidation；结果：只能在执行 Render() 的过程中调用 RegisterForEventValidation

    只能在执行 Render() 的过程中调用 RegisterForEventValidation 当在导出Execl或Word的时候,会发生只能在执行 Render() 的过程中调用 Register ...

  7. 【Android 多媒体应用】使用 VideoView 播放视频

    1.MainActivity.java import android.os.Bundle; import android.support.v7.app.AppCompatActivity; impor ...

  8. Javascript面向对象（三）：非构造函数的继承

    这个系列的第一部分介绍了"封装",第二部分介绍了使用构造函数实现"继承". 今天是最后一个部分,介绍不使用构造函数实现"继承". 一.什么是 ...

  9. 数据库监听。数据库一次notify，Activity多次接收

    今天项目中发现一个bug: (1)当uri数据库中有更新,会从数据库层DataService中通知应用层,调用notifyChange: mContext.getContentResolver().n ...

  10. render tree与css解析

    浏览器在构造DOM树的同时也在构造着另一棵树-Render Tree,与DOM树相对应暂且叫它Render树吧,我们知道DOM树为javascript提供了一些列的访问接口(DOM API),但这棵树 ...