ECharts：对图例禁用默认的单击操作

Question

我正在尝试使用ECharts绘制一个我已经能够做的简单的甜甜圈图。我注意到默认情况下，如果单击图例，图例将隐藏图表上的数据项。

我希望用户能够选择图例以执行某些操作（触发事件），而我可以使用可用的事件（https://ecomfe.github.io/echarts-doc/public/en/api.html# events.legendselected），但是我想防止在图表上隐藏/显示数据项的默认行为。

在文档中提到了图例上的属性selectedMode（https://ecomfe.github.io/echarts-doc/public/en/option.html#legend.selectedMode），该属性可防止切换该系列，但这也使图例无法完全选择。

我还尝试过为legendselected和legendunselected触发的事件返回false，但没有成功。

有没有人找到停止这种行为的方法？非常感谢您在此问题上的帮助。

这是一个小提琴，其中包含将selectedMode设置为false的内容。删除此标志以查看默认行为：

legend: {
  orient: "vertical",
  x: "right",
  selectedMode: false,
  data: data.map(d => d.name)
}

https://jsfiddle.net/h44jpmpf/12/

Answer 1

一种解决方法是legendSelect在legendselectchanged事件处理程序中调度操作以重新选择用户单击的选项。您可能希望关闭动画以防止跳跃的视觉效果切换数据集。

提琴手

myChart.on('legendselectchanged', function(params) {

  suppressSelection(myChart, params);  

  // Add custom functionality here 
});

function suppressSelection(chart, params) {
  chart.setOption({ animation: false });

  // Re-select what the user unselected
  chart.dispatchAction({
    type: 'legendSelect',
    name: params.name
  });   

  chart.setOption({ animation: true });
}