echarts饼图点击事件

在Echarts中，实现饼图点击事件的方法如下：

1. 首先，在mounted()生命周期钩子函数中添加饼状图的点击事件监听器。使用箭头函数来代替传统的function，这样可以确保this指向VueComponent。代码示例如下：

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 }
        })
      }
    }
  });
}

2. 如果想要实现柱状图或折线图的点击事件，可以使用相同的方法。只需要将相应图表的事件名称改为对应的图表类型即可。

这样，当用户点击饼图的某个扇区时，就会触发点击事件，可以实现一些自定义的操作，比如跳转路由并携带参数。请注意，这只是一个示例，具体的操作可以根据实际需求进行修改和扩展。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue-echarts饼图/柱状图点击事件](https://blog.csdn.net/weixin_44220970/article/details/129011098)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [echarts饼图扇区添加点击事件的实例](https://download.csdn.net/download/weixin_38747906/12771124)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]