给大家开源分享上一回基于JS、ECharts的可视化大屏

上一回我发了一个可视化大屏的效果视频，很多小伙伴都问我能不能将代码分享出来。鉴于小伙伴的要求，我考虑了一下，现在决定将这个可视化大屏的代码分享出来。新来的小伙伴也可以去我的主页中看我发的效果视频《漂亮的自适应可视化大屏，基于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开源，需要源码的小伙伴可以关注我，然后私信给我发“看板源码”，即可获取相关源代码。

写代码不容易，希望小伙伴们点个赞。如果各位小伙伴想和我交流技术的，欢迎大家来找我。