echarts柱状图点击功能

1.获取echarts 

let echarts =echarts.init(document.getElementById('id名'))

2.echarts添加点击事件

const getAReaIndex = () => {

  echarts .getZr().on('click', params => {

    let pointInPixel = [params.offsetX, params.offsetY]

    if (echarts .containPixel('grid', pointInPixel)) {

      //点击第几个柱子

      let pointInGrid = echarts .convertFromPixel({ seriesIndex: 0 }, pointInPixel)

      // console.log(pointInGrid)

      // 也可以通过params.offsetY 来判断鼠标点击的位置是否是图表展示区里面的位置

      // 也可以通过name[xIndex] != undefined，name是x轴的坐标名称来判断是否还是点击的图表里面的内容

      // x轴数据的索引

      let xIndex = pointInGrid[0]

      // y轴数据的索引

      let yIndex = pointInGrid[1]

     console.log('xIndex',xIndex ,'yIndex',yIndex)

    }

  })

}

补充：给echarts设置宽高

 Object.defineProperty(document.getElementById('id名'), 'clientWidth', {

    get: function () {

      return 400

    }

  })

  Object.defineProperty(document.getElementById('id名'), 'clientHeight', {

    get: function () {

      return 300

    }

  })

欢迎补充，一起进步。