上一回我发了一个可视化大屏的效果视频，很多小伙伴都问我能不能将代码分享出来。鉴于小伙伴的要求，我考虑了一下，现在决定将这个可视化大屏的代码分享出来。新来的小伙伴也可以去我的主页中看我发的效果视频《漂亮的自适应可视化大屏，基于js、echarts插件》。
效果图如下：
那么我接下来也给大家分享一下这个可视化大屏的制作过程。
准备工具：
- Sublime Text编辑器；
- 百度ECharts图标插件；
- 浏览器。
页面布局规划：
首先可以将页面先大体分成两部分，包括看板的顶部标题部分和图表内容区域部分。然后再将图表区域部分再次进行模块划分，此次划分的目的是划分图表的主次布局效果。最后就是将具体的图表展示在各个模块中。
顶部的标题我用到了图片作为背景，这样看起来显得更加有科技感；然后标题区域的元素通过定位的方式放置在相应的位置，添加插件可以根据需求来做取舍。
主内容区域的布局大家可以通过弹性布局来实现左中右布局，这样可以避免采用浮动而带来的不必要的麻烦。中间的大框作为主要内容模块的区域，会在这个区域中展示看板的主要数据；左边的两个框是展示一些稍微次要的内容，剩下的区域则是展示次要内容。这样通过模块的大小即可分出主次，看起来也更加明了。
各个模块规划好了以后，就开始美化面框，突出内容。首先可以给各个模块添加背景色，然后添加文字标题，标题样式可以结合图片来做。再加上一些动态的特效作为装饰。
给主内容区域也加上装饰。
看是进入正题，给主内容添加数据。
接下来就是给左边的两个模块添加图表，这里用到的是柱状的排行图表和自动轮播的饼图。排行图表也加了定时可以自动滚动数据。
其他的次要模块也都加上图表，同时加上一些动态效果。
大家要注意，ECharts的水球图还需要在引入水球图的插件（echarts-liquidfill）才能渲染，否则会报错。
制作一个漂亮的看板大致的流程就是这样的，主要的相关代码如下：
<script>
(function(){
window.over= function (){
let dom=document.getElementById("animation-img");
if(dom.className.indexOf("animation-img")!=-1){
dom.classList.remove("animation-img");
}
};
window.out=function (){
let dom=document.getElementById("animation-img");
if(dom.className.indexOf("animation-img") === -1 ){
dom.classList.add("animation-img");
}
};
let ChartC2=initChartC2();
let ChartR2=initChartR2();
let ChartR3=initChartR3();
let ChartL2=initChartL2();
let ChartL11=initChartL11();
let ChartR11=initChartR11();
let ChartR12=initChartR12();
let ChartR13=initChartR13()
window.onresize = function () {
ChartC2.resize();
ChartR2.resize();
ChartR3.resize();
ChartL2.resize();
ChartL11.resize();
ChartR11.resize();
ChartR12.resize();
ChartR13.resize();
var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen ||
document.msFullscreenElement || document.fullscreenElement
);//!document.webkitIsFullScreen都为true。因此用!!
if (isFull==false) {
document.getElementById('out').style.display="none";
document.getElementById('full').style.display="";
}else{
document.getElementById('out').style.display="";
document.getElementById('full').style.display="none";
}
}
})();
//fullScreen()和exitScreen()有多种实现方式，此处只使用了其中一种
//全屏
function fullScreen() {
var element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
}
}
//退出全屏
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
</script>此看板的代码已在github开源，需要源码的小伙伴可以关注我，然后私信给我发“看板源码”，即可获取相关源代码。
写代码不容易，希望小伙伴们点个赞。如果各位小伙伴想和我交流技术的，欢迎大家来找我。
