一. 概述

vue+echarts 开发环境,echarts API提供默认了点击事件,但是有一些需求,要求我们改良一下点击事件。

比如:柱状图,默认事件只有点击图表柱子,才可以触发点击事件。有时候数据比较小,柱子不容易点击,但是我们还想看点击后的效果,只能扩大触发点击区域的方法。

 this.line = this.$echarts.init(document.getElementById(this.lineId), null, 'svg')
 this.line.getZr().on('click', (params) => {
     let pointInPixel = [params.offsetX, params.offsetY]
     if (this.line.containPixel('grid', pointInPixel)) {
         let pointInGrid = this.line.convertFromPixel({ seriesIndex: 0 }, pointInPixel)
         let xIndex = pointInGrid[[0]]
         let op = this.line.getOption()
         let xValue = op.xAxis[0].data[xIndex]
         this.$emit('onDetail', xValue)
     }
 })
Logo

前往低代码交流专区

更多推荐