legendselectchanged：切換圖例選中狀態(tài)后的事件
this.chartRef.on('legendselectchanged', (e) => {
console.log(e)
// {
// name: '圖例名稱'，
// selected: {'圖例名稱1': true/false, '圖例名稱2': true/false}, 所有圖例的選中態(tài)(true/false)
// type: "legendselectchanged" 事件類型
// }
}）
通常業(yè)務(wù)中會(huì)判斷當(dāng)前圖例的選中狀態(tài)，eg:
if (!e.selected[e.name]) {
// 點(diǎn)擊項(xiàng)是取消選中狀態(tài)
}
else {
// 點(diǎn)擊項(xiàng)是選中狀態(tài)
}
基于echarts.js [series-custom]自定義系列中的圖形元素渲染做業(yè)務(wù)擴(kuò)展
1.渲染多個(gè)圖例
2.同時(shí)段上多個(gè)圖例項(xiàng)均有數(shù)據(jù)時(shí)，采用上下方式渲染柱形圖，目前支持2個(gè)并行
3.切換圖例選中態(tài)，并行時(shí)段的圖形展示需要變化（并行圖例開關(guān)開啟時(shí)，以虛線分隔上下方式渲染圖形，關(guān)閉時(shí)，只居中顯示一個(gè)圖例對(duì)應(yīng)的圖形數(shù)據(jù)）
分析需求難點(diǎn)：
1.當(dāng)前圖例項(xiàng)和其他圖例項(xiàng)在某個(gè)時(shí)段均有數(shù)據(jù)時(shí)，此時(shí)段的當(dāng)前圖例數(shù)據(jù)重新渲染
2.受當(dāng)前圖例項(xiàng)影響的，此時(shí)段的其他圖例項(xiàng)數(shù)據(jù)部分重新渲染
<template>
<div ref="chart"></div>
</template>
this.chartRef = echarts.init(this.$refs.chart);
// 注冊(cè)legendselectchanged事件
this.chartRef.on('legendselectchanged', (e) => {
console.log(e, 'legendselectchanged');
// 點(diǎn)擊的圖例中，不重復(fù)部分?jǐn)?shù)據(jù)的索引
let setIndex = 0;
// 點(diǎn)擊的圖例中，重復(fù)部分?jǐn)?shù)據(jù)的索引(1個(gè)或多個(gè)，取決于重復(fù)的圖例有幾個(gè))
let curdubbleIndexArr = [];
// 關(guān)聯(lián)的其他圖例，重復(fù)部分?jǐn)?shù)據(jù)的map值(1個(gè)或多個(gè)，取決于重復(fù)的圖例有幾個(gè))
let aboutMapArr = [];
let aboutIndexArr = [];
let eKey = '';
this.dubbleIndexArr.forEach(i => {
if (this.chartOptions[i].name === e.name) {
curdubbleIndexArr.push(i);
}
})
this.setIndexArr.forEach(i => {
if (this.chartOptions[i].name === e.name) {
setIndex = i;
}
})
// 不管是取消選中，還是選中，我們都要考慮到n種情況，比如
// 1.當(dāng)前圖例項(xiàng)和其他圖例項(xiàng)在某個(gè)時(shí)段均有數(shù)據(jù)時(shí)，此時(shí)段的當(dāng)前圖例數(shù)據(jù)重新渲染
// 2.受當(dāng)前圖例項(xiàng)影響的，此時(shí)段的其他圖例項(xiàng)數(shù)據(jù)部分重新渲染
for(let key in this.mapObj) {
if (this.mapObj[key] === e.name) {
eKey = key;
this.optionColorArr.forEach(item => {
if (item.includes('/') && item.split('/').includes(key)) {
item.split('/').forEach(i => {
if (i !== key) {
aboutMapArr.push(i);
}
})
}
})
}
}
this.optionColorArr.forEach(item => {
if (item.includes('/') && item.split('/').includes(e.name)) {
item.split('/').forEach(i => {
if (i !== e.name) {
aboutMapArr.push(i);
}
})
}
})
let ttIndexArr = [];
for (let j = 0; j < aboutMapArr.length; j++) {
let ind = (this.optionColorArr).indexOf(`${aboutMapArr[j]}/${eKey}`);
let ind2 = (this.optionColorArr).indexOf(`${eKey}/${aboutMapArr[j]}`);
if (ind > -1) {
ttIndexArr.push(ind);
}
else if (ind2 > -1) {
ttIndexArr.push(ind2);
}
}
for (let j = 0; j < ttIndexArr.length; j++) {
let num = ttIndexArr[j];
let ind = 0;
for (let k = 0; k < num; k++) {
if (this.optionColorArr[k].includes('/')) {
ind = ind + 2;
}
else {
ind++;
}
}
this.optionColorArr[num].split('/').forEach((i,index) => {
if (i !== eKey) {
ind = ind + index;
}
})
aboutIndexArr.push(ind);
}
// 點(diǎn)擊項(xiàng)是取消選中狀態(tài)
if (!e.selected[e.name]) {
for (let k = 0; k < aboutIndexArr.length; k++) {
let aboutInd = aboutIndexArr[k];
this.posiYObj[aboutInd] = - height/2;
}
// 先判斷下，當(dāng)前圖例項(xiàng)是否有某時(shí)段并行的其他圖例項(xiàng)，
// 如果有，那么就要把當(dāng)前圖例項(xiàng)此時(shí)段的所有數(shù)據(jù)都置為0
if (curdubbleIndexArr.length > 0) {
curdubbleIndexArr.forEach(i => {
this.series[i].data = [];
})
}
// 如果沒(méi)有，那么就只把當(dāng)前圖例項(xiàng)的數(shù)據(jù)置為0
this.series[setIndex].data = [];
}
else {
// 點(diǎn)擊項(xiàng)是選中狀態(tài)
for (let k = 0; k < aboutIndexArr.length; k++) {
let aboutInd = aboutIndexArr[k];
this.posiYObj[aboutInd] = this.oldPosiYObj[aboutInd];
}
this.series[setIndex].data = this.parsedChartData[setIndex];
for (let i = 0; i < curdubbleIndexArr.length; i++) {
let dubbleIndex = curdubbleIndexArr[i];
this.series[dubbleIndex].data = this.parsedChartData[dubbleIndex];
this.posiYObj[dubbleIndex] = this.oldPosiYObj[dubbleIndex];
}
}
this.chartRef.clear();
this.chartRef.setOption(option);
this.chartRef.setOption({
legend: {
selected: {[e.name]: e.selected[e.name]},
}
})
});
效果圖：
(目前插入圖片無(wú)法顯示)
源碼可見(jiàn)：https://github.com/scrollHeart/echartsDemo
