基于ECharts的大数据可视化案例-----中国地区疫情数据分析与实现
**1.工具介绍**本次案例需要的工具(包括但不限于):vscode(代码编辑器),node.js(各类插件下载工具),china.js,echarts.min.js,juquery.min.js等(JavaScript相关的.js官方插件),IDEA(所有的代码都可以在这里写)涉及到的语言等技术:html5+css+JavaScript ajax轮询请求项目发布工具:gitee代码托管(静态页面
**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多个图表实现对新冠疫情中国地区的分析与展示,使用可视化大屏的方式展现:
如图,项目布局如下:
**3.实现
ide项目结构如下:
**
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 中国数据总览的实现
效果图如下:
html代码:
<div id="center1">
<div class="item">
<div class="number" id="confirm">123</div>
<div class="text">累计确诊</div>
</div>
<div class="item">
<div class="number" id="heal">123</div>
<div class="text">累计治愈</div>
</div>
<div class="item">
<div class="number" id="dead">123</div>
<div class="text">累计死亡</div>
</div>
<div class="item">
<div class="number" id="nowConfirm">123</div>
<div class="text">现有确诊</div>
</div>
<div class="item">
<div class="number" id="noInfect">123</div>
<div class="text">无症状感染</div>
</div>
<div class="item">
<div class="number" id="import">123</div>
<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管理下载)。
效果图:
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 全国累计趋势的实现
效果图:
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站诸位大佬的视频,这里就不一一赘述了。
附上我的世界疫情分析大屏:
![Logo](https://devpress.csdnimg.cn/79de2bf0b7994defa4242ef90d5513fa.jpg)
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
所有评论(0)