JS实现中国疫情控制的实时监测
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="layui/css/layui.css">
</head>
<body>
<!-- 下⾯是地图区 -->
<div class="layui-main" id="laotang" ></div>
<!-- 下⾯是表头部分 -->
<div class="layui-main layui-nav">
<div class="layui-row" >
<div class="layui-col-md4">地区</div>
<div class="layui-col-md2">累计确诊</div>
<div class="layui-col-md2">最新确诊</div>
<div class="layui-col-md2">治愈</div>
<div class="layui-col-md2">死亡</div>
</div>
</div>
<!-- 下⾯是内容区 -->
<div class="layui-main">
<div id="view" class="layui-collapse" lay-accordion>
<div class="layui-colla-item layui-row">
<h2 class="layui-colla-title">
<span class="layui-col-md4">湖北</span>
<span class="layui-col-md2">62032</span>
<span class="layui-col-md2">40111</span>
<span class="layui-col-md2">20000</span>
<span class="layui-col-md2">2000</span>
</h2>
<div class="layui-colla-content">
<!-- // 某个省的市，⽐如武汉、孝感、潜江。。。 -->
<table class="layui-table" lay-skin="nob">
<colgroup>
<col width="370">
<col width="180">
<col width="180">
<col width="180">
<col>
</colgroup>
<tbody>
<tr>
<td>武汉</td>
<td>33333</td>
<td>33333</td>
<td>33333</td>
<td>33333</td>
</tr>
<tr>
<td>孝感</td>
<td>2222</td>
<td>222</td>
<td>2222</td>
<td>222</td>
</tr>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="layui/layui.js"></script>
<script src="data.js"></script>
<script id="demo" type="text/html">
{{# layui.wslist, function(index, item){ }}
<div class="layui-colla-item layui-row">
<h2 class="layui-colla-title">
<span class="layui-col-md4">{{ item.provinceName }}</span>
<span class="layui-col-md2">{{firmedCount}}</span>
<span class="layui-col-md2">{{item.currentConfirmedCount}}</span> <span class="layui-col-md2">{{item.curedCount}}</span>
<span class="layui-col-md2">{{item.deadCount}}</span>
</h2>
<div class="layui-colla-content">
<!-- // 某个省的市，⽐如武汉、孝感、潜江。。。 -->
<table class="layui-table" lay-skin="nob">
<colgroup>
<col width="370">
<col width="180">
<col width="180">
<col width="180">
<col>
</colgroup>
<tbody>
{{# layui.each(item.cities, function (i, e) {}}
<tr>
<td>{{e.cityName}}</td>
<td>{{e.confirmedCount}}</td>
<td>{{e.currentConfirmedCount}}</td>
<td>{{e.curedCount}}</td>
<td>{{e.deadCount}}</td>
</tr>
{{# }); }}
</tbody>
</table>
</div>
</div>
{{# }); }}
</script>
<script>
layui.use('laytpl', function () {
var laytpl = layui.laytpl;
var getTpl = demo.innerHTML
, view = ElementById('view');
laytpl(getTpl).render(data, function (html) {
view.innerHTML = html;
});
});
</script>
<script>
//注意：折叠⾯板依赖 element 模块，否则⽆法进⾏功能性操作
layui.use('element', function () {
var element = layui.element;
var element = layui.element;
//…
});
</script>
<!-- 引⼊所需的JS⽂件 -->
<script src="echarts.min.js"></script>
<script src="china.js"></script>
<script src="jquery-1.12.4.min.js"></script>
<script>
// 获取真实的数据
$.get("api.tianapi/txapi/ncovcity/index?key=5d4fb67d8bd16c1fd371311e334a4bd0", function (data, status) {
// console.log(data); // data就是获取到的数据，输出到控制台查看
var arr = [];
// 处理数据，成地图需要的数据结构
// 循环的过程中，向空数组中加⼊所需的内容
arr.push({
name: item.provinceShortName, // name固定
value: firmedCount, // value固定
zuixin: item.currentConfirmedCount, // 当前确诊
zhiyu: item.curedCount,
siwang: item.deadCount
});
});
// 循环结束之后，我们就得到了地图需要的数据了。数据是arr，但是还稍微有点问题
// ⼿动⾃⾏添加⼀个南海诸岛的数据
arr.push({
name: '南海诸岛', // name固定
value: '未统计', // value固定
zuixin: '未统计', // 当前确诊
zhiyu: '未统计',
siwang: '未统计'
});
// 到此为⽌，所有的数据全部处理好了。
console.log(arr);
// 下⾯开始做地图
// 1. 初始化
var myChart = echarts.ElementById('laotang'));
/
/ 2. 配置
var option = {
// 标题部分
title: {
text: '众志成城，抗击疫情',
textStyle: {
fontSize: 28
},
left: 'center', // 左右居中
subtext: '⼈⼼齐，泰⼭移',
subtextStyle: {
fontSize: 14
}
},
// 设置地图及数据
series: [{
type: 'map',
map: 'china', // 指定是中国地图
data: arr, // 设置地图中的数据
label: { // 控制默认显⽰省的名字
show: true
show: true
}
}],
tooltip: { // ⿏标悬浮提⽰
formatter: function (params) { // 允许我们⾃定义悬浮提⽰的内容
console.log(params);
// return 你需要提⽰的内容
return `累计确诊：${params.data.value}<br/>
当前确诊：${params.data.zuixin}<br/>
治愈：${params.data.zhiyu}<br/>
死亡：${params.data.siwang}<br/>
`;
}
},
visualMap: {
type: 'piecewise',
pieces: [
{ gt: 10000 }, // ⼤于10000
{ gt: 5000, lte: 10000 },
{ gt: 1000, lte: 5000 },
{ gt: 500, lte: 1000 }, // (900, 1500]
{ gt: 100, lte: 500 }, // (310, 1000]
{ gt: 10, lte: 100 }, // (200, 300]
{ gt: 0, lte: 10 }, // (0, 10]
],
inRange: {
color: ['#ffcfc3', '#eda595', '#d27b64', '#d5462a', '#a8352e', '#6a211d', '#562a2a'] }
}
};
// 3. ⽣成地图
myChart.setOption(option);
});
</script>js控制滚动条
</body>
</html>
实现效果如下：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论