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

操作以重新选择用户单击的选项。您可能需要关闭动画以防止跳跃的视觉效果切换数据集。

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

Answer 2

option = {
    legend: {
        selectedMode: 'onlyHover'
    }
}

https://github.com/apache/incubator-echarts/issues/11883#issuecomment-568783650

Answer 3

截至 2022 年，还可以将

emphasis

添加到系列中，从而实现这一点。版本

"echarts": "^5.3.0"

.

emphasis: {
        focus: 'series'
      }

示例：https://jsfiddle.net/Nurech/vqro4zg1/3/

Answer 4

正如@PeterS已经提到，当前版本的正确答案是

legend: {
   selectedMode: false 
}

文档