For echarts' line chart, after clicking on the legend, the prompt changes and no error is reported. How to write the formatter of tooltip

After clicking on the legend, the prompt box will change accordingly, and both multi-select and single-select will respond to the changes. The importance of tooptip lies in 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                
                }

            },

When you click on the legend, you will get the array. When the title is looped through the array, new content will be added to the original basic title each time it is traversed, and finally the basic title content will be returned. Therefore, after clicking on the legend, the prompt will respond to the changes

Custom prompt box (tooltip.formatter) in echarts_echarts tooltip formatter customization_still ordinary blog-CSDN blog

Guess you like

Origin blog.csdn.net/Frank_colo/article/details/132888149