echarts在rem布局适配中字体如何适配

news/2025/1/8 20:03:29/

echarts在rem布局适配中字体如何适配

rem布局固然重要;但是echarts也需要在随着rem动态改变数值:

直接上代码

接上代码

1
2
3
4
5
6
7
8
9
10
11

// 字体适配
FontChart(res) {
        //获取到屏幕的宽度
        var clientWidth =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth;
        if (!clientWidth) return; //报错拦截:
        let fontSize = 10 * (clientWidth / 1920);
        return res * fontSize;
      },

解释一下含义:该方法为在1920尺寸中;以1rem = 10px换算关系的设计稿
使用时直接调用:若10px则为: width: this.ChartFont(0.1)

假如:设计稿尺寸不是1920了;则修改1920位置处;
则:let fontSize = 10 * (clientWidth /尺寸)

若换算关系不为1rem =


http://www.ppmy.cn/news/55133.html

相关文章

Java 中如何定义一个类(三)

Java是一种面向对象的编程语言,类是Java中最基本的概念之一。在Java中,通过定义类可以创建对象,并对这些对象进行操作。本文将介绍如何在Java中定义一个类,并给出相应的示例代码。 定义类 在Java中,定义类使用关键字…

跳跃游戏 (DFS->记忆化搜索->动态规划/贪心证明)

一.跳跃游戏简单介绍 1. 跳跃游戏简单介绍 跳跃游戏是一种典型的算法题目,经常是给定一数组arr,从数组的某一位置i出发,根据一定的跳跃规则,比如从i位置能跳arr[i]步,或者小于arr[i]步,或者固定步数&#…

数组、链表专题

数组、链表专题 前缀和数组LeetCode 303. 区域和检索 - 数组不可变解题思路代码实现 LeetCode 304. 二维区域和检索 - 矩阵不可变解题思路代码实现 LeetCode 560. 和为 K 的子数组解题思路代码实现 差分数组LeetCode 303. 区域和检索 - 数组不可变解题思路代码实现 总结 不要纠…

Java 版Spring cloud 企业工程项目管理系统平台源码(三控:进度组织、质量安全、预算资金成本、二平台:招采、设计管理)

工程项目管理软件(工程项目管理系统)对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营,全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

【redis】redis分布式锁(二)可重入锁+设计模式

【redis】redis分布式锁(二)可重入锁 文章目录 【redis】redis分布式锁(二)可重入锁前言一、可重入锁(又名递归锁)1、说明:2、分开解释:3、可重入锁的种类隐式锁(即synch…

duubo+zookeeper

1、Dubbo简介 1. Dubbo是什么? 高性能、轻量级、开源、基于java Dubbo 是阿里集团开源的远程服务调用的分布式框架(告别Web Service模式中的WSDL,以服务者与消费者的方式在dubbo上注册) 协议和序列化框架都可以插拔是及其鲜明…

scratch比大小 中国电子学会图形化编程 少儿编程 scratch编程等级考试三级真题和答案解析2023年3月

目录 scratch比大小 一、题目要求 1、准备工作 2、功能实现 二、案例分析

Hive ---- Hive 安装

Hive ---- Hive 安装 1. Hive安装地址2. Hive安装部署1. 安装Hive2. 启动并使用Hive 3. MySQL安装1. 安装MySQL2. 配置MySQL3. 卸载MySQL说明 4. 配置Hive元数据存储到MySQL1. 配置元数据到MySQL2. 验证元数据是否配置成功3. 查看MySQL中的元数据 5. Hive服务部署1. hiveserver…