echarts自定義圖例的點擊事件

修改圖例點擊事件樣例代碼:

  • 當第一次點擊圖例時,只顯示點擊的圖例。
  • 當還剩一個圖例被取消選中後,自動全選中所有圖例。
  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);

            }
        }

    });
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章