数据大屏开发基础（echarts+rem.js）

觉醒法师

已于 2022-05-17 10:37:52 修改

阅读量1.8k

点赞数 3

分类专栏：可视化大屏+echarts 文章标签： javascript css html echarts

于 2021-01-20 17:42:27 首次发布

本文链接：https://blog.csdn.net/jiciqiang/article/details/112895104

版权

可视化大屏+echarts 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目前数据大屏开发项目比较多，但很多新手不清楚从何下手，其实上手很容易；另外，当前流行前端框也有很多，比如angularJs, vueJs,reactJs等；不过不必使用这些框架增加额外的学习成本，也可以快速开发数据大屏。这里直接使用html+css+js+echarts进行讲解。

1.大屏尺寸

这里使用1920*1080为例。

2.创建rem.js文件

代码如下：

!function(n){
    var  e=n.document,
         t=e.documentElement,
         i=1920,
         d=i/100,
         o="orientationchange"in n?"orientationchange":"resize",
         a=function(){
             var n=t.clientWidth||320;n>i&&(n=i);
             t.style.fontSize=n/d+"px"
         };
         e.addEventListener&&(n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);

当前大屏宽度为1920，故i=1920；如果设计稿为其他尺寸，修改为对应宽度即可。

设置好后，将该文件引入到html页面中即可。

3.样式书写

div.screen-box{ width: 19.2rem; height: 10.8rem; margin: 0 auto; }

由于rem.js引入并设置为1920，故直接书写量出的实际尺寸即可。由2中代码可知"d"的值为"i/100"，故样式中rem值为实际尺寸/100，所以1920px=19.2rem。

使用rem使用单位后，可以不同屏幕上正常预览大屏了。

这是由于rem.js运行后，会获取当前屏幕的宽度，重新计算得出新值赋于html节点上；而rem单位是根据根元素html上的font-size大小来变化的，正是基于这个出发，我们可以在每个设备下根据设备稳定度设置对应的html字号，从而实现自适应布局。如屏幕为1920px时，html上font-size值应为100px；如果小于1920px则如下图，rem.js会重新赋值。

如此一来，大家就不必再使用百分比去书写样式了，使用rem作为单位就可以1:1完整书写出页面布局了。

4.echarts使用

引入地址：https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js

html书写：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>标题</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
</head>
<body>
    <div class="screen-box">
        <div class="echart-box" id="map"></div>
    </div>
</body>
</html>

样式书写：

/*如图表尺寸为500px*350px，样式应为*/
div.echart-box{ width: 5rem; height: 3.5rem; }

js书写：

function create(){
    var chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        //书写图表参数...
    });
}

//执行创建图表函数
create();

由于使用的单位是rem，rem又是根据html上的font-size的大小来变化的；所以页面刚加载时，rem.js刚刚运行，可能创建图表时，出现获取不到实际的宽和高。故解决方案如下：

window.onload = function(){
    setTimeout(function(){
        create();
    }, 50);
}

如上代码所示，延迟创建图表即可。

5.echarts随屏幕大小改变而改变

在开发中，经常会遇到浏览器窗体大小改变，导致图表显示出问题情况，其实这个很好解决，具体如下代码所示：

var chart;

function create(){
    chart = echarts.init(document.getElementById('map'));
    chart.setOption({
        //书写图表参数...
    });
}

//执行创建图表
create();

//监听窗体大小改变，随即修改图表大小
window.onresize = function(){
    if(chart){
        chart.resize();    //重置图表大小
    }
}

觉醒法师

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
数据大屏开发基础（echarts+rem.js）

目前数据大屏开发项目比较多，但很多新手不清楚从何下手，其实上手很容易；另外，当前流行前端框也有很多，比如angularJs, vueJs,reactJs等；不过不必使用这些框架增加额外的学习成本，也可以快速开发数据大屏。这里直接使用html+css+js+echarts进行讲解。1.大屏尺寸这里使用1920*1080为例。2.创建rem.js文件代码如下：!function(n){ var e=n.document, t=e.documentElement
复制链接

扫一扫

专栏目录