echarts重写图例点击事件 (实用，赞）

电玩女神 2023-05-29 13:16 11阅读 0赞

原文出处：[https://blog.csdn.net/sunscheung/article/details/76512306][https_blog.csdn.net_sunscheung_article_details_76512306]

echarts version: 3.1.2

### 修改图例点击事件样例代码： ###

*  当第一次点击图例时，只显示点击的图例。
 *  当还剩一个图例被`取消选中`后，自动全选中所有图例。

var triggerAction = function(action, selected) {
            legend = [];
    
            for ( name in selected) {
                if (selected.hasOwnProperty(name)) {
                    legend.push({name: name});
                }
            }
    
            myChart.dispatchAction({
                type: action,
                batch: legend
            });
        };
    
        var isFirstUnSelect = function(selected) {
    
            var unSelectedCount = 0;
            for ( name in selected) {
                if (!selected.hasOwnProperty(name)) {
                    continue;
                }
    
                if (selected[name] == false) {
                    ++unSelectedCount;
                }
            }
            return unSelectedCount==1;
        };
    
        var isAllUnSelected = function(selected) {
            var selectedCount = 0;
            for ( name in selected) {
                if (!selected.hasOwnProperty(name)) {
                    continue;
                }
    
                // 所有 selected Object 里面 true 代表 selected， false 代表 unselected
                if (selected[name] == true) {
                    ++selectedCount;
                }
            }
            return selectedCount==0;
        };
    
        myChart.on('legendselectchanged', function(obj) {
            var selected = obj.selected;
            var legend = obj.name;
    
            // 使用 legendToggleSelect Action 会重新触发 legendselectchanged Event，导致本函数重复运行
            // 使得 无 selected 对象
            if (selected != undefined) {
    
                if (isFirstUnSelect(selected)) {
                    triggerAction('legendToggleSelect', selected);
                } else if (isAllUnSelected(selected)) {
                    triggerAction('legendSelect', selected);
    
                }
            }
    
        });

[https_blog.csdn.net_sunscheung_article_details_76512306]: https://blog.csdn.net/sunscheung/article/details/76512306

发表评论取消回复

表情：

评论列表（有 0 条评论，11人围观）

还没有评论，来说两句吧...

相关阅读

相关 ECharts 触发click点击事件

1 实现代码 <body>  <div id="main" st

我不是女神ヾ/ 2023年10月05日 11:41/ 0 赞/ 31 阅读

相关 echarts重写图例点击事件 (实用，赞）

原文出处：[https://blog.csdn.net/sunscheung/article/details/76512306][https_blog.csdn.net_sun

电玩女神/ 2023年05月29日 13:16/ 0 赞/ 12 阅读

相关 echarts柱图点击事件改变图例

效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLm

ゝ一纸荒年。/ 2023年02月24日 03:43/ 0 赞/ 337 阅读

相关点击事件OnClickListener接口重写onClick方法实现

强烈推荐文章：[屏蔽csdn百度推广广告和屏蔽广告后上栏提醒][csdn] <-点击进入 OnClickListener接口重写onClick方法 XML：

爱被打了一巴掌/ 2022年05月22日 06:10/ 0 赞/ 311 阅读

相关 echarts 柱状图点击事件

<body> <div style="margin: 0;padding: 5px;"> <div id="main" style="width:

野性酷女/ 2022年04月25日 08:10/ 0 赞/ 356 阅读

相关 eCharts增加图例（legend）的点击事件--echarts-for-react

1. 功能需求：用户点击图例，进入下钻页面。 2. 背景使用echarts-for-react开发的图表，echarts的点击事件不能应用与图例，点击图例会触

╰半橙微兮°/ 2022年04月24日 08:12/ 0 赞/ 1386 阅读

相关 echart-图标取消点击事件

最近再改公司的后台系统，用到了图标功能 echart默认有点击展示隐藏的功能 ![1074458-20190624154044267-1530792970.png]

港控/mmm°/ 2021年12月21日 09:57/ 0 赞/ 785 阅读

相关 chart 图例点击事件

legend : { show : true, align : 'right', onClick : function(event, le

淩亂°似流年/ 2021年10月08日 05:58/ 0 赞/ 372 阅读

相关 Charts.js 图例添加点击事件

<!DOCTYPE html> <html lang="en"> <head> <meta http-

短命女/ 2021年10月08日 05:44/ 0 赞/ 622 阅读

相关关于Echarts设置点击事件

// 封装饼图代码 Publicshape:function(publicJsonArray,publicId){

淩亂°似流年/ 2021年09月17日 02:01/ 0 赞/ 467 阅读