1.工具介绍
本次案例需要的工具（包括但不限于）：vscode(代码编辑器)，node.js（各类插件下载工具），china.js,echarts.min.js,juquery.min.js等（JavaScript相关的.js官方插件）
涉及到的语言等技术：html5+css+JavaScript ajax轮询请求
项目发布工具：gitee代码托管（静态页面）
项目已经托管在gitee：http://krystaljungen.gitee.io/my-krystal2/，欢迎访问！！！
2.把Echarts所需要的map的js文件和必要的min.js文件导入
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/jquery.min.js"></script>
3.页面布局
在需求设定后我们需要进行页面布局，可以在画板上进行这一步 。 然后就是页面布置和样式设定，会在项目中创建网页和css文件。
以下是我的缩略图（图丑见笑）：
根据页面进行布局：
index.html中
<div id="title">
<span class="time"></span>
<span class="author">作者：Krystal1(秀秀)</span>
中国疫情实时展示
<a class="link01" href="http://krystaljungen.gitee.io/my-krystal1/" target="_blank">| 世界疫情展示</a>
<a class="link02" href="https://news.qq.com/zt2020/page/feiyan.htm?from=timeline&isappinstalled=0#/" target="_blank" >数据来源：腾讯新闻</a></div>
<div id="left1"></div>
<div id="left2"></div>
<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>
<div id="center2"></div>
<div id="right1"></div>
<div id="right2"></div>
<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>
</body>
在样式表.css文件中：
body{
background-color: #333;
}
#title{
width: 100%;
height: 10%;
position: absolute; /*绝对定位*/
top:0;
left:0;
/*弹性布局*/
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 40px;
}
#title .time{
position: absolute;
right: 20px;
top:5px;
font-size: 20px;
}
#title .link01{
position: absolute;
left: 220px;
top:5px;
font-size: 20px;
color:red;
text-decoration:none;
}
#title .link02{
position: absolute;
left: 20px;
top:5px;
font-size: 20px;
color: blue;
text-decoration:none;
}
#title .author{
position: absolute;
left: 20px;
top: 30px;
font-size: 18px;
color: blueviolet;
}
#left1{
width: 30%;
height: 45%;
position: absolute;
left: 0;
top: 10%;
}
#left2{
width: 30%;
height: 45%;
position: absolute;
top: 55%;
left: 0;
}
#center1{
width: 40%;
height: 25%;
position: absolute;
left: 30%;
top: 10%;
display: flex;
flex-wrap: wrap;
}
.item{
width: 33.33%;
}
.number{
height: 60%;
display: flex;
justify-content: center;
align-items: center;
color: gold;
font-size: 30px;
font-weight: bold;
}
.text{
height: 40%;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 20px;
font-weight: bold;
}
#center2{
width: 40%;
height: 65%;
position: absolute;
top: 35%;
left: 30%;
}
#right1{
width: 30%;
height: 45%;
position: absolute;
top: 10%;
right: 0;
}
#right2{
width: 30%;
height:45%;
position: absolute;
top: 55%;
right: 0;
}
4.到这步页面布局已经完成了，我们也初始化了各个图表的容器，开始编写JavaScript文件，进行图表的渲染
4.1 时间在线显示
写一个刷新时间的函数显示在前端，表示实时更新的数据
/**
* 实时显示时间
*/
function showTime(){
var time = new Date();
var year = time.getFullYear();
var month = (time.getMonth()+1+'').padStart(2,'0');
var day = (time.getDate()+'').padStart(2,'0');
var hour = (time.getHours()+'').padStart(2,'0');
var minute = (time.getMinutes()+'').padStart(2,'0');
var second = (time.getSeconds()+'').padStart(2,'0');
var content = `${year}年${month}月${day}日${hour}:${minute}:${second}`;
$('#title .time').text(content);
}
showTime();
setInterval(showTime,1000); //每秒运行一次
效果如下：
4.2 中国地图渲染（地图）
数据来源,腾讯新闻 ，数据爬取在文章末尾介绍 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)"
},
//subtext: "@腾讯新闻",
//sublink:'www.baidu.com'
},
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);
}
效果如下：
4.3 疫情数据大致总览
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);
}
效果如下：
4.4 全国确诊前10的省市（柱状图）
function right1(data){
var myChart = echarts.init($('#right1')[0],'dark');
var option={
title:{
text:"全国确诊省市TOP10",
textStyle:{
color:'white',
},
left:'left'
},
color:['#3398DB'],
tooltip:{
trigger:'axis',
//指示器
axisPointer:{
type:'shadow' //默认为直线，可选为： ‘line’ | 'shadow'
}
},
xAxis:{
tpye:'category',
data:[] //['湖北','广州','北京']
},
yAxis:{
type:'value',
//y轴字体设置
axisLable:{
show:true,
color:'white',
fontSize:12,
formatter:function(value){
if(value>=1000){
value = value/1000 + 'k';
}
return value;
}
},
},
series:[{
data:[],//[582,300,100],
type:'bar',
barMaxWidth:"50%"
}]
};
var provinces = data.areaTree[0].children;
var topData = [];
for(var province of provinces){
topData.push({
'name':province.name,
'value':province.total.confirm
});
}
//降序排列
topData.sort(function(a,b){
return b.value-a.value;
});
//只保留前10个
topData.length = 10;
//console.log(topData);
//分别取出省份名称和数值
for(var province of topData){
option.xAxis.data.push(province.name) ;
option.series[0].data.push(province.value);
}
myChart.setOption(option);
}
效果如下：
4.5 境外输入前5省市（饼状图）
function right2(data){
var myChart = echarts.init($('#right2')[0],'dark');
var option = {
title: {
text: '境外输入确诊省市TOP5',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left',
data:[],
},
series: [
{
name: '省市名称',
type: 'pie',
radius: '55%',
center: ['50%', '60%'],
data:[],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
var provinces = data.areaTree[0].children; //境外输入的判断
var topData =[];
for(var province of provinces){
for(var item of province.children){
if(item.name === '境外输入'){
topData.push({
'name':province.name,
'value':item.total.confirm
});
break;
}
}
}
//降序的排列
topData.sort(function(a,b){
return b.value -a.value;
});
//只保留前5个
topData.length=5;
//分别取出省份名称和数据
for(var province of topData){
option.legend.data.push(province.name);
option.series[0].data.push(province);
}
//console.log(topData);
myChart.setOption(option);
}
还有一些其他的数据图呈现，代码写法类似，不再赘述。
5. 疫情数据爬取
采用jquery和ajax爬取腾讯新闻的数据
function getData(){
$.ajax({
url:'https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5',
data:{
name:'disease_h5'
},
dataType:'jsonp',
success:function(res){
//console.log(res.data);
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);
}
});
}
getData();
setInterval(getData,5*60*1000); //每5min查询获取一次数据
效果图：
