Echarts实战案例代码(45):拼接屏字体自适应的解决方案

简介: Echarts实战案例代码(45):拼接屏字体自适应的解决方案

在非1920*1080,16:9模式下,字体设置成固定值,在实际显示的时候会有误差。此时,需要将字体设置成自适应。

封装函数

    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;
    }
    window.addEventListener("resize", function () {
        console.log(fontSize(0.12));
    })


Echarts调用

textStyle:{
        fontSize: fontSize(0.12),
      }


Done!

相关文章
|
1天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
71 2
|
1天前
|
前端开发 JavaScript 定位技术
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
Docusaurus框架——react+antd+echarts自定义mdx生成图表代码解释文档
28 0
|
1天前
|
前端开发 JavaScript Apache
web前端-Echarts-5.3安装配置和案例
web前端-Echarts-5.3安装配置和案例
|
1天前
|
数据可视化
Echarts5.3.2可视化案例-时间轴动态柱形图
Echarts5.3.2可视化案例-时间轴动态柱形图
|
1天前
|
JavaScript
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
190 0
引入echarts时报错 “TypeError: Cannot read properties of undefined (reading ‘init‘)“的解决方案
|
1天前
|
前端开发 JavaScript
React中封装echarts图表组件以及自适应窗口变化
React中封装echarts图表组件以及自适应窗口变化
71 1
|
6月前
|
JSON 数据格式
Echarts统计图自适应
Echarts统计图自适应
37 0
|
6月前
|
JSON 数据格式
ECharts加载json数据解决方案
ECharts加载json数据解决方案
41 0
35-Vue之ECharts高级-样式及自适应
35-Vue之ECharts高级-样式及自适应
|
10月前
|
存储 JSON 数据可视化
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
ChatGPT工作提效之数据可视化大屏组件Echarts的实战方案(大数据量加载、伪3D饼图、地图各省cp中心坐标属性、map3D材质)
477 0