首页 前端知识 vue-echarts饼图/柱状图点击事件

vue-echarts饼图/柱状图点击事件

2024-03-07 08:03:26 前端知识 前端哥 331 325 我要收藏

在实际的项目开发中,我们通常会用到Echarts来对数据进行展示,有时候需要用到Echarts的点击事件,增加系统的交互性,一般是点击Echarts图像的具体项来跳转路由并携带参数,当然也可以根据具体需求来做其他的业务逻辑。下面就Echarts图表的点击事件进行实现,文章省略了Echarts图的html代码,构建过程,option,适用的表格有饼图、柱状图、折线图。如果在实现过程中,遇到困难或者有更好的建议,欢迎留言。

饼图点击事件

mounted() {
     //饼状图点击事件
     myChart.on('click', (param) =>{  //这里使用箭头函数代替function,this指向VueComponent
        let index;
        //当前扇区的dataIndex
        index = param.dataIndex; 
        //自己的操作,这里是点击跳转路由,并携带参数
        if (index !== undefined) {
          //myChartYData为饼图数据
          if (this.myChartYData[index].value!=0){
            /*跳转路由*/
            this.$router.push({
              path: '/project/list',
              query: {
                status: index+1,
              }
            })
          }
      }
    });
}

柱状图点击事件(折线图也可使用)

我们可以通过 myChart.getZr().on('click', ...) 来检测整个图表的点击事件,并且通过回调函数的参数来判断点击的区域,

参数params如下:

 

  • ​ 通过参数对象中的target属性和topTarget属性进行定位位置
  • ​ 当点击某个图形元素:target对象中有dataIndex,seriesIndex属性,即可知道点击那个图形元素。
  • ​ 当点击grid内的空白位置:target对象为undefined,topTarget不为undefined。
  • ​ 当点击坐标轴标签:topTarget对象的anid值为"label_xx", xx为坐标值。
  • ​ 当点击坐标轴外的空白位置:target对象和topTarget多为undefined。
    //柱状图点击事件
	myChart.getZr().on('click', (params) => {
      //echartsData为柱状图数据
      if (this.echartsData.deviceCode.length > 0) {
        const pointInPixel = [params.offsetX, params.offsetY];
        //点击第几个柱子
        let index;
        if (myChart.containPixel('grid', pointInPixel)) {
          index = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];
        }
        if (index !== undefined) {
          /*事件处理代码书写位置*/
          var deviceMac = this.echartsData.deviceMac[index];
      		/*跳转路由*/
          this.$router.push({
            name: 'Statistics',
            params: {
              mac: deviceMac,
            }
          })
        }
      }
    });

1、使用getZr添加图表的整个canvas区域的点击事件,并获取params携带的信息:

        myChart.getZr().on('click', (params) => {}

2、获取到鼠标点击位置:

const pointInPixel = [params.offsetX, params.offsetY];

3、使用containPixel API判断点击位置是否在显示图形区域,下面的例子过滤了绘制图形的网格外的点击事件,比如X、Y轴lable、空白位置等的点击事件。

if (myChart.containPixel('grid', pointInPixel)) {}

4、使用API convertFromPixel获取点击位置对应的x轴数据的索引值index,我的实现是借助于索引值获取数据,当然可以获取到其它的信息,详细请查看文档。

let index = myChart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];

其实在上一步骤中可以获取到丰富的诸如轴线、索引、ID等信息,可以在自己的事件处理代码中方便的使用。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/3405.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!