echarts 鼠标移入高亮显示-沉睡个人博客

echarts 鼠标移入高亮显示

615人已阅读时间：2022-12-27 00:28:32

set_veryImportantChart() {
      console.log(this.$refs.jdccy.chart);
      this.$refs.jdccy.chart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0,
      });
      //检测鼠标移入后
      this.$refs.jdccy.chart.on("mouseover", (e) => {
        if (e.dataIndex == 0) {
          return;
        } else {
          //当检测到鼠标悬停事件，取消默认选中高亮
          this.$refs.jdccy.chart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: 0,
          });
        }
      });
      //检测鼠标移出后显示之前默认高亮的那块
      this.$refs.jdccy.chart.on("mouseout", () => {
        this.$refs.jdccy.chart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: 0,
        });
      });
           // 页面大小发生改变时Echarts也跟着发生改变
      window.addEventListener("resize", () => {
        this.$refs.jdccy.chart.resize();
      });
    },
需要注意的是 index 下标值
以及 this.$refs.jdccy.chart 
通过ref在公共组件中定义通过$refs获取
![image.png](http://lym.pub:443/profile/upload/2022/12/27/9269d154-f334-432d-a200-7b6d11ce69e5.png)

上一篇：【maptalks】vue中maptalks的测距工具以及测面积的打开使用与禁止使用

下一篇：echarts折线图图例去掉小白点