快速搭建可视化大屏

大屏可视化

echats

发布日期: 2023-05-06

开发大屏可视化项目，客制化大屏，如标题所述，一周内搭建，在极端时间内完成静态的布局、原型的还原，数据的交互、测试等，给大家分享一下吧

一：需求

简单的对接一下需求，大概明白这是个开发时间短、要求高的可视化项目、可视化大屏，类型差不多都一样，所以就直接开干了

二、屏幕适配

既然是大屏项目，第一步需要考虑的因素就是屏幕适配问题、屏幕适配的方法有好多种，这里小编采用的是rem适配。

rem是css3新增的一个大小单位，是根据设置html的font-size值的大小。思路就是动态的计算出html页面的font-size从而改变rem的大小。

var html = document.getElementsByTagName('html')[0];
html.style.fontSize='26.66667vw'

三、分模块开发

简单的分析一下模块开发中的技术难题

顶部时间的展示时间是实时更新的，一秒一秒的增加，日期也要是获取当前的日期

element中更改Progress进度条的背景色以及设置进度条颜色的渐变

轮循获取数据源、实时更新数据的进度、前台做出进度展示。

数据的轮循和翻页滚动

说起来轮循获取数据，小编这里用到了小技巧，轮播图，走马灯这样的话更好的优化了dom元素，减少了前台和后台的请求，不过数据更新的话、是通过侦听轮播图到达最后一页时重新发起请求，更新dom元素

获取今年月份到去年月份的数据

需要展示去年本月份到今年本月份的数据情况，需要先获取到当前月份。封装方法、可在项目中全局挂载使用。

js
复制代码function getlastYearMonth() { 
    // 1、封装方法 var result = []; 
    for (var i = 0; i < 13; i++) { 
        var d = new Date(); 
        d.setDate(1); 
        d.setMonth(d.getMonth() - i); 
        var m = d.getMonth() + 1; 
        m = m < 10 ? "0" + m : m; //在这里可以自定义输出的日期格式 
        result.push(d.getFullYear() + "-" + m); //result.push(d.getFullYear() + "年" + m + '月'); 
    } 
    return result; // return 创建好的日期数组 
}

声明参数接受方法返回的日期数组

js
复制代码var allinfo = getlastYearMonth()

此时我们得到的数组顺序、是从今年月份到去年月份的到序、根据需要，将数组置反

js
复制代码allinfo = allinfo.reverse() 
// 打印结果 
console.log(allinfo) //['2021-09','2021-10','2021-11','2021-12','2021-01','2021-02','2021-03','2021-04','2021-05','2021-06','2021-07','2021-08','2021-09']