echarts图表浮窗设置

我们都知道图表一旦应用一般都是会设置浮窗的展示，用于起到提示说明的作用

例图

那么浮窗中的内容是怎么设置的呢？

在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 } }   ... }