部分效果展示图
html
@<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实时更新：新型冠状病毒肺炎疫情地图</title>
<link href="./css/yiqing.css" rel="stylesheet" />
<link rel="shortcut icon" href="https://m.baidu.com/se/static/img/iphone/favicon64.ico" type="image/x-icon">
<link rel="stylesheet" href="css/yangyu.css">
<!-- <link rel="stylesheet" href="css/126header.css"> -->
<link rel="stylesheet" href="css/zhouqi.css">
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.js'></script>
<script src="js/world.js"></script>
</head>
<!-- οnlοad="load()" -->
<body>
<div class="gnyqmbody">
<div class="gnyqheader">
<div class="gnyqbd">
<img src="image/02baidu.png" />
<a href="http://www.baidu.com">百度首页</a>
</div>
</div>
<div class="gnyqall">
<div class="gnyqcontent">
<div class="gnyqpart1">
<a href="http://www.baidu.com"><img src="image/05.png" /> </a>
<span> 切换地区</span>
</div>
<h3>新型冠状病毒肺炎</h3>
<h1>疫情实时大数据报告</h1>
<div class="gnyqpart2">
共有8,615,748,889人次已经浏览
</div>
</div>
<div class="alldata">
<div class="gnyqdata">
<div class="gnyqchoose">
<ul>
<li class="active"><a href="#item1">国内疫情</a></li>
<li><a href="#item1">国外疫情</a></li>
<li><a href="#item2">实时播报</a></li>
<!-- <a href="#item1" class="active">国内疫情</a>
<a href="#item1">国外疫情</a>
<a href="#item1">实时播报</a> -->
</div>
<div class="gnyqdata1">
<div class="gnyqdata11">
<div class="gnyq">国内疫情</div>
<div class="gnyqdata112">
<div class="sjgxz">数据更新至 <span class="sjgxtime"></span></div>
<div class="sjsm">数据说明<span><img src="image/06.png" /> </span></div>
</div>
<div class="gnyqjtsj">
<div class="part" data-txt='现有确诊为存量数据.
计算方法为:现有确诊数=累计确诊数-累计治愈数-累计死亡数.'>
<div>现有确诊<span><img src="image/06.png" /> </span></div>
<div class="one1"></div>
<div>昨日<span class="two1"></span> </div>
</div>
<div class="part" data-txt="新冠病毒无症状感染者（以下简称无症状）是指无相关临床症状，如发热、咳嗽、咽痛等可自我感知或可临床识别的症状与体征，但呼吸道等标本新冠病毒病原学检测阳性者。
“无症状”数据取自国家卫健委每日最新公布的“无症状感染者”数据。">
<div>无症状<span><img src="image/06.png" /> </span></div>
<div class="one2"></div>
<div>昨日<span class="two2"></span> </div>
</div>
<div class="part" data-txt="现有疑似”的“昨日新增”数据取自国家卫健委每日最新公布的“新增疑似病例数”，由于存在疑似病例解除的情况，
所以不能通过两日的“现有疑似病例”直接相减得到。">
<div>现有疑似<span><img src="image/06.png" /> </span></div>
<div class="one3"></div>
<div>昨日<span class="two3"></span> </div>
</div>
<div class="part">
<div>现有重症</div>
<div class="one4" style="color:#3a597f;"></div>
<div>昨日<span class="two4" style="color:#3a597f;"></span> </div>
</div>
</div>
<div class="gnyqjtsj">
<div class="part">
<div>累计确诊</div>
<div class="one5" style="color: #c40000;"></div>
<div>昨日<span class="two5" style="color: #c40000;"></span> </div>
</div>
<div class="part">
<div>境外输入</div>
<div class="one6" style="color:#3a597f;"></div>
<div>昨日<span class="two6" style="color:#3a597f;"></span> </div>
</div>
<div class="part">
<div>累计治愈</div>
<div class="one7" style="color:#46aaaa;"></div>
<div>昨日<span class="two7" style="color:#46aaaa"></span> </div>
</div>
<div class="part">
<div>累计死亡</div>
<div class="one8" style="color: #32324c;"></div>
<div>昨日<span class="two8" style="color: #32324c;"></span> </div>
</div>
```html
```html
```html
</div>
</div>
</div>
</div>
<!-- -->
<div class="zqchengshi">
<h2>
<span class="index">
<img src="image/plane.png" alt="">
<span>城市疫情速报</span>
</span>
</h2>
<!-- 数据显示和接入 -->
<!-- 标题 -->
<table class="table-chengshi">
<tr>
<th>地区</th>
<th>新增</th>
<th>现有</th>
</tr>
</table>
<div class="btn" onclick="more()">查看全部<img src="image/more.svg" alt=""
style="width: 4.5px;background-size: 6px 11px;position: relative; ;">
</div>
</div>
<!-- 国内各个地区统计汇总 -->
<div id="quezhen">
<div class="btn">
<button class="current">现有确诊</button>
<button class="">累计确诊</button>
</div>
<div id="main" class="map jiegou current"></div>
<div id="main2" class="map jiegou"></div>
<div id="zhexian">
<div id="main3" class="jiegou zhexian current"></div>
<div id="main4" class="jiegou zhexian"></div>
</div>
<div class="btn2">
<button class="current">新增确诊分布</button>
<button>现有无症状分布</button>
</div>
<div id="tubiao3">
<div id="main5" class="jiegou tubiao current">1月确诊人数增长</div>
<div id="main6" class="jiegou tubiao ">死亡人数</div>
</div>
<div class="btn3">
<button class="current">1月确诊人数增长</button>
<button>死亡人数</button>
</div>
<div class="zqguonei">
<!-- display: flex; -->
<div class="guoneiyiqing" style="margin-bottom: 0.5rem; justify-content: flex-start;">
国内各地区疫情统计汇总<img src="image/question.png" alt=""></div>
<div class="xiao">7:00-10:00为更新高峰，数据若滞后敬请谅解</div>
<!-- 获取实时数据2 -->
<table class="table-guonei">
<tr>
<th>疫情地区</th>
<th onclick="changeSort(this)">新增 <span></span></th>
<th onclick="changeSort(this)"> 现有<span></span></th>
<th onclick="changeSort(this)">累计<span></span></th>
<th onclick="changeSort(this)">治愈<span></span></th>
<th onclick="changeSort(this)">死亡<span></span></th>
</tr>
</table>
<div class="btnn" onclick="anmore()">查看全部<img src="image/more.svg" alt=""
style="width: 4.5px;background-size: 6px 11px;position: relative; ;">
</div>
<!-- 获取实时数据 连接后端接口 -->
</div>
<div id="item1">
<div class="gnyq" style="float:left;text-indent: 9px;">国外疫情</div>
<div class="gnyqdata112" style="float: left;text-indent: 9px;">
<div class="sjgxz" >数据更新至 <span class="sjgxtime"></span></div>
<div class="sjsm">数据说明<span><img src="image/06.png" /> </span></div>
</div>
<div class="gnyqjtsj">
<div class="part">
<div>累计确诊</div>
<div class="one5" style="color: #c40000;"></div>
<div>昨日<span class="two5" style="color: #c40000;"></span> </div>
</div>
<div class="part">
<div>境外输入</div>
<div class="one6" style="color:#3a597f;"></div>
<div>昨日<span class="two6" style="color:#3a597f;"></span> </div>
</div>
<div class="part">
<div>累计治愈</div>
<div class="one7" style="color:#46aaaa;"></div>
<div>昨日<span class="two7" style="color:#46aaaa"></span> </div>
</div>
<div class="part">
<div>累计死亡</div>
<div class="one8" style="color: #32324c;"></div>
<div>昨日<span class="two8" style="color: #32324c;"></span> </div>
</div>
</div>
<div id="container" class="chart-container" style="width:780px; height:550px;"></div>
<script>
// 所有的脚本代码都写在script标签里
var chart_container = echarts.init(document.getElementById('container'), 'white', { renderer: 'canvas' });
// var option代表定义一个名为option的变量，后面花括号里的代表我们需要作图的参数设置
var option_container = {
// 默认的颜色数组 （如果不明确设置每个数据项的颜色，则会采用默认的数组
// 此处的颜色为十六进制表示，也可以使用rgb来表示。简单地理解就是一串字符就代表一个颜色，挑选喜欢的颜色可以自行搜索颜色
"color": ["#ac6767", "#1d953f", "#6950a1", "#918597"],
"series": [
{
// 图标类型为 地图
"type": "map",
"name": "test",
"label": {
"show": false,
"position": "top",
"margin": 8
},
"mapType": "world", // 地图类型为 世界地图
// data里的每一个{}中，是一项数据整体，标明了该项数据的名称，值，以及颜色等参数。注意：此处的字符串需要加双引号""(输入法切换至英文状态)
"data": [
{
// ItemStyle 中设置每一个数据项的颜色
"name": "United States", "value": 43,
'itemStyle': { 'color': "#c23531" }
},
{
"name": "Japan", "value": 17, // 注意项与项之间的逗号
'itemStyle': { 'color': "#CD8500" }
},
{
"name": "France", "value": 7,
'itemStyle': { 'color': "#EE2C2C" }
},
{
"name": "Italy", "value": 6,
'itemStyle': { 'color': "#918597" }
},
{
"name": "Canada", "value": 5,
'itemStyle': { 'color': "#bda29a" }
},
{
"name": "United Kingdom", "value": 4,
'itemStyle': { 'color': "#6950a1" }
},
{
"name": "Spain", "value": 4,
'itemStyle': { 'color': "#1d953f" }
},
{
"name": "Holland", "value": 4,
'itemStyle': { 'color': "#2f4554" }
},
{
"name": "Belgium", "value": 3,
'itemStyle': { 'color': "#EEAD0E" }
}
, {
"name": "Germany", "value": 2,
'itemStyle': { 'color': "#607B8B" }
},
{
"name": "Austria", "value": 2,
'itemStyle': { 'color': "#5CACEE" }
},
{
"name": "Switzerland", "value": 1,
'itemStyle': { 'color': "#4EEE94" }
},
{
"name": "Poland", "value": 1,
'itemStyle': { 'color': "#8DEEEE" }
},
{
"name": "Chile", "value": 1,
'itemStyle': { 'color': "#B23AEE" }
},
],
"roam": true,
"zoom": 1,
// 去除各个国家上的小红点
"showLegendSymbol": false,
}
],
// 鼠标悬浮，单击产生的效果（在网页上可以动态显示）
"tooltip": {
"show": true,
"trigger": "item",
"triggerOn": "mousemove|click",
"axisPointer": {
"type": "line"
},
"textStyle": {
"fontSize": 14
},
"borderWidth": 0
}
};
chart_container.setOption(option_container);
</script>
</div>
<div id="item2" style="height: 500px;background-color: lightcyan;text-align: center;">此处为实时播报版块
</div>
</div>
</div>
</div>
<!-- //图片样式 -->
<!-- <script src="./js/yiqing.js"></script> -->
<script src="js/china.js"></script>
<script src="js/yangyu.js"></script>
<!-- <script src="js/zhouqi.js"></script> -->
* {
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
/* 取消下划线 */
text-decoration: none;
}
.zhouqi{
width: 780px;
border: 1px solid #000;
margin-left: auto;
margin-right: auto;
}
.zqchengshi{
padding: 20px;
}
/*数据1城市疫情速报字体和样式*/
.guonei span{
padding: 0;
margin: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-family: inherit;
font-size: 100%
}
.zqguonei p{
font-size: .8125rem;
height: .8125rem;
line-height: .8125rem;
}
/*整个div的样式*/
.index{
/*设置距离上一个div的样式*/
line-height: 1rem
}
/* 图片大小 */
.index img{
vertical-align: middle;
display: inline-block;
width: 19px;
height: 21px;
/* background-size: 1rem 1rem; */
background-repeat: no-repeat;
margin-right: -9px;
}
/* 文字大小和边距 */
.index span{
line-height: 1rem;
height: 1rem;
display: inline-block;
font:16px Arial;
font-weight: 600;
color: #000000;
}
/* 数据的样式 */
.zqchengshi table tr th{
width: 740px;
height: 40px;
border-collapse:collapse;
background-color: rgb(231, 231, 231);
color: #555555;
font: 13px Arial;
padding: 0px 0px 0px 8px;
font-weight: 600;
}
/* .zqchengshi table tr th:nth-of-type(0){width:296px;} */
.table-chengshi tr td
{
border-bottom:0.5px solid #f1f1f1;
}
.table-chengshi tr td:nth-of-type(1){
color:#00BEC7;
font: 16px Arial;
margin: 0px 1px 0px 0px;
font-weight: 600;
}
.table-chengshi tr td:nth-of-type(2){
color: #2E7BE6;
font: 16px Arial;
margin: 0px 1px 0px 0px;
font-weight: 600;
}
.table-chengshi tr td:nth-of-type(3)
{
color: #555555;
font: 16px Arial;
margin: 0px 1px 0px 0px;
font-weight: 600;
}
/* 查看更多的样式 */
.btn{
text-align: center;
}
.btn img{
transform: rotate(90deg);/*旋转90*/
margin: 0px 0px 0px 4.5px;
}
/* 国内各个地区样式 */
.zqguonei{
padding: 20px;
}
/* 图片样式 */
.guoneiyiqing img{
line-height: .8125rem;
vertical-align: middle;
width: .8125rem;
height: .8125rem;
background-size: 100% 100%;
display: inline-block;
margin-bottom: 0px;
}
/* 文字样式 */
.xiao{
line-height: 1rem;
color: #999;
font: 13px Arial;
padding: 0 0 10px 0;
}
/* 表头样式
.table-chengshi .table-guonei{
height: 50px;
line-height: 50px;
} */
/* /// */
/* 数据样式 */
.table-guonei tr td
{
border-bottom:0.5px solid #f1f1f1;
}
/* 标题样式 */
.zqguonei table tr th{
width: 740px;
height: 30px;
border-collapse:collapse;
background-color: rgb(231, 231, 231);
color: #555555;
font: 13px Arial;
padding: 0px 0px 0px 8px;
font-weight: 600;
}
.table-guonei tr td:nth-of-type(1){
background-color: #00bec9;
color: #fff;
font: 13px Arial;
margin: 0px 1px 0px 0px;
font-weight: 600;
text-align: center;
}
.table-guonei tr td{
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
}
.table-guonei tr td:nth-of-type(2){
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
}
/* .table-guonei tr td:nth-of-type(3){
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
}
.table-guonei tr td:nth-of-type(4){
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
}
.table-guonei tr td:nth-of-type(5){
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
}
.table-guonei tr td:nth-of-type(6){
color: #555555;
font: 13px Arial;
text-align: center;
background-color: #F5F6F7;
} */
.btnn{
text-align: center;
}
.btnn img{
transform: rotate(90deg);/*旋转90*/
margin: 0px 0px 0px 4.5px;
}
.table-guonei span{
width: 15px;
height: 15px;
display: inline-block;
background: url(../image/sort.png) no-repeat;
background-size: contain;
margin-left: 4px;
}
span.top{
background: url(../image/sort-up.png)no-repeat;
width: 15px;
height: 15px;
display: inline-block;
background-size: contain;
}
span.bottom{
background: url(../image/sort-down.png)no-repeat;
width: 15px;
height: 15px;
display: inline-block;
background-size: contain;
}
`js
``var Alldata;
$.ajax({
url: 'https://tianqiapi.com/api?version=epidemic&appid=23035354&appsecret=8YvlPNrz',
success: function (response) {
Alldata = response;
var area = response.data.area;
var st = ''
//插入数据1
for (var i = 0; i < 4; i++) {
st += `
<tr>
<td >${area[i].provinceName}</td>
<td>${area[i].provinceCompare.confirmAdd}</td>
<td>${area[i].currentConfirmedCount}</td>
</tr>`
}
$('.table-chengshi').html($('.table-chengshi').html() + st)
//插入数据2
var str = ''
for (var i = 0; i < 11; i++) {
str += `
<tr>
<td>${area[i].provinceName}</td>
<td>${area[i].provinceCompare.confirmAdd}</td>
<td>${area[i].currentConfirmedCount}</td>
<td>${area[i].confirmedCount}</td>
<td>${area[i].curedCount}</td>
<td>${area[i].deadCount}</td>
</tr>`
}
$('.table-guonei').html($('.table-guonei').html() + str)
}
})
//选择第一个展示全部
function more() {
var area = Alldata.data.area;
var ms = '';
for (var i = 0; i < area.length - 1; i++) {
ms += `
<tr>
<td >${area[i].provinceName}</td>
<td>${area[i].provinceCompare.confirmAdd}</td>
<td>${area[i].currentConfirmedCount}</td>
</tr>`
}
$('.table-chengshi').html($('.table-chengshi').html() + ms)
}
//选择第二个展示
function anmore() {
var area = Alldata.data.area;
var s = ''
for (var i = 0; i < area.length - 1; i++) {
s += `
<tr>
<td>${area[i].provinceName}</td>
<td>${area[i].provinceCompare.confirmAdd}</td>
<td>${area[i].currentConfirmedCount}</td>
<td>${area[i].confirmedCount}</td>
<td>${area[i].curedCount}</td>
<td>${area[i].deadCount}</td>
</tr>`
}
$('.table-guonei').html($('.table-guonei').html() + s)
$('.btnn').html('收起');
}
//点击出现图片
var state=false
// var body=document.body.nextElementSibling
function changeSort(_this){
var area = Alldata.data.area;
var span=_this.children[0]
console.log(span);
if(!state){
span.classList.add('top')
span.classList.remove('bottom')
}
else{
span.classList.remove('top')
span.classList.add('bottom')
}
state=!state/*点击他切换他*/
}
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
