Echarts优化图例点击事件

Echarts在检测到图例点击时，将触发legendselectchanged事件，提供的参数包括：

1. name，点击的图例名

2. seleced: {name1: value1, name2: value2, ...}，所有图例的选中状态
   其中name为图例名称，value取true | false，表示该项在点击后处于选中状态还是未选中状态

通过该事件，我们可以对Echarts的图例点击效果作修改，规则包括：

1. （初始）全选时，点击图例中的某项，将只显示该项而隐藏其他项

2. 当唯一显示的项目被取消选中时，恢复为全选状态

例如：点击图例的第三项

1. 点击前：Yes，Yes，Yes，Yes，Yes

   • 修改前：Yes，Yes，No，Yes，Yes

   • 修改后：No，No，Yes，No，No

2. 点击前：No，No，Yes，No，No

   • 修改前：No，No，No，No，No

   • 修改后：Yes，Yes，Yes，Yes，Yes

代码如下

/**
 * 优化图例点击事件
 * 1. （初始）全选时，点击图例中的某项，将只显示该项而隐藏其他项
 * 2. 当唯一显示的项目被取消选中时，恢复为全选状态
 * @param {Object} theChart Echarts元素
 */
function setLegendAction(theChart) {
    let triggerAction = function (action, selected) {
        legend = [];
        for (let name in selected) {
            if (selected.hasOwnProperty(name)) {
                legend.push({name: name});
            }
        }
        theChart.dispatchAction({
            type: action,
            batch: legend
        });
    };

    let isFirstUnSelect = function (selected, legend) {
        if (selected[legend] === true) return false;
        let unSelectedCount = 0;
        for (let name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }
            if (selected[name] === false) {
                unSelectedCount++;
            }
        }
        return unSelectedCount === 1;
    };

    let isAllUnSelected = function (selected) {
        let selectedCount = 0;
        for (let name in selected) {
            if (!selected.hasOwnProperty(name)) {
                continue;
            }
            // selected对象内true代表选中，false代表未选中
            if (selected[name] === true) {
                selectedCount++;
            }
        }
        return selectedCount === 0;
    };

    theChart.on('legendselectchanged', function (params) {
        console.log(params)
        let selected = params.selected;
        let legend = params.name;
        // 使用legendToggleSelect动作将重新触发legendselectchanged事件，导致本函数重复运行从而丢失selected对象
        if (selected !== undefined) {
            if (isFirstUnSelect(selected, legend)) {
                triggerAction('legendToggleSelect', selected);
            } else if (isAllUnSelected(selected)) {
                triggerAction('legendSelect', selected);
            }
        }
    });
}