Echart：折线图反向图例切换行为答案

【问题标题】：Echart : line chart reverse legend toggle behaviourEchart：折线图反向图例切换行为
【发布时间】：2021-01-20 00:20:12
【问题描述】：

我希望能够单击图例标签，然后它会关闭所有其他标签并突出显示选定的一个系列数据。当前行为隐藏选定的图例系列。我该如何扭转它？

【问题讨论】：

标签： linechart echarts apache-echarts

【解决方案1】：

根据@Sergey Fedorov's answer，这可以使用legendSelect 事件来实现。下面是一些代码来演示它是如何工作的：

function legendSelection(chart, params) {
    const obj = params.selected;
    const selectAll = Object.values(obj).filter(f=>f).length;
    chart.setOption({ animation: true });

    if (selectAll == 0) {
        // select all on second click
        for (var key in obj) {
            chart.dispatchAction({
                type: 'legendSelect',
                name: key
            });
        }
    } else {
        // Re-select what the user unselected
        chart.dispatchAction({
            type: 'legendSelect',
            name: params.name
        });

        // Deselect everything else 
        for (var key in obj) {
            if (obj.hasOwnProperty(key) && key != params.name) {
                var val = obj[key];
                chart.dispatchAction({
                    type: 'legendUnSelect',
                    name: key
                });
            }
        }
    }
}

在您的代码中使用上述函数，如下所示：

myChart.on('legendselectchanged', function (params) {
    legendSelection(myChart, params);
});

【讨论】：

【解决方案2】：

Echarts 有带有 events and action 的 API。这是good tutorial 快速入门。简而言之：你需要听legendselectchanged 和setOption({series:{...}}) 改变风格或系列数量。像这样https://stackoverflow.com/a/64329993/1597964

【讨论】：