echarts.js[series-custom]自定义系列二

legendselectchanged：切换图例选中状态后的事件

this.chartRef.on('legendselectchanged', (e) => {
console.log(e) 
// {
   // name:  '图例名称'，
   // selected: {'图例名称1': true/false, '图例名称2': true/false},  所有图例的选中态(true/false)
   // type: "legendselectchanged"  事件类型
// }
}）

通常业务中会判断当前图例的选中状态，eg:

if (!e.selected[e.name]) {
// 点击项是取消选中状态
}
else {
// 点击项是选中状态
}

基于echarts.js [series-custom]自定义系列中的图形元素渲染做业务扩展
1.渲染多个图例
2.同时段上多个图例项均有数据时，采用上下方式渲染柱形图，目前支持2个并行
3.切换图例选中态，并行时段的图形展示需要变化（并行图例开关开启时，以虚线分隔上下方式渲染图形，关闭时，只居中显示一个图例对应的图形数据）

分析需求难点：
1.当前图例项和其他图例项在某个时段均有数据时，此时段的当前图例数据重新渲染
2.受当前图例项影响的，此时段的其他图例项数据部分重新渲染

<template>
    <div ref="chart"></div>
</template>

this.chartRef = echarts.init(this.$refs.chart);
// 注册legendselectchanged事件
            this.chartRef.on('legendselectchanged', (e) => {
                console.log(e, 'legendselectchanged');
                // 点击的图例中，不重复部分数据的索引
                let setIndex = 0;
                // 点击的图例中，重复部分数据的索引(1个或多个，取决于重复的图例有几个)
                let curdubbleIndexArr = [];
                // 关联的其他图例，重复部分数据的map值(1个或多个，取决于重复的图例有几个)
                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.当前图例项和其他图例项在某个时段均有数据时，此时段的当前图例数据重新渲染
                // 2.受当前图例项影响的，此时段的其他图例项数据部分重新渲染
                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);
                }

                // 点击项是取消选中状态
                if (!e.selected[e.name]) {
                    for (let k = 0; k < aboutIndexArr.length; k++) {
                        let aboutInd = aboutIndexArr[k];
                        this.posiYObj[aboutInd] = - height/2;
                    }

                    // 先判断下，当前图例项是否有某时段并行的其他图例项，
                    // 如果有，那么就要把当前图例项此时段的所有数据都置为0
                    if (curdubbleIndexArr.length > 0) {
                        curdubbleIndexArr.forEach(i => {
                            this.series[i].data = [];
                        })
                    }
                    // 如果没有，那么就只把当前图例项的数据置为0
                    this.series[setIndex].data = [];
                }
                else {
                    // 点击项是选中状态
                    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]},
                    }
                })
            });

效果图：
(目前插入图片无法显示)
源码可见：https://github.com/scrollHeart/echartsDemo