linechart - Echart：折线图反向图例切换行为

Question

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

Answer 1

根据@Sergey Fedorov 的回答，这可以使用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);
});

Answer 2

Echarts 有带有事件和动作的 API 。这是快速入门的好教程。简而言之：您需要倾听legendselectchanged并setOption({series:{...}})改变风格或系列数量。像这样https://stackoverflow.com/a/64329993/1597964