柱状图点击事件

src/views/cockpitNew1/tdsc.vue

@@ -87,6 +87,40 @@ export default {
   methods: {
     initEchart() {
       var tdsc_my_chart = window.echarts.init(document.getElementById('tdsc_echart'));
+
+
+      tdsc_my_chart.getZr().on('click', (params) => {
+        // 这个部分照抄，你想通过点击拿到的当前柱条的数据，都可以在下面这些属性中拿到，如果我注释没有你想要的，需要console一下charts.getOption()查找对应的属性名
+        // let pointInPixel = [params.offsetX, params.offsetY]
+        // if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+        //   let xIndex = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0]
+        //   console.log(xIndex)
+        // }
+
+
+        const actionObj = params.topTarget
+        console.log('actionObj', actionObj)
+        const myKey = Object.keys(actionObj).sort().filter(_ => _.indexOf('ec_inner') !== -1)[0]
+        console.log('myKey', myKey)
+        const res = actionObj[myKey]
+        console.log(`当前点击了第${res.dataIndex}组数据中的第${res.seriesIndex}个柱子`)
+        var pointInPixel = [params.offsetX, params.offsetY];
+        if (tdsc_my_chart.containPixel('grid', pointInPixel)) {
+          /*此处添加具体执行代码*/
+          var pointInGrid = tdsc_my_chart.convertFromPixel({ seriesIndex: 0 }, pointInPixel);
+          //X轴序号
+          var xIndex = pointInGrid[0];
+          console.log('点击了横纵坐标', pointInPixel)
+          console.log('【点击了第几组数据，纵坐标】', pointInGrid)
+          //获取当前图表的option
+          var op = tdsc_my_chart.getOption();
+          console.log('数据信息', op)
+          //获得图表中我们想要的数据---下面就不简写了，默认说我们的折现有2条吧
+          var xValue = op.xAxis[0].data[xIndex];
+          console.log('x轴所对应的名字', xValue)
+
+        }
+      });
       const legendType = 'center'
       let option = {
         backgroundColor: 'rgba(0,0,0,0)',
@@ -261,6 +295,7 @@ export default {
         ],
       }
 
+
       tdsc_my_chart.setOption(option);
     },
     initEchartXzqh() {