echarts图表浮窗设置

Posted 2023-04-27

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

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

在echarts文档中我们会发现浮窗对应的变量名是formatter,然而文档中这个变量名出现的频率非常高，对于不熟悉文档的人来说就很容易混淆，这时我们就要明白一件事，浮窗是一种提示工具，而提示工具对应的变量是tooltip,那么formatter就一定是tooltip中的，那么 tooltip.formatter就是我们所需要的那一个 ，这里要注意 tooltip. axisPointer. label.   formatter  是有关文本设置的，与浮窗无关。

tooltip.formatter 支持字符串模板和回调函数两种形式

①字符串模板（见文档）

②回调函数（着重讲解）

其中params是默认使用的参数，打印这个参数的话，结果是一个大对象，而这些参数中就包含着浮窗显示的文字数据等内容，而这些参数是可以通过series[i].data数组的对象中进行添加的，比如想在浮窗中显示namelabel,那么就可以通过在data数组的对象中push进namelabel这个数据,之后就可以在params打印结果的data中取到这个键值对，也就可以直接拿来用了

echarts图表页面加载隐藏图表宽度失效问题

echarts初始化隐藏时，不能设置width:100%不能撑起页面，需要通过动态获取对应的宽度，设置宽度，再初始化echarts

如：
<div ref="echart" class="echart" v-show="!showBz"></div>
<div ref="echart1" class="echart" v-show="showBz" :style="{width:${fullW}px}"></div>

this.fullW=this.$refs.echart.clientWidth;
this.myChart1 = echarts.init(this.$refs.echart1);