ECharts: отключить действие клика по умолчанию для легенд
Я пытаюсь использовать ECharts для рендеринга простой кольцевой диаграммы, которую я смог сделать. По умолчанию я заметил, что легенда будет скрывать элемент данных на графике, если на него нажать.
Я хочу, чтобы пользователь мог выбрать легенду, чтобы сделать что-то (запустить событие), что я могу сделать, используя доступные события ( https://ecomfe.github.io/echarts-doc/public/en/api.html) однако я хочу предотвратить поведение по умолчанию скрытия / отображения элемента данных на графике.
В документации упоминается свойство легенды с именем selectedMode ( https://ecomfe.github.io/echarts-doc/public/en/option.html), которое предотвращает переключение серии, но это также мешает легенде быть полностью выбираемой.
Я также пытался вернуть false на событиях, запущенных для legendselected и legendunselected, но безуспешно.
Кто-нибудь нашел способ остановить это поведение? Буду признателен за любую помощь по этому вопросу.
Вот скрипка, которая содержит selectedMode, установленный в false. Удалите этот флаг, чтобы увидеть поведение по умолчанию:
legend: {
orient: "vertical",
x: "right",
selectedMode: false,
data: data.map(d => d.name)
}
3 ответа
Один из способов решения этой проблемы - отправить 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 });
}
С 2022 года также можно добавить
emphasisк серии, которая будет делать именно это. Версия
"echarts": "^5.3.0".
emphasis: {
focus: 'series'
}
option = {
legend: {
selectedMode: 'onlyHover'
}
}