echarts自适应大屏方案 亲测有用

Posted 2023-04-07

参考技术A

这次在做项目的时候，蓝湖是 1920 x 1080 的设计图。
写页面的时候用的1920 x 1080 的像素标准直接来写。echarts 里面的尺寸 只能 写 12 或 12%。有的如：fontSize 之类的 只有 12 。导致 写的时候是 1920，输出到 4k 屏幕上，label 标签 和 字就很很小

将实际窗口的大小与设计图窗口大小做比得到要给相对的比率，每个单位数值和这个比率相乘即可。即：按比例缩放字体。比如设计图是1920 1080的，某个数值是fontSize:12，当前显示器是3840的大屏，那么你现在的字体大小应该是：12 （3840/1920）= 24。

如果你的项目chart不多，你在组件里写换算方法也可以，但更推荐在项目的全部做个封装。

具体到项目里封装一下：
chart-resize.js

main.js:

图形要做到自适应，以下属性需全部改写：

使用：
chart.vue
写成 window.nowSize(14) 或者 nowSize(14)
如果项目安装了eslint,开启了undefined检查，就写window.nowSize(14)

vue中echarts宽度自适应设置100%

参考技术A <chart :options="options"  style="width:100%;height:400px" autoresize ></chart>

添加 autoresize 属性