echarts的折线图,在点击图例后,提示出现变化,不报错。tooltip的formatter怎么写

在点击图例的年后,提示框会相应的变化,多选和单选都会响应变化。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博客

猜你喜欢

转载自blog.csdn.net/Frank_colo/article/details/132888149