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

ECharts：禁用图例上的默认点击操作

2 个答案: