Echarts柱状图柱子点击事件

效果展示

需求

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

实现

• 这里只需要拿到被点击柱子对应的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)
            }
        });
      })
    },