echarts 按钮与多图表联动

html 部分

 <div v-for="d in abnormalColors" :key="d.name"
                     style="cursor: pointer"
                         @click="handleToggleSelected(d.name, d.state);d.state = !d.state">
                  <div class="colorIcon" :style="'background-color:' + (d.state ? d.color : '#cccccc')"></div>
                  <span v-text="d.name" />
                </div>
<div class="break-content" ref="breakChart">
                    <div :id="`breakChart${index}`" :key="item.id" v-for="(item, index) in abnormalReason"></div>
                </div>

vue 部分

private setAbnormalData() {
        this.abnormalReason.forEach((item: any, index: number) => {

            this.abnormalChart(`breakChart${index}`, item)
        })
    }
    // 异常终止原因：调用6遍
    private abnormalChart(id: any, obj: any) {
        var color=['#ff5b00','#00ffff','#0457bb','#ffa800',
            '#ffe000','#00cfff','#ff3000']
        var data: any = []
        obj.numberDTOList.forEach((item: any, i: any) => {
            if(!this.abnormalColorsObj[item.name]) {
                this.abnormalColors.push({
                    name: item.name,
                    color: color[i],
                    state: true
                })
                this.abnormalColorsObj[item.name] = color[i]
            }
            data.push(
                {
                    value: item.number,
                    name: item.name,
                    itemStyle: {
                        normal: {
                            borderWidth: 5,
                            shadowBlur: 20,
                            borderColor:color[i],
                            shadowColor: color[i]
                        }
                    }
                }
            )
        })
        // 异常终止原因-配置项
        const option: any = {
            title: {
                text: obj.name + '\n\n' + obj.number,
                top: '37%',
                textAlign: "center",
                left: "48%",
                textStyle: {
                    color: '#fff',
                    fontSize: 15,
                    fontWeight: 700
                }
            },
            legend: {
                show: false,
                icon: 'circle',
                itemWidth: 10,
                textStyle: {
                    color: '#fff',
                    fontSize: 11,
                }
            },
            clockWise: false,
            radius: [50, 50],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            graphic: {
                elements: [{
                    type: "image",
                    z: 3,
                    style: {
                        image: require('../../assets/img/backImg.png'),
                        width: 65,
                        height: 65
                    },
                    left: 'center',
                    top:  'center',
                    position: [100, 100]
                }]
            },
            series: [
                {
                    name: obj.name,
                    type: 'pie',
                    hoverAnimation: false,
                    left: '35px',
                    right: '35px',
                    label: {
                        normal: {
                            show: true,
                            formatter: '{d}%',
                            textStyle: {
                                align: 'center',
                                baseline: 'middle',
                                fontSize: 12
                            }
                        }
                    },
                    labelLine: {
                        show: false,
                        length: 2,
                        length2: 5
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            shadowBlur: 20,
                        }
                    },
                    radius: ['80%', '80%'],
                    data: data,
                }
            ]
        };
        const breakChart: any = document.getElementById(id)
        let chart = echarts.init(breakChart)
        chart.setOption(option)
        this.AbnormalTerminationReasonChart.push(chart)
        window.addEventListener('resize', this.resizeHandle)
    }

    // 切换选中状态（使用官方event事件进行联动）
    private handleToggleSelected(name: string, state: boolean) {
        this.AbnormalTerminationReasonChart.map((item: any) => {
            item.dispatchAction({
                type: state ? 'legendUnSelect' : 'legendSelect',    // legendUnSelect取消选中 legendSelect选中
                name
            })
        })
    }