Vue大屏开发相关的echarts图表自适应问题

之前在公司开发一个农业大屏的时候，遇到了一个问题，就是echarts绘制的图表在浏览器屏幕缩放的时候无法做到自适应，虽然说调用了echarts的resize（）方法，但还是没效果，后来琢磨了一番，解决了这个问题。关键思路如下：echarts配置图表选项的时候，跟字体有关的相关配置不要写死，而是根据当前的屏幕大小来动态调整，然后重新初始化。

这是初始化echarts图表方法的代码：

可以看到我是先获取了当前视口的宽度，然后再动态调整字体大小。解释一下这个22和2560啥意思。因为当时是在一个显示器上调试的代码，而在那台显示器上展示的时候，字体设为22刚刚好，且显示器的视口宽度为2560，所以在代码里把参数默认值设为2560以及22。写好之后，再去父组件里添加“resize”的事件监听器，监听到屏幕大小变化的时候，再重新调用子组件的初始化方法。