基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现

**1.工具介绍

**
本次案例需要的工具(包括但不限于):vscode(代码编辑器),node.js(各类插件下载工具),china.js,echarts.min.js,juquery.min.js等(JavaScript相关的.js官方插件),IDEA(所有的代码都可以在这里写)
涉及到的语言等技术:html5+css+JavaScript ajax轮询请求
项目发布工具:gitee代码托管(静态页面)

项目已经托管在gitee:[http://krystaljungen.gitee.io/my-krystal2/],欢迎访问!!!

2.项目成品展示与项目布局

该项目使用了ECharts多个图表实现对新冠疫情中国地区的分析与展示,使用可视化大屏的方式展现:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第1张图片

如图,项目布局如下:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第2张图片

**3.实现

ide项目结构如下:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第3张图片

**
3.1 项目插件引入
本项目需要引入JQuery、ECharts的支持。所有插件可以均可以在官网找到。这里给出ECharts的插件网址:ECharts教程,读者可以花费稍短的时间即可快速入门。
本项目引入的插件如下:

<script src="./js/echarts.min.js">script>
		<script src="./js/china.js">script>
		<script src="./js/jquery.min.js">script>
		<script src="./js/index.js">script>
其中,index.js为整个html文件的js部分,所以直接引入即可。

3.2 中国数据总览的实现
效果图如下:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第4张图片
html代码:

<div id="center1">			
			<div class="item">
				<div class="number" id="confirm">123div>
				<div class="text">累计确诊div>
			div>
			<div class="item">
				<div class="number" id="heal">123div>
				<div class="text">累计治愈div>
			div>
			<div class="item">
				<div class="number" id="dead">123div>
				<div class="text">累计死亡div>
			div>
			<div class="item">
				<div class="number" id="nowConfirm">123div>
				<div class="text">现有确诊div>
			div>
			<div class="item">
				<div class="number" id="noInfect">123div>
				<div class="text">无症状感染div>
			div>
			<div class="item">
				<div class="number" id="import">123div>
				<div class="text">境外输入div>
			div>		
		div>

index.js文件中代码:

function center1(data){
	$('#confirm').text(data.chinaTotal.confirm);
	$('#heal').text(data.chinaTotal.heal);
	$('#dead').text(data.chinaTotal.dead);
	$('#nowConfirm').text(data.chinaTotal.nowConfirm);
	$('#noInfect').text(data.chinaTotal.noInfect);
	$('#import').text(data.chinaTotal.importedCase);
}

3.3 中国疫情地图的实现
这部分的实现需要ECharts的中国map插件,目前5.0的版本里面没有该插件,需要的话建议使用4.x的插件,写者使用的4.8版本的。(使用NPM管理下载)。
效果图:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第5张图片
html代码:

<div id="center2">div>

index.js代码:

function center2(data){
	var myChart=echarts.init($('#center2')[0],'dark');
	var option={
		title:{
			text:'\n\n中国地区累计确诊分布',
			left:'center',
			textStyle: {
				fontSize: 20,
				color: "rgba(255, 0, 0, 1)"
			  },
		},
		tooltip:{
			//show:true,
			trigger:'item'
		},
		visualMap:{ //左侧小导航图标
			show:true,
			x:'left',
			y:'bottom',
			textStyle:{
				fontSize:8,
			},
			splitList:[{start:1,end: 9},
				{start:10,end:99},
				{start:100,end:999},
				{start:1000,end:9999},
				{start:10000}],
			color:['#8A3310','#C64918','#E55B25','#F2AD92','#F9DCD1']		
		},
		series:[{
			name:'累计确诊人数',
			type:'map',
			mapType:'china',
			roam:false,		//禁用拖动和缩放 
			
			itemStyle:{		//图形样式
				normal:{
					borderWidth: .3,//区域边框宽度
					borderColor:'#009fe8',//区域边框颜色
					areaColor:'#ffefd5',       //区域颜色
				},
				emphasis:{      //鼠标滑过地图高亮的相关设置
				borderWidth: .5,
				borderColor:'#4b0082',
				areaColor:'#fff',
				}
			},
			label:{ // 图形上的文本标签	
				normal:{ 
					show:true,   //省份名称
					fontSize:10,
				},
				emphasis:{
					show:true,
					fontSize:8,
				}
			},
			data:[]     //[{'name':'上海','value':318},{'name':'江苏','value':308}]
		}]
	};	
	
	var provinces = data.areaTree[0].children;
	for(var province of provinces){
		option.series[0].data.push({
			'name':province.name,
			'value':province.total.confirm
		});
	}
	myChart.setOption(option);
}

3.4 全国累计趋势的实现
效果图:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第6张图片
html代码:

<div id="left1">div>

js代码:

function left1(data){
	var myChart = echarts.init($('#left1')[0],'dark');
	var option = {
		title:{
			text:"全国累计趋势",
			textStyle:{
				color:'white',
			},
			left:'left',
		},
		tooltip:{
			trigger:'axis',
			//指示器
			axisPointer:{
				type:'line',
				lineStyle:{
					color:'#7171C6'
				}
			},
		},
		//图例
		legend:{
			data:['累计确诊','累计治愈','累计死亡'],
			left:"right"
		},
		//图形位置
		grid:{
			left:'4%',
			right:'6%',
			bottom:'4%',
			top:50,
			containLabel:true
		},
		xAxis:[{
			type:'category',
			data:[]   // ['03.20','03.21','03.22'],
		}],
		yAxis:[{
			type:'value',
			//y轴字体设置
			axisLabel:{
				show:true,
				color:'white',
			
				fontSize:12,
				formatter: function(value){
					if(value>=1000){
						value = value/1000+'k';
					}
					return value;
				},
	
			},
			
			//y轴线设置展示
			axisLine:{
				show:true
			},
			//与x轴平行的线样式
			splitLine:{
				show:true,
				lineStyle:{
					color:'#17273B',
					width:1,
					type:'solid',
				}
			}
		}],
		series:[{
			name:"累计确诊",
			type:'line',
			smooth:true,
			data:[]//[260,406,529],
		},{
			name:"累计治愈",
			type:'line',
			smooth:true,
			data:[]  //[6,150,270],
		},{
			name:"累计死亡",
			type:'line',
			smooth:true ,
			data:[] //[6,9,17],
		}]
	};

	var chinaDayList =data.chinaDayList;
	for(var day of chinaDayList){
		//console.log(day);
		option.xAxis[0].data.push(day.date);
		option.series[0].data.push(day.confirm);
		option.series[1].data.push(day.heal);
		option.series[2].data.push(day.dead)
	}
	

	myChart.setOption(option);
}

3.5 数据爬取与注入
以上只是介绍了部分的图表的生成,ECharts的图表生成非常简单,基本上复制官网的代码,注入自己的数据即可,其他的都是样式的问题。以下介绍,本项目的数据来源。
本项目爬取了腾讯新闻的数据,使用JQuery的Ajax请求,对获取的数据处理后调用写好的方法,方法里面的ECharts代码接收数据并完成映射。
js代码如下:

function getData(){
	$.ajax({
		url:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
		data:{
			name:'disease_h5'
		},
		dataType:'jsonp',
		success:function(res){
			var data = JSON.parse(res.data);
			console.log(data)
			center1(data);
			center2(data);
			right1(data);
			right2(data);
		}
	});
	$.ajax({
		type:'post',
		url:'https://api.inews.qq.com/newsqa/v1/query/inner/publish/modules/list',
		data:{
			modules: 'chinaDayList,chinaDayAddList,nowConfirmStatis,provinceCompare'
		},
		dataType:'json',
		success:function(res){
			//console.log(res);
			var data = res.data;
			//console.log(res.data);
			left1(data);
			left2(data);
		}
	});
}

4.小结

项目并不难,很容易实现,难的是数据的获取和分析。实现了中国地区疫情数据之后可以尝试实现世界地区的数据试试。
项目参考了B站诸位大佬的视频,这里就不一一赘述了。

附上我的世界疫情分析大屏:
基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现_第7张图片

你可能感兴趣的:(js,可视化,echarts,数据可视化)