Echarts在检测到图例点击时,将触发legendselectchanged事件,提供的参数包括:
name,点击的图例名
seleced: {name1: value1, name2: value2, ...},所有图例的选中状态
其中name为图例名称,value取true | false,表示该项在点击后处于选中状态还是未选中状态
通过该事件,我们可以对Echarts的图例点击效果作修改,规则包括:
(初始)全选时,点击图例中的某项,将只显示该项而隐藏其他项
当唯一显示的项目被取消选中时,恢复为全选状态
例如:点击图例的第三项
-
点击前:Yes,Yes,Yes,Yes,Yes
修改前:Yes,Yes,No,Yes,Yes
修改后:No,No,Yes,No,No
-
点击前:No,No,Yes,No,No
修改前:No,No,No,No,No
修改后:Yes,Yes,Yes,Yes,Yes
代码如下
/**
* 优化图例点击事件
* 1. (初始)全选时,点击图例中的某项,将只显示该项而隐藏其他项
* 2. 当唯一显示的项目被取消选中时,恢复为全选状态
* @param {Object} theChart Echarts元素
*/
function setLegendAction(theChart) {
let triggerAction = function (action, selected) {
legend = [];
for (let name in selected) {
if (selected.hasOwnProperty(name)) {
legend.push({name: name});
}
}
theChart.dispatchAction({
type: action,
batch: legend
});
};
let isFirstUnSelect = function (selected, legend) {
if (selected[legend] === true) return false;
let unSelectedCount = 0;
for (let name in selected) {
if (!selected.hasOwnProperty(name)) {
continue;
}
if (selected[name] === false) {
unSelectedCount++;
}
}
return unSelectedCount === 1;
};
let isAllUnSelected = function (selected) {
let selectedCount = 0;
for (let name in selected) {
if (!selected.hasOwnProperty(name)) {
continue;
}
// selected对象内true代表选中,false代表未选中
if (selected[name] === true) {
selectedCount++;
}
}
return selectedCount === 0;
};
theChart.on('legendselectchanged', function (params) {
console.log(params)
let selected = params.selected;
let legend = params.name;
// 使用legendToggleSelect动作将重新触发legendselectchanged事件,导致本函数重复运行从而丢失selected对象
if (selected !== undefined) {
if (isFirstUnSelect(selected, legend)) {
triggerAction('legendToggleSelect', selected);
} else if (isAllUnSelected(selected)) {
triggerAction('legendSelect', selected);
}
}
});
}