Echarts柱状图柱子点击事件

文章目录

  • 效果展示
  • 需求
  • 实现

效果展示

Echarts柱状图柱子点击事件_第1张图片
Echarts柱状图柱子点击事件_第2张图片

需求

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

实现

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