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

·  阅读 4016
三天时间、完成大屏可视化项目、是种什么体验!

持续创作,加速成长!这是我参与「掘金日新计划 · 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进度条的背景色以及设置进度条颜色的渐变

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

image.png

image.png

代码详情: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…

image.png

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

项目结束(大屏预览)

image.png

总结:

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

收藏成功!
已添加到「」, 点击更改