效果展示

需求

点击柱子显示当天的详细数据

实现

这里只需要拿到被点击柱子对应的X轴时间坐标，可以直接监听click事件
在DOM加载完为chart注册点击事件
拿到被点击的柱子的X轴坐标name
抛回父组件

方法一：直接监听click事件实现这个效果

click

可以拿到柱条 color: “#1DADF1”
第几个 componentIndex: 0
类型 seriesType/componentSubType: “bar”
data/value
X轴坐标值 name
seriesName 类目名
等等

mounted() {this.$nextTick(() => {this.initChart()this.chart = echarts.init(this.$el, 'macarons')let self = thislet chart = this.chartthis.chart.on('click', params => {console.log(params)self.$emit('getBar', params.name)})})
},

方法二：结合getZr和click实现这个效果（比较麻烦，可以用于更复杂效果的实现）

getZr()

结合click事件可以拿到点击位置
params.offsetX，params.offsetY 为点击位置的坐标
将画布设置成相对定位，弹框设置成绝对定位
可以实现在点击位置展示弹框的效果

containPixel()

判断给定的点是否在指定的坐标系或者系列上

containPixel()

转换像素坐标值到逻辑坐标系上的点
在DOM加载完为chart注册点击事件
拿到被点击的柱子的index（从0开始，number类型）
抛回父组件，直接用这个index去x轴data里面取当前被点击的柱子的x轴坐标

mounted() {this.$nextTick(() => {this.initChart()this.chart = echarts.init(this.$el, 'macarons')let self = thislet chart = this.chartthis.chart.getZr().on('click', (params) => {const position= [params.offsetX, params.offsetY];if (chart.containPixel('grid', position)) {let index= chart.convertFromPixel({seriesIndex: 0}, [params.offsetX, params.offsetY])[0];self.$emit('getBar', index)}});})},

Echarts柱状图柱子点击事件相关推荐

Echarts柱状图实现点击事件
本次实现的是点击黄绿色的柱显示对应的人员弹窗,通过打印params值确定了每个柱子的区分字段如下: var _this = this;myChart.on("click", fun ...
Echarts柱状图的点击事件
最近在做一些图表统计的功能,用到了百度的开源图表软件Echatrs,不得不提的是:不但上手简单而且扩展功能也是十分强大.在使用的过程中也遇到了不少问题,可能由于有关Echatrs的资料并不是很齐全,所 ...
vue组件-echarts地图显示柱状图并给柱状图添加点击事件（支持自定义地图）
vue组件-echarts地图显示柱状图并给柱状图添加点击事件(支持自定义地图) 效果如下所示: 参考文档: 这是参考的文档起因: 最近有朋友有需求需要用echarts,在地图上显示柱状图,并添加点 ...
echarts柱状图柱子上方数据标签显示
echarts柱状图柱子上方数据标签显示如图开启显示,也可以修改样式.
echats 柱状图的点击事件及高亮
点击柱状图触发事件及双击柱状图高亮 <!DOCTYPE html> <html> <head><meta charset="utf-8"& ...
echarts 地图 scatter点击事件_React实现高亮可点击地图
目前越来越多的项目中开始使用地图,而对地图的需求也不仅仅是简单的纯展示,更多了各种各样的交互功能.今天这篇文章主要介绍的就react中通过Echarts实现一个高亮可点击的省市地图.接下来先看看效果图 ...
Echarts树形结构图加点击事件
一.引入js 二.前端 <div id="statisticChart" style="height:800px"></div> // ...
vue中echarts纵轴添加点击事件
直接上代码 initChart () {this.ganttChart = echarts.init(document.getElementById('gantt-chart'))const _sel ...
echarts 地图去除点击事件_ECharts地图区域处理事件
ECharts 中有两种方式的地图区域处理: 一种是在 geo 中: 另一种是在 series-map 中 geo 的情况下 : events.geoselectchanged | Event ...

Echarts柱状图柱子点击事件

文章目录

效果展示

需求

实现

Echarts柱状图柱子点击事件相关推荐

最新文章

热门文章