我们都知道图表一旦应用一般都是会设置浮窗的展示,用于起到提示说明的作用
例图
那么浮窗中的内容是怎么设置的呢?
在echarts文档中我们会发现浮窗对应的变量名是formatter,然而文档中这个变量名出现的频率非常高,对于不熟悉文档的人来说就很容易混淆,这时我们就要明白一件事,浮窗是一种提示工具,而提示工具对应的变量是tooltip,那么formatter就一定是tooltip中的,那么tooltip.formatter就是我们所需要的那一个,这里要注意tooltip.axisPointer.label. formatter 是有关文本设置的,与浮窗无关。
tooltip.formatter支持字符串模板和回调函数两种形式
①字符串模板(见文档)
字符串样式
②回调函数(着重讲解)
回调函数格式
其中params是默认使用的参数,打印这个参数的话,结果是一个大对象,而这些参数中就包含着浮窗显示的文字数据等内容,而这些参数是可以通过series[i].data数组的对象中进行添加的,比如想在浮窗中显示namelabel,那么就可以通过在data数组的对象中push进namelabel这个数据,之后就可以在params打印结果的data中取到这个键值对,也就可以直接拿来用了
总而言之tooltip.formatter(浮窗)的参数打印结果:params.data内容可以自己定义,用于提供浮窗参数
data(){
return{
echartsData:{ series:[ { data:[ ] } ] }
} },
methods:{
.... let newArr=[ ] newArr.push({ namelabel: aa ,value:111,...}) ....
this.echartsData.series[0].data=newArr
// 这里newArr的数值都赋值给了data,之后打印formatter的参数时,在params.data中就可以访问到newArr中所有的值,这时再进行字符串拼接,将拼接好的字符串返回即可
}
......下面是配置项
let option={
......浮窗内容根据需求拼接好 ,之后浮窗显示的样子就是拼接的样子
tooltip:{ ...formatter: (params)=>{ let reStr=' ... '+params.data.namelabel +'...'+params.value+'...'
return reStr } } ... }












网友评论