echarts 环形图默认高亮展示某个数据

最新推荐文章于 2024-09-26 17:39:26 发布

芝麻油yy

最新推荐文章于 2024-09-26 17:39:26 发布

阅读量1.2k

点赞数 2

文章标签： echarts 前端

本文链接：https://blog.csdn.net/weixin_45622628/article/details/120892525

版权

本文介绍了如何使用Echarts在环形图中实现默认高亮显示某个数据，并详细说明了在鼠标交互过程中的数据高亮切换逻辑，包括进入页面时默认选中第一条数据、鼠标悬停时显示当前数据信息以及鼠标离开后的默认状态恢复。

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

环形图默认高亮显示数据

代码：

data(){
    return {
        chart:null,
    }
},
methods: {
    initChart() {
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        color: color,
      })

      this.getDefaultSelected()
    }

    getDefaultSelected() {
      this.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
      });
      this.chart.on("mouseover", e => {
        if (e.dataIndex !== this.index) {
          this.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: this.index
          });
        }
      });
      this.chart.on("mouseout", e => {
        this.index = e.dataIndex;
        this.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: e.dataIndex
        });
      });
    }


}