问题描述:同一个页面存在多个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
}
);
}