vue外部按钮调用 echarts饼形图的高亮

web网页精选

已于 2023-03-13 15:43:56 修改

阅读量380

点赞数

文章标签： echarts vue.js javascript

于 2023-03-13 15:43:01 首次发布

本文链接：https://blog.csdn.net/qq_43770056/article/details/129495832

版权

文章讲述了如何在Vue应用中使用refs改变Echarts组件的dataIndex，以及通过watch监听dataIndex变化来自动执行图表的高亮和取消高亮操作。主要涉及echarts的dispatchAction方法用于切换图表的高亮状态。

摘要由CSDN通过智能技术生成

最终效果：

1.首先点击右侧切换的之后，利用refs更改Echarts.vue组件的data值

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

2.Echarts.vue监听data的dataIndex值，如果被修改执行事件

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

3.autoAct事件用来修改高亮

        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
            })
        },