【无标题】环改变选中

最新推荐文章于 2024-07-14 18:09:30 发布

皮卡酋

最新推荐文章于 2024-07-14 18:09:30 发布

阅读量50

点赞数

文章标签： echarts

本文链接：https://blog.csdn.net/superLeiZhenHuan/article/details/131638811

版权

该文章描述了一个Vue子组件与父组件交互的过程，用于控制ECharts图表的高亮选择。父组件调用`getDefaultSelected`方法，子组件内部通过`dispatchAction`处理高亮和淡化效果。当鼠标悬停在图表上时，会动态改变数据项的选中状态。

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

父：； this.$refs.chart.getDefaultSelected(item, index);  


子：getDefaultSelected(params, index = 0) {
      this.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      for (var i = 0; i < this.data.length; i++) {
        this.data[i].selected = false;
        this.chart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
          dataIndex: i,
        });
      }
      const idx = this.data.findIndex((el) => el.name == params.name);
      if (idx !== -1) {
        this.data[idx].selected = true;
      }

      this.chart.setOption({
        legend: { selected: { [params.name]: true } },
      });
      this.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: idx,
      });

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