echarts饼状图保持选中状态

最新推荐文章于 2023-09-10 17:17:19 发布

原创最新推荐文章于 2023-09-10 17:17:19 发布 · 3.1k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

收录于

vue3.0 同时被 2 个专栏收录

4 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍如何使用 ECharts 实现鼠标悬停时图表元素的高亮显示及移除高亮的交互效果，通过代码示例详细解析了系列索引和数据索引在实现过程中的应用。

echarts实现如下效果
在这里插入图片描述
实现代码：

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