持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

前言：

掘友们，大家好。最近在开发大屏可视化，正如标题所言，三天完成大屏可视化，在极短的时间里完成数据的展示，交互，测试、简简单单的记录下开发过程、给大家分享一下心得！

原型图：

当产品盯着你，笑嘻嘻的冲你走过来的时候，我就知道，来活了家人们。简单的对接了一下需求后，我大概明白了，开发时间短，要求高，又要爆肝了。身为项目中唯一的前端菜鸡，这活我不干又能轮到谁呢！这是在项目中第二次开发大屏可视化，类型差不多都一样，不说了，上原型图。

云踪大屏04_画板 1.png

屏幕适配：

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

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

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

分模块开发：

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

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

created() {  // 此处是vue的生命周期 在创建*vue*实例的时候会被调用,
    var _this = this //声明一个变量指向Vue实例this，保证作用域一致
    var weeks = new Array('星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六')
    var now = new Date()
    var day = now.getDay()
    _this.week = weeks[day] // 设置星期几
    _this.date = new Date().getFullYear() + '年' + _this.appendZero(new Date().getMonth() + 1) + '月' + _this.appendZero(new Date().getDate()) + '日' // 设置年月日
    _this.timer = setInterval(function () {
        _this.currentTime = _this.appendZero(new Date().getHours()) + ':' + _this.appendZero(new Date().getMinutes()) + ':' + _this.appendZero(new Date().getSeconds()) //修改数据date
    }, 1000);
    // _this.timer 就是不断在增加的日期
},

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

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

代码详情：juejin.cn/post/714640… 大家可以参考下关于修改element中Progress进度条

数据的轮循和翻页滚动

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

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

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

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 创建好的日期数组 
}

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

var allinfo = getlastYearMonth()

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

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']

3D饼状图的设计

3D饼状图设计起来有点难，npm安装echarts-gl，文档大家可以先看一下www.cnblogs.com/houxianzhou…

绘制好了，但是有一个问题，3D的饼状图绘制不能绘制指示线，只能通过2D平面的饼状图设置透明色，将指示线挂在3D上。此处也是耍了小聪明、官方echarts没有关于3D饼状图的API这些开发选项可以去github上找。

项目结束（大屏预览）

总结：

个人觉的这个大屏做的还不够完美，项目赶得比较紧急，三天就开发完交付，自己还要走一遍测试过程。因为公司是自主研发吗，后续开发可能还会优化。

三天时间、完成大屏可视化项目、是种什么体验！

前言：