效果展示

需求

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

实现

这里只需要拿到被点击柱子对应的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 = this
        let chart = this.chart
        this.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 = this
        let chart = this.chart
        this.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柱状图柱子点击事件

文章目录

效果展示

需求

实现