柱形堆叠图的图例与自定义的tooltip显示不同步求助大神echarts 柱状配置项内容和展示
自定义的tooptip,并可以显示，但点击切换图例后，鼠标在移上柱形图，发现图例不正确，请问这块图例切换后怎么同步到tooltip的显示，我下面写了legendselectchanged事件但不知道是怎么用法。还是有其它更好解决方法？？？？？？
配置项如下
var uploadedDataURL = "/asset/get/s/data-1490858745728-BkGbXN5ng.txt";
var len=[];
myChart.on('legendselectchanged',function(param){
len=param.selected;
// if(len.高){
// console.log(1)
// }else{
// console.log(2)
// }
;
});
var option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'line' // 默认为直线，可选为：'line' | 'shadow'
},
formatter:function(params){
//console.log(len.中) true
var html=[];
var proName=[];//保险类别
var dataInde=[];//类别序号
var flag=true;
var num=1;
//console.log(params);
echarts.util.each(params,function(param){
proName.push(param.axisValue);
dataInde.push(param.dataIndex);
});
if(len.length===0){
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][index],'<br/>','</div>'
);
});
}else if(len.高===false&&len.低===true&&len.中===true){
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][index+1],'<br/>','</div>'
);
});
}else if(len.中===false&&len.低===true&&len.高===true){
flag=true;
echarts.util.each(proName,function(key,index){
if(flag){
html.push(
'<div>',produ[dataInde[index]][0],'<br/>',produ[dataInde[index]][2],'</div>'
);
flag=false;
}
});
}else if(len.低===false&&len.高===true&&len.中===true){
flag=true;
echarts.util.each(proName,function(key,index){
if(flag){
html.push(
'<div>',produ[dataInde[index]][index],'<br/>',produ[dataInde[index]][index+1],'</div>'
);
flag=false;
}
});
}else if(len.低===false&&len.中===false&&len.高===true){
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][0],'<br/>','</div>'
);
});
}else if(len.低===false&&len.中===true&&len.高===false){
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][1],'<br/>','</div>'
);
});
}else if(len.低===true&&len.中===false&&len.高===false){
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][2],'<br/>','</div>'
);
});
}else{
echarts.util.each(proName,function(key,index){
html.push(
'<div>',produ[dataInde[index]][index],'<br/>','</div>'
);
});
}
// echarts.util.each(produ,function(key1,index1){
// if(flag){ // //key1.shift()
// console.log(num)
// num++
// }else{
// flag=false
// }
// })
// echarts.util.each(proName,function(key,index){
// if(len.length==0){
// html.push(
// '<div>',produ[dataInde[index]][index],'<br/>','</div>'
// )
// }else if(len.length!=0&&len.高==false){
// console.log(produ);
// echarts.util.each(produ,function(key1,index1){
// //console.log(key1)
// key1.shift()
// })
// }
//
// })
return params[0].name+html.join('');
}
},
toolbox: {
feature: {
saveAsImage: {}
}
},
legend: {
type:'',
data: ['低', '中','高'],
selected:{
'高':true,
'中':true,
'低':true
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
splitLine:{
show:false
},
axisTick:{
show:false
},
splitArea:{
show:false
},
data: ['意外险', '健康险', '财产险', '旅意险', '人寿险','企业险','车险']
}],
yAxis: [{
type: 'value',
splitLine:{
show:false
},
axisLine:{
show:true
},
axisTick:{
show:false
},
splitArea:{
show:false
},
splitNumber:10,
min:0,
max: 1500
}],
series: [{
name: '低',
type: 'bar',
stack: 'A',
data:[20,130,60,0.4,200,80,199],
label: {
normal: {
show: true
}
},
}, {
name: '中',
type: 'bar',
stack: 'A',
data: [100,174,68,0.4,500,350,215],
label: {
normal: {
show: true
}
},
},{
name: '高',
type: 'bar',
stack: 'A',
data: [200,1200,95,1.1,50000,350,100],
label: {
normal: {
show: true,
position:'top'
}
},
}, ]
};
截图如下
