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查詢獲取一次數據
效果圖：
