在vue中给echarts添加点击事件

在vue中给echarts添加点击事件

添加左击事件

在setOption echarts后，添加 this.echarts.on(‘click’, function()) 即可添加左击事件，function里面的params是echarts的对象，打印出来查看echarts信息，如关系图的节点信息。根据信息自定义点击部位。
以下代码是柱状图的点击事件，点击bar打印信息（根据params中的type类型自定义点击部位）：

 this.cmpChart.on('click', function (params) {
	    if (params.componentType === 'series') {
	       console.log('您点击了我')
	     }
  })

通过tooltips添加点击事件，首先修改tooltips中的triggerOn，然后可以在tooltips里面添加formatter方法，方法里面返回想要展示的信息：

tooltip: {
          triggerOn: 'click',
          enterable: true
        },

   this.options.tooltip.formatter = function (params) {
      let detail = params.data.detail
      let text1 = JSON.stringify(detail, null, 2)
      let text2 = '<pre>' + text1 + '</pre>'
      let str = ''
      if (params.data.flag === '3') {
        str = '<div style="text-align: left;width:400px;height:300px; ' +
            'white-space:normal; word-break:break-all;overflow:scroll;">'
        return str + text2 + '</div>'
      } else if (params.data.flag === '4') {
        return '<div style="text-align: left;width:150px;height:30px;">右击查看更多功能</div>'
      }
    }

通过dom添加右击事件，以下是给关系图添加右击事件：

  bindEChcartsContextMenu (ec) {
      let currentItem = null
      let _this = this
      ec.on('mouseover', function (pItem) {
        currentItem = pItem
      })
      ec.on('mouseout', function (pItem) {
        currentItem = null
      })
      document.oncontextmenu = function (event) {
        if (currentItem.dataType === 'node') {
          // 操作逻辑
        }
        return false
      }
    },