The vue external button calls the highlight of the echarts pie chart

final effect:

1. After clicking the switch on the right, use refs to change the data value of the Echarts.vue component

    //更改待办事宜
    tabCon() { 
      this.$refs.Echarts.dataIndex = 0 
    },
    tabCon2() { 
      this.$refs.Echarts.dataIndex = 1 
    },

 2. Echarts.vue listens to the dataIndex value of data, and executes the event if it is modified

    watch: {
        dataIndex: {
            handler(newValue) {
                // console.log('dataIndex被修改了', newValue)
                this.autoAct()
            }
        }
    },

3. The autoAct event is used to modify the highlight

        autoAct() {
            this.chart = echarts.init(this.$el, 'macarons')
            //取消之前高亮的图形
            this.chart.dispatchAction({
                type: 'downplay',
                seriesIndex: 0,
                dataIndex: this.dataIndex == 0 ? 1 : 0
            });
            // 高亮当前图形
            this.chart.dispatchAction({
                type: 'highlight',
                seriesIndex: 0,
                dataIndex: this.dataIndex
            })
        },