在点击图例的年后,提示框会相应的变化,多选和单选都会响应变化。tooptip的重度在formatter
tooltip:{
show:true,
trigger:"axis",
alwaysShowContent:true,
triggerOn:"mousemove",
textStyle:{
color:"#fff"
},
backgroundColor:'rgba(6,17,71,0.8)',
borderColor:"#0E8BFF",
borderWidth:2,
// formatter:"{b}销售额<br/>{a0}:{c0}<br/>{a1}:{c1}<br/>{a2}:{c2}"
formatter:function(params){
console.log(params,"params")
if(params.length==0){return}
let base=params[0].name+"销售额"+"<br/>"
for(let i=0;i<params.length;i++){
base=base+`<span style="display: inline-block;padding: 5px 5px 5px 0px;"><i style="display: inline-block;width: 10px;height: 10px;background:${params[i].color};border-radius: 50%;"></i>
</span>`+params[i].seriesName+": "+params[i].value+"<br/>"
}
return base
}
},
当点击了图例,会拿到数组,将标题在循环数组的时候,每次遍历都在原来的基本标题上增加新的内容,最后将基本标题内容返回。所以,点击图例后,提示会响应的变化
echarts中自定义提示框 (tooltip.formatter)_echarts tooltip formatter自定义_依旧平凡的博客-CSDN博客