Echarts 柱状图点击事件受同页面饼图点击事件影响的分析

问题描述：同一个页面存在多个echarts统计图，其中柱状图只有一个柱子一组数据，饼图有两组数据，各自都设置了点击事件，点击后弹窗打开的是同一个公共页面，但是传参不一样。如果先点击饼图打开页面，关掉弹窗页面，再点击柱状图打开，柱状图的点击事件获取不到点击的柱子信息，传参就是空的。

柱子点击效果设置：

 echarts.registerTheme('sg-echarts', theme); // 注册主题
 var homePageDashBoardZclxChart = echarts.init(document.getElementById('homePageDashBoardZclxChart'), 'sg-echarts');
            // 绘制图表
            homePageDashBoardZclxChart.on('click', function (param) {
              debugger
              _self.openZcztListType = 'clickHomePageDashBoardZclxChart';
              _self.zclxbm = _self.listZclxbm[param.dataIndex]
              console.log(param) 
              _self.dialogZcztInHomePageDashBoardVisible = true            
            })
            homePageDashBoardZclxChart.setOption(option);

饼状图点击效果设置：

  echarts.registerTheme('sg-echarts', theme); // 注册主题
            var homePageDashBoardQyChart = echarts.init(document.getElementById('homePageDashBoardQyChart'), 'sg-echarts');
            // 绘制图表
            homePageDashBoardQyChart.setOption(option);
            homePageDashBoardQyChart.on("click", function(param){              
                _self.openZcztListType = 'clickHomePageDashBoardPieQyJL'; 
                _self.gldwByJL= _self.listBzgqbm[param.dataIndex]              
               _self.dialogZcztInHomePageDashBoardVisible = true;
            });

这是正常点击柱子看到的柱子点击参数

componentType: "series"
componentSubType: "bar"
componentIndex: 0
seriesType: "bar"
seriesIndex: 0
seriesId: "正常0"
seriesName: "正常"
name: "汽车"
dataIndex: 0
data: 198
dataType: undefined
value: 198
color: "#009688"
borderColor: undefined
dimensionNames: (4) ["x", "y", "__ecstackresult", "__ecstackedover"]
encode: {x: Array(1), y: Array(1)}
marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#009688;"></span>"
$vars: (3) ["seriesName", "name", "value"]
event: {type: "click", event: MouseEvent, target: Sub, topTarget: Sub, cancelBubble: false, …}
type: "click"

这是点击出现错误的时候参数，可以看到这时候 name是"",dataIndex值是1，柱状图只有1组数据，dataIndex却是1

Object
componentType: "series"
componentSubType: "bar"
componentIndex: 0
seriesType: "bar"
seriesIndex: 0
seriesId: "正常0"
seriesName: "正常"
name: ""
dataIndex: 1
data: 198
dataType: undefined
value: 198
color: "#009688"
borderColor: undefined
dimensionNames: (4) ["x", "y", "__ecstackresult", "__ecstackedover"]
encode: {x: Array(1), y: Array(1)}
marker: "<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#009688;"></span>"
$vars: (3) ["seriesName", "name", "value"]
event: {type: "click", event: MouseEvent, target: Sub, topTarget: Sub, cancelBubble: false, …}
type: "click"
__proto__: Object

找了半天没找到原因，如果柱状图是多组数据的时候就不会发生这个问题，仔细去看了下echarts的API，重写了下点击事件重新对每组数据设置点击事件，这样就好了。

修改方法：

柱状图设置点击效果：

对所有柱子循环 设置点击效果 
for (let i = 0; i <_self.listZclxbm.length; i++) {
              homePageDashBoardZclxChart.on('click',
                {dataIndex:i,name:labelArray[i]},
                function (param) {
                  _self.openZcztListType = 'clickHomePageDashBoardZclxChart';
                  _self.zclxbm = _self.listZclxbm[i]
                  _self.dialogZcztInHomePageDashBoardVisible = true
                }
              );
            }