Echart重写图例点击事件

最新推荐文章于 2024-10-30 20:09:28 发布

原创最新推荐文章于 2024-10-30 20:09:28 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#Eharts Legend重写 #Echarts图例单击 #Echarts 图例点击事件

Echarts 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何重写Echarts的图例点击事件，实现第一次点击时仅显示所选图例，且在所有图例都被取消选中后自动全选的效果。通过示例代码详细展示了这一过程。

echarts version: 3

修改图例点击事件样例代码：
当第一次点击图例时，只显示点击的图例。
当还剩一个图例被取消选中后，自动全选中所有图例。

var lastselect="";//记录最近一次单击值
var oldvalue="";//记录上一次单击值
var cs=1;//记录选中单个值，还是所有，默认1
var triggerAction = function(action, selected) {
        legend = [];
        for ( name in selected) {
            if ((((selected[name] == true&&name==oldvalue) ||oldvalue=="")&&action=="legendToggleSelect")
            ||(action=="legendSelect")){
                legend.push({name: name});
            }
        }
         oldvalue=lastselect;

        myChart.dispatchAction({
            type: action,
            batch: legend
        });
    };
//当有其它选中图例时
    var isFirstUnSelect = function(selected) {
        var count=0;
        var unSelectedCount = 0;
        for ( name in selected) {
            count++;
            if (selected[name] == true && cs==2) {
                if(name!=oldvalue && oldvalue!=""){
                     lastselect=name;
                }else if(name==oldvalue){
                     ++unSelectedCount;
                }
                continue;
            }

            if (selected[name] == false) {
                if(cs==1){
                lastselect=name;
                cs=2;   
                }
                ++unSelectedCount;
            }
        }
        return unSelectedCount==1 || unSelectedCount==count-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);
                // alert(1+";"+oldvalue)
            } else if (isAllUnSelected(selected)) {
                cs=1;
                triggerAction('legendSelect', selected);
               // alert(2+";"+oldvalue)
                oldvalue="";
                
            }
        }

    });