一周前,有一个粉丝通过网络找到了汉悦君。说他需要一个数据大屏,然后他的领导要求一周后看到成果,想请汉悦君帮帮忙。既然粉丝都这样说了,那我肯定要帮这位粉丝的忙。
首先这位粉丝的需求是:
- 在个人PC中打开,让领导直接在电脑上就可以看。
- 有时候电脑不联网
- 看板数据要用Excel表格的方式直接导入进系统中
- 有些数据需要表格进行轮播展示
- 用户电脑分辨率是1920*1080
汉悦君结合这位粉丝的需求,主要开发一下功能。
原来打算给粉丝开发全套的系统。用spring boot + MySQL + vue开发一套前后端分离的大数据可视化平台。但是粉丝的预算有限,于是乎只用前端技术进行开发,实现本地静态页面展示。
开发框架
- VUE
- Echarts
- data-v
- ant-design-vue
- xlsx.js
功能
看板的核心功能是导入Excel数据。
用户用浏览器打开页面,进入可视化大屏的首页。但是由于没有导入本地数据,所以各个模块的图表都是空的。如下图所示。
前面提到,看板要求可以实现本地Excel表格。所以在导入本地数据页面中,用户可以导入事先准备好的Excel表格。表格按照规定的模板写好数据,然后导入进系统中。
数据导入页面如下。其中各个选择框则是对应了各个图表的数据来源。
Excel表格的数据模板也是有要求和相关格式的。为了方便导入,此次规划的是一个xlsx中多个页签的方式导入。具体操作如下:用户只需要新建一个xlsx文件。然后在表格中新建多个页面,这里一个页签就是对应大屏中的某个图表。下面是汉悦君准备的测试数据。
我这里的Excel表中,底下有7个页签,它们会分别对应看板中的各个图表。在数据导入页面中,我们选择相应的Excel表格。然后在页面中选择各个模块分别对应的数据页签。
将各个图表的源数据分配好了以后,就可以将数据导进系统中。
最后的效果就是下面这样的。
总结
其实这种导入本地数据的可视化大屏使用是很方便的,对于许多人来说他们想要的就是最后的一个页面而已,之前有粉丝和我说过他就想要一个页面,而且这个页面可以在电脑上随时随地的展现,也不用安装其他的什么工具,更不会说部署上线。只要他向领导的时候,一打开页面,里面的各种数据图表就可以呈现出来。
我想这样的需求其实更加适用于那些白领,无论是给客户讲解还是给领导汇报,很多时候都是要用数据来说话的。但是那时候又不可能直接打开Excel表格给对方看,如果真的这样做,那就得卷铺盖走人了。
科技给人类社会带来便捷。
各位小伙伴如有定制化需要,欢迎私信!!!
汉悦君一直在这里等你。