设置echarts图表(饼图,折线图,柱状图)点击事件
一. 概述vue+echarts 开发环境,echarts API提供默认了点击事件,但是有一些需求,要求我们改良一下点击事件。比如:柱状图,默认事件只有点击图表柱子,才可以触发点击事件。有时候数据比较小,柱子不容易点击,但是我们还想看点击后的效果,只能扩大触发点击区域的方法。this.line = this.$echarts.init(document.getElementById(th...
·
一. 概述
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)
}
})
更多推荐
已为社区贡献22条内容
所有评论(0)