echarts图表（大屏可视化）文字大小自适应

最新推荐文章于 2024-07-26 15:20:05 发布

管理员--0728

最新推荐文章于 2024-07-26 15:20:05 发布

阅读量4.9k

点赞数 12

分类专栏： echarts 文章标签： echarts

本文链接：https://blog.csdn.net/hangzhou728/article/details/112978537

版权

echarts 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

做可视化的时候，相信大家都遇到过图表大小可以自适应，但是图表里面文字大小不能自适应的问题，之前也在网上找过文字自适应的方法，但是都是先改变窗口大小，然后刷新页面，文字大小才能跟随变化，于是就有了这篇文章（虽然方法有点笨！）

先看效果图

1920 * 1080分辨率
在这里插入图片描述
1320 * 800分辨率

880 * 500分辨率
在这里插入图片描述

先引入font.js

export function fontSize (res) {
    let docEl = document.documentElement,
        clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if (!clientWidth) return;
    let fontSize = 100 * (clientWidth / 1920);
    return res * fontSize;
}
export default {
    fontSize
}