javascript - 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，但没有成功。

有没有人找到阻止这种行为的方法？如果您能就此问题提供任何帮助，我将不胜感激。

这是一个 fiddle ，其中包含设置为 false 的 selectedMode。删除此标志以查看默认行为:

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

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

Answer 1

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

jsfiddle

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 });
}