首页 前端知识 echarts点击与高亮事件经验小结

echarts点击与高亮事件经验小结

2024-06-22 01:06:10 前端知识 前端哥 1004 417 我要收藏

ECharts 是一个基于 JavaScript 的开源可视化库,用于创建各种交互式图表和地图。ECharts 支持多种交互方式,包括点击事件和高亮事件。

 点击事件可以在用户单击图表中的元素时触发,例如单击某个数据点或者某个 Legend 图例项时。下面是一个使用 ECharts 点击事件的示例代码:

myChart.on('click', function (params) {
    console.log(params);
});

上面的代码中,myChart 是 ECharts 实例的名称,on 方法是 ECharts 提供的绑定事件的方法。当用户单击图表中的元素时,该方法会自动触发回调函数,并传递一个参数 params,该参数包含了用户点击的元素的相关信息,例如数据值、坐标等。

 高亮事件则可以在用户将鼠标悬停在图表中的元素上时触发,例如将鼠标悬停在某个数据点或者某个 Legend 图例项上时。下面是一个使用 ECharts 高亮事件的示例代码:

myChart.on('mouseover', 'series', function (params) {
    myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: params.seriesIndex,
        dataIndex: params.dataIndex
    });
});

上面的代码中,使用 dispatchAction 方法来触发高亮操作,使得用户悬停的元素被高亮显示。 

需求:点击饼图,点击的部分高亮(最多只会有一块区域是处于高亮状态)。并将数据传递到下拉框。点击选中下拉框某个值,并将数据传递给饼图。实现数据的上钻和下钻。

代码实现(部分代码):

1.点击饼图

  this.myChart.off("click"); //点击前先取消之前的点击事件
      //   echarts中this指向的问题
      // echarts点击事件里的this指向的是echarts,但我们需要的是vue实例里的数据,因此不改变this指向是取不到值的
      let that = this;
      that.myChart.on("click", function (params) {
        console.log(params.dataIndex, "pppppppp");
        // 数据下钻
        that.value1 = params.dataIndex;
        // 需求:饼图只能有一块是高亮的,点击前找到一个高亮的就把他还原
        let _index = that.list.findIndex((item) => {
          return item.hightLight === true;
        });
        if (_index > -1) {
          that.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: _index,
          });
        }
        that.list.forEach((item, index) => {
          if (item.id === params.dataIndex) {
            if (item.hightLight === true) {
              (item.hightLight = false),
                that.myChart.dispatchAction({
                  type: "downplay",
                  seriesIndex: 0,
                  dataIndex: params.dataIndex,
                });
            } else {
              (item.hightLight = true),
                that.myChart.dispatchAction({
                  type: "highlight",
                  seriesIndex: 0,
                  dataIndex: params.dataIndex,
                });
            }
          } else {
            item.hightLight = false;
          }
        });
      });

2.点击选择器

this.list.forEach((item, index) => {
        let _index = this.list.findIndex((item) => {
          return item.hightLight === true;
        });
        if (_index > -1) {
          this.list[_index].hightLight = false;
          this.myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
            dataIndex: _index,
          });
        }
        if (item.hightLight === false) {
          this.list[this.value1].hightLight = true;
          this.myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: this.value1,
          });
        }
      });

需要注意的点: echarts中this指向的问题

在 ECharts 中,this 的指向会根据不同的上下文发生变化。在事件处理函数中,this 会指向当前被触发事件的组件实例。而在一般的 JavaScript 代码中,this 则指向调用当前函数的对象。

解决的方法:

方法一:如果需要在事件处理函数中使用外部的变量或方法,可以使用闭包或者使用 ES6 的箭头函数来解决上下文问题。箭头函数没有自己的 this,所以在箭头函数中使用 this 时,其指向与外层作用域相同。

方法二:如果使用普通函数,则需要在事件处理函数内部保存外部的 this。如上图

最终的效果

饼图点击联动

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13270.html
标签
评论
发布的文章

Java操作读取JSON文件

2024-07-21 00:07:04

Vue3.0环境搭建之npm的安装

2024-07-21 00:07:09

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!