echarts 小技巧,当我需要点击echart图标标题或者其他内容时,如何设置事件呢?

以title为例

第一步,设置title的triggerEvent为true

这是你会发现,鼠标移到title上会变成小手指,相当于设置了cursor:pointer
淦,不能截图,反正鼠标放上去样式就变了

title: {
          x: "center",
          y: "center",
          textAlign: "center",
          text: "30%",
          top: "center",
          left: "30%",
          textStyle: {
            color: "#2b2b2d",
            fontSize: 30,
            align: "center",
            fontWeight: "400",
          },
          triggerEvent: true,
        },

第二步,在初始化图标那一步设置事件

注意,必须在init下面操作,不然好像拿不到表的数据

//在init的这一步下面操作
this.pieChart = echarts.init(this.$refs.pieChart);
//设置cilck事件
this.pieChart.on("click", (params) => {
    
    
console.log(params)
}

拿到parmas,可以试着打印出来,当我点击title时,是这样的

原理,通过点击title,获得parmas,再通过判断parmas的数据来使用方法.

this.pieChart.on("click", (params) => {
    
    
        if(params.componentType && params.componentType === "title"){
    
    
          alert("弹出")
        }
      })

这样,点击图标其他地方都不管用,但是点击title的时候就会有事件