**
本次案例需要的工具（包括但不限于）：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多个图表实现对新冠疫情中国地区的分析与展示，使用可视化大屏的方式展现：
如图，项目布局如下：
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">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管理下载）。
效果图：
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);
}
});
}
项目并不难，很容易实现，难的是数据的获取和分析。实现了中国地区疫情数据之后可以尝试实现世界地区的数据试试。
项目参考了B站诸位大佬的视频，这里就不一一赘述了。
附上我的世界疫情分析大屏：
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）