说来惭愧，享受CSND的帮助已经16年了，却从来没有为他人做过贡献。今天开始本人将坚持在CSDN发布个人技术文章，为自己巩固理解、也为他人排忧解难。
最近，新型冠状病毒的实时疫情一直牵动着每个人的心，作为一名程序员在这非常时期希望能通过技术手段为大家提供实时的调情播报。
项目名称：新型冠状病毒，疫情实时追踪
技术标签：Html5、Css、JavaScript、Jquery、Ajax、Echarts（中国地图及线型图）
数据来源（腾讯网WebApi）
支持平台：手机端Web应用（苹果、安卓）
说明：通过Html5、Css、JavaScript、Jquery、Ajax等前端技术从腾讯网WebApi取得新型冠状病毒实时疫情数据。
以下为代码：
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta property="og:type" content="website">
<title>新型肺炎疫情最新动态</title>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=0.55, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="./rec/init.css">
<link rel="stylesheet" type="text/css" href="./rec/style_vp0019.css">
<link rel="stylesheet" type="text/css" href="./rec/styleNews_vp0019.css">
<script src="./rec/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript" src="./rec/china.js"></script>
<script>
// 重写alert
window.alert = function(msg, callback) {
console.log(msg, callback);
};
</script>
</head>
<body>
<div id="scaleContainer" style="display: block;overflow: hidden;">
<div>
<div class="head" style="background:url(./rec/top.jpg) no-repeat;background-size:100% 100%;">
</div>
<div class="topdataWrap">
<div class="dataTips ac-dataqs"><span>数据来源：国家卫健委官网发布，每日更新一次</span></div>
<div class="timeNum">
<!-- <p class="title">全国疫情数据</p> -->
<div class="bottom">
<p class="d">统计截至：<span id="nowtime"></span></p>
<!-- <p class="qs ac-dataqs">数据说明</p> -->
</div>
<!-- <p class="btn ac_topDataShare"></p> -->
</div>
<div class="recentNumber showAdd">
<div class="icbar confirm">
<div class="add"><span id="confirmAddDay"></span></div>
<div class="number" id="confirmAdd"></div>
<div class="text">全国确诊</div>
</div>
<div class="icbar suspect ac_suspect_qs">
<div class="add"><span id="suspectAddDay"></span></div>
<div class="number" id="suspectAdd"></div>
<div class="text"><span>疑似病例</span></div>
<div class="qs_bottom">
<span>+1657</span>
</div>
</div>
<div class="icbar cure">
<div class="add"><span id="cureAddDay"></span></div>
<div class="number" id="cureAdd"></div>
<div class="text">治愈人数</div>
</div>
<div class="icbar dead">
<div class="add"><span id="deadAddDay"></span></div>
<div class="number" id="deadAdd"></div>
<div class="text">死亡人数</div>
</div>
</div>
</div>
<div class="places" style="height: 500px; ">
<div class="chmap">
<div id="chmap" style="width: 750px; height: 500px; "></div>
<div class="chinamapLegend1" style="top:0px">
<div class="item item6"><p>10000人及以上</p></div>
<div class="item item5"><p>1000-9999人</p></div>
<div class="item item4"><p>500-999人</p></div>
<div class="item item3"><p>100-499人</p></div>
<div class="item item2"><p>10-99人</p></div>
<div class="item item1"><p>1-9人</p></div>
</div>
</div>
</div>
<!-- <div class="chinamapLegend"></div> -->
<div id="charConsus" class="lineChart china3"></div>
<br>
<div id="charConsus2" class="lineChart china"></div>
<br>
<script>
function formatNumbe(num) {
return '';
//return num > 0 ? '较上日+' + num : '较上日' + num;
}
function selectColor(num) {
if (num >= 1 && num <= 9)
{
return '#FFEFD7';
}
else if (num >= 10 && num <= 99)
{
return '#FFD2A0';
}
else if (num >= 100 && num <= 499)
{
return '#FE8664';
}
else if (num >= 5 && num <= 999)
{
return '#E64B47';
}
else if (num >= 1000 && num <= 9999)
{
return '#C91014';
}
else if (num >= 10000)
{
return '#9C0A0D';
} else {
return '#FFEFD7';
}
//return num > 0 ? '较上日+' + num : '较上日' + num;
}
var params={};
params.openid="asdasd";
$.ajax({
async:false,
type:"get",
contentType : "application/json;charset=UTF-8", //类型必填
url:"https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5",
data:JSON.stringify(params), //转json串或不转 配合后端即可
dataType:"jsonp",
success:function(data){
if(data.ret==0){
//result = JSON.stringify(data.data);
result = JSON.parse(data.data);
document.getElementById("nowtime").innerHTML = result.lastUpdateTime;
document.getElementById("confirmAdd").innerHTML = result.chinaTotal.confirm;
document.getElementById("confirmAddDay").innerHTML = formatNumbe(result.chinaAdd.confirm);
document.getElementById("suspectAdd").innerHTML = result.chinaTotal.suspect;
document.getElementById("suspectAddDay").innerHTML = formatNumbe(result.chinaAdd.suspect);
document.getElementById("cureAdd").innerHTML = result.chinaTotal.heal;
document.getElementById("cureAddDay").innerHTML = formatNumbe(result.chinaAdd.heal);
document.getElementById("deadAdd").innerHTML = result.chinaTotal.dead;
document.getElementById("deadAddDay").innerHTML = formatNumbe(result.chinaAdd.dead);
var myChart = echarts.init(document.getElementById("chmap"));
var charConsus = echarts.init(document.getElementById("charConsus"));
var charConsus2 = echarts.init(document.getElementById("charConsus2"));
chianoption = {
tooltip: {
trigger: 'item',
//formatter: '{b}'
formatter: function (params, ticket, callback) {
var tip=params.name;
if(!isNaN(params.value)){
tip='累计确诊病例：'+params.value+'人';
}
return tip;
}
},
series: [{
name: '中国',
type: 'map',
mapType: 'china',
selectedMode: 'single',
roam: false,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: []
}]
};
for (var i = 0; i < result.areaTree[0].children.length; i++)
{
var cityData = {
name: result.areaTree[0].children[i].name,
value: result.areaTree[0].children[i].total.confirm,
itemStyle: {
normal: {
areaColor: selectColor(result.areaTree[0].children[i].total.confirm)
}
}
};
chianoption.series[0].data.push(cityData);
}
myChart.setOption(chianoption, true);
charConsusoption = {
title: {
text: '疫情新增趋势（人）',
textStyle:{
fontSize :'22'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
left:'right',
textStyle:{
fontSize :'18'
},
data: ['新增确诊', '新增疑似','新增治愈', '新增死亡']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: {
show: true,
textStyle: {
fontSize :'18'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
fontSize :'18'
}
}
},
series: [
{
name: '新增确诊',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '新增疑似',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '新增治愈',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '新增死亡',
type: 'line',
data: [],
symbolSize: 10
}
]
};
for (var i = 0; i < result.chinaDayAddList.length; i++)
{
charConsusoption.xAxis.data.push(result.chinaDayAddList[i].date);
}
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < result.chinaDayAddList.length; j++ )
{
if (i == 0)
{
charConsusoption.series[i].data.push(result.chinaDayAddList[j].confirm);
}
else if (i == 1)
{
charConsusoption.series[i].data.push(result.chinaDayAddList[j].suspect);
}
else if (i == 2)
{
charConsusoption.series[i].data.push(result.chinaDayAddList[j].heal);
}
else if (i == 3)
{
charConsusoption.series[i].data.push(result.chinaDayAddList[j].dead);
}
else
{
}
}
}
charConsus.setOption(charConsusoption, true);
charConsus2option = {
title: {
text: '疫情累计趋势（人）',
textStyle:{
fontSize :'22'
}
},
tooltip: {
trigger: 'axis'
},
legend: {
left:'right',
textStyle:{
fontSize :'18'
},
data: ['累计确诊', '累计疑似', '累计治愈', '累计死亡']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: [],
axisLabel: {
show: true,
textStyle: {
fontSize :'18'
}
}
},
yAxis: {
type: 'value',
axisLabel: {
show: true,
textStyle: {
fontSize :'18'
}
}
},
series: [
{
name: '累计确诊',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '累计疑似',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '累计治愈',
type: 'line',
data: [],
symbolSize: 10
},
{
name: '累计死亡',
type: 'line',
data: [],
symbolSize: 10
}
]
};
for (var i = 0; i < result.chinaDayList.length; i++)
{
charConsus2option.xAxis.data.push(result.chinaDayList[i].date);
}
for (var i = 0; i < 4; i++)
{
for (var j = 0; j < result.chinaDayList.length; j++ )
{
if (i == 0)
{
charConsus2option.series[i].data.push(result.chinaDayList[j].confirm);
}
else if (i == 1)
{
charConsus2option.series[i].data.push(result.chinaDayList[j].suspect);
}
else if (i == 2)
{
charConsus2option.series[i].data.push(result.chinaDayList[j].heal);
}
else if (i == 3)
{
charConsus2option.series[i].data.push(result.chinaDayList[j].dead);
}
else
{
}
}
}
charConsus2.setOption(charConsus2option, true);
alert('成功');
}else{
alert('失败');
}
},
error:function(data){
alert(data.ret);
}
})
</script>
<script type="text/javascript">
</script>
</body></html>