Echarts 大屏rem适配方案

最新推荐文章于 2024-08-15 17:20:30 发布

一撇一画

最新推荐文章于 2024-08-15 17:20:30 发布

阅读量1.3k

点赞数

分类专栏：学习笔记文章标签： javascript css

本文链接：https://blog.csdn.net/qq_42220283/article/details/116402061

版权

本文介绍了如何使用rem实现Echarts大屏适配。通过将设计稿中元素的像素值转换为rem单位，例如100px在2020px设计稿中的宽度转换为100 / 2020 * 100rem，可以实现灵活的适配效果。建议使用scss的px()函数辅助进行px到rem的计算。

摘要由CSDN通过智能技术生成

公式：
在这里插入图片描述

// Wp 为页面有效宽度，Hp 为页面有效高度
const clientWidth = document.documentElement.clientWidth;
const clientHeight = document.documentElement.clientHeight;
 window.pageWidth = clientWidth / clientHeight > 16

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一撇一画

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

大屏适配解决方案 VUE

m0_51431448的博客

12-03

8099

最近在做一个数据可视化的项目，整个项目全是大屏展示，期间也是遇到很多问题，最令人头疼的就是大屏的适配。我这个项目是要投放到4K超大屏上展示，自然要考虑到分辨率，浏览器缩放，字体（包括图表中的字体）的适配。下面介绍一下适配方案（或许并不是最好的，目前用着还是可以解决，本人菜鸟一个，大佬有更好更优雅的方式评论区请指教）： 1.flex布局布局肯定是选择css3中的flex布局了，尽量多使用百分比，避免使用px单位的使用，相信作为前端工程师（高大上哈哈）的我们在布局这块儿应该都没啥问题，这里就不多说~~..

数据可视化Echarts—— Echarts、设置cssrem 插件的基准值、边框图片、字体图标、立即执行函数用法、无缝滚动原理

weixin_52819925的博客

08-21

913

数据可视化数据可视化主要目的：借助于图形化手段，清晰有效地传达与沟通信息。数据可视化的场景：数据可视化在互联网公司中经常用于通用数据报表，移动端图表，大屏可视化，图编辑&图分析，地理可视化等。常见的数据可视化库 D3.js目前 Web 端评价最高的 Javascript 可视化工具库(入手难) 。 ECharts.js百度出品的一个开源 Javascript 数据可视化库。 Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用。 AntV蚂蚁金服全新一代数据

参与评论您还未登录，请先登录后发表或查看评论

Echarts用rem实现适配

前端小菜鸟也有人起的博客

04-15

458

Echarts用rem实现适配

大屏REM适配方案

最新发布

Black_Kiven的博客

08-15

1408

如何使用rem适配大屏，此文章能教你一个很棒的适配方式

大屏自适应/适配方案【详解】（echarts自适配、rem、flexible.js、vscode中px2rem插件自动计算rem）

朝阳39的博客

08-30

1万+

大屏自适应

[echart] 字体自适应的方法(使用rem)

qq_14993591的博客

12-20

841

如在1920屏宽下字体设置为12px，就可以传入12给fontSize。在需要设置字体的地方可以这样写，

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

come from h5

05-08

4137

echarts在rem布局适配中字体如何适配 rem布局固然重要；但是echarts也需要在随着rem动态改变数值：直接上代码 // 字体适配 FontChart(res) { //获取到屏幕的宽度 var clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

echarts大屏字体自适应的方法步骤

10-16

以下是一种实现echarts大屏字体自适应的方法：首先，我们需要编写一个函数来获取屏幕宽度，并基于这个宽度计算出合适的字体大小比例。这个函数可以如下所示： ```javascript function fontSize(res) { let docEl...

数据可视化大屏适配方案（vue+px2rem）

数据可视化

01-22

3145

配置前言项目构建：基于vue-cli3构建，使用postcss-px2rem px2rem-loader进行rem适配实现原理：每次打包，webpack通过使用插件postcss-px2rem，帮我们自动将px单位转换成rem单位前方有坑：UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内，打包适配时不会读取相关css,所以要配置相关样式，在style中需要" !important "进行样式覆盖。 1.安装postcss-px2rem及px2rem-loader n

vue数据大屏分辨率自适应（包括echarts内部自适应）

VVVVV

03-18

2987

echarts内部屏幕大小自适应参考文章：echarts自适应问题，echarts中怎么改变字体单位实现自适应写一个换算函数 //当前视口宽度 let nowClientWidth = document.documentElement.clientWidth; //换算方法 function nowSize(val,initWidth=1920){ return val * (nowClientWidth/initWidth); } 在echarts有关大小的地方进行使用 lege

【ECharts】根据屏幕尺寸echart字体自适应（rem）

qq_52065282的博客

08-11

4000

pc端使用echart，屏幕变大或变小时，echart的字体大小没有根据屏幕大小变化。

【ECharts】字体自适应（rem）

Qxn530的博客

09-01

1196

ECharts字体自适应（rem）

echarts利用rem媒体查询自适应

上山看海

07-21

352

前提：html已使用媒体查询设置不同屏幕宽度下的font-size 获取html的font-size样式属性 fontSize(res) { return res * parseInt(this.getStyle('html', 'fontSize')); }, getStyle(tagName, attr) { var element = document.getElementsByTagName(tagName)[0]; if (getCompu

echarts 图标使用rem解决刷新的问题

weixin_43365995的博客

03-27

1526

我们一般是在mounted中监听页面刷新人后在渲染完毕后在调用echarts mounted() { this.$nextTick(() => { this.initChart() }) }, methods: { initChart() { this.chart = echarts.init(this.$el, ...

echarts 字体自适应的方法(使用rem)