期末大作业基于JavaScript的疫情数据可视化分析系统项目源码.zip

共74个文件

js：33个

json：26个

css：4个

版权申诉

javascript

期末大作业

5星 · 超过95%的资源 4 浏览量 2022-06-13 07:45:52 上传评论 19 收藏 2.04MB ZIP 举报

资源详情

资源评论

资源推荐

收起资源包目录

疫情数据可视化分析系统.zip （74个子文件）

COVID-19-master

css

我国.css 6KB

海外.css 6KB

概括.css 5KB

热搜.css 7KB

js-Global

china-map.js 136KB

echarts.min.js 727KB

jquery.ba-resize.min.js 1KB

test1.js 22KB

world.js 987KB

test0.js 6KB

flexible.js 1KB

test2.js 6KB

jquery.js 82KB

test3.js 7KB

china_json

chinaTotal.json 316B

test2.json 684B

test0.json 232B

test5.json 17KB

test6.json 12KB

test1.json 3KB

test4.json 10KB

test3.json 43KB

Overseas.html 8KB

js-China

mybmap.js 262B

bmap.min.js 5KB

test4.js 6KB

test1.js 27KB

test6.js 6KB

test0.js 5KB

test2.js 4KB

china.js 136KB

test5.js 9KB

test3.js 7KB

js-Overseas

test7.js 4KB

test4.js 8KB

test1.js 7KB

test6.js 22KB

test0.js 11KB

test2.js 8KB

test8.js 7KB

echarts-liquidfill.js 351KB

test5.js 4KB

test3.js 23KB

js-TopSearch

echarts.min.js 367KB

test4.js 4KB

roll.js 287B

global_json

test2.json 474B

test0.json 408B

global_total.json 176B

test1.json 2.3MB

test3.json 22KB

images

火.png 7KB

旗子 (1).png 4KB

小米兰亭.ttf 855KB

laba.gif 17KB

allfull_icon.png 8KB

演示悠然小楷.ttf 16KB

favicon.ico 58KB

index.html 6KB

TopSearch.html 7KB

China.html 8KB

topSearch_json

TopSearch1.json 29KB

TopSearch3.json 5KB

test4.json 45KB

TopSearch4.json 5KB

TopSearch2.json 40KB

overseas_json

overseasTotal.json 207B

test2.json 2.85MB

test0.json 18KB

test5.json 580B

test6.json 35KB

test1.json 10KB

test4.json 542B

test3.json 12KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" /> <title>海外疫情信息</title> <link rel="stylesheet" href="css/海外.css" /> <script src="js-Global/jquery.js"></script> </head> <body> <header> <div class="line1"></div> <h1>疫情信息可视化展示系统</h1> <div class="line2"></div> <div class="showTime">当前时间：</div> <script> var t = null; t = setTimeout(time, 1000); //開始运行 function time() { clearTimeout(t); //清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.getMonth() + 1; var day = dt.getDate(); var h = dt.getHours(); //获取时 var m = dt.getMinutes(); //获取分 var s = dt.getSeconds(); //获取秒 document.querySelector(".showTime").innerHTML = "当前时间：" + y + "年" + mt + "月" + day + "日" + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script> <ul> <li><a class="menu" id="a_1" href="Global.html">疫情概括</a></li> <li><a class="menu" id="a_2" href="China.html">我国疫情</a></li> <li><a class="menu" id="a_3" href="Overseas.html" style="background-color: #111;">海外疫情</a></li> <li><a class="menu" id="a_4" href="TopSearch.html">疫情热搜</a></li> </ul> <script> </script> </header> <section class="deputybox1"> <div class="column"> <div class="panel _0"> <h2> 累计确诊：<span class="big_span" style="color: #CD2626;"> <span id='a'></span> <span class="small_span">昨日：<span id='a1'></span> </span> </span>                       现有确诊：<span class="big_span" style="color: #cccc00;"> <span id='b'></span> <span class="small_span">昨日：<span id='b1'></span> </span> </span>                       治愈人数：<span class="big_span" style="color: seagreen;"> <span id='d'></span> <span class="small_span">昨日：<span id='d1'></span> </span> </span>                       死亡人数：<span class="big_span" style="color: #FAF0E6;"> <span id='c'></span> <span class="small_span">昨日：<span id='c1'></span> </span> </span> </h2> <script> function overseasTotal(result) { $("#a").html(result[0].confirmInteger); $("#b").html(result[0].nowConfirmInteger); $("#c").html(result[0].deadInteger); $("#d").html(result[0].healInteger); $("#a1").html(result[0].confirmAddInteger); if (result[0].confirmAddInteger) { $("#a1").html('+' + result[0].confirmAddInteger); } $("#b1").html(result[0].nowComfirmAddInteger); if (result[0].nowComfirmAddInteger) { $("#b1").html('+' + result[0].nowComfirmAddInteger); } $("#c1").html(result[0].deadCompareInteger); if (result[0].deadCompareInteger) { $("#c1").html('+' + result[0].deadCompareInteger); } $("#d1").html(result[0].healCompareInteger); if (result[0].healCompareInteger) { $("#d1").html('+' + result[0].healCompareInteger); } } </script> <div class="panel-footer"></div> </div> </div> </section> <section class="deputybox2"> <div class="column">  <div class="panel _5"> <h2 class="h2-">部分国家检测结果一览图</h2> <div id="test4" class="chart4"></div> <div class="panel-footer"></div> </div> <div class="panel _8"> <div id="test7" class="chart7"></div> <div class="panel-footer"></div> </div> </div> <div class="column">  <div class="panel _4"> <div class="change-map" id="change-map"> <div id="test3" class="chart3"></div> <ul> <li style="margin-left: 30%;"><a class='change' id='a_1' href="javascript:void(0)" onclick="test3_nowConfirm()">现有确诊</a></li> <li><a class='change' id='a_2' href="javascript:void(0)" onclick="test3_confirm()">累计确诊</a></li> </ul> </div> <div class="panel-footer"></div> </div> </div> <div class="column">  <div class="panel _6"> <h2 class="h2-">海外重点城市确诊/新增漏斗图</h2> <div id="test5" class="chart5"></div> <div class="panel-footer"></div> </div> <div class="panel _9"> <div id="test8" class="chart8"></div> <div class="panel-footer"></div> </div> </div> </section> <section class="deputybox3"> <div class="column"> <div class="panel _1">  <h2 class="h2-">海外各国疫情趋势</h2> <div id="test0" class="chart0"></div> <div class="panel-footer"></div> </div> </div> <div class="column"> <div class="panel _2"> <h2 class="h2-">海外各国治愈率/死亡率</h2> <div id="test1" class="chart1"></div> <div class="panel-footer"></div> </div> </div> </section> <div class="deputybox4"> <div class="column"> <div class="panel _7"> <h2 class="h2-">海外各国今日数据对比雷达图</h2> <div id="test6" class="chart6"></div> <div class="panel-footer"></div> </div> </div> </div> <section class="deputybox5"> <div class="column"> <div class="panel _3"> <h2 class="h2-">海外疫情变化图</h2> <div id="test2" class="chart2"></div> <div class="panel-footer"></div> </div> </div> </section> <script src="js-Global/flexible.js"></script> <script src="js-Global/echarts.min.js"></script> <script src="js-Global/world.js"></script> <script src="js-Global/jquery.ba-resize.min.js"></script> <script src="js-Overseas/echarts-liquidfill.js"></script> <script src="js-Overseas/test0.js"></script> <script src="js-Overseas/test1.js"></script> <script src="js-Overseas/test2.js"></script> <script src="js-Overseas/test3.js"></script> <script src="js-Overseas/test4.js"></script> <script src="js-Overseas/test5.js"></script> <script src="js-Overseas/test6.js"></script> <script src="js-Overseas/test7.js"></script> <script src="js-Overseas/test8.js"></script> <script src="./overseas_json/overseasTotal.json?cb=overseasTotal"></script> <script src="./overseas_json/test0.json?cb=test0"></script> <script src="./overseas_json/test1.json?cb=test1"></script> <script src="./overseas_json/test2.json?cb=test1"></script> <script src="./overseas_json/test3.json?cb=test1"></script> <script src="./overseas_json/test4.json?cb=test1"></script> <script src="./overseas_json/test5.json?cb=test1"></script> <script src="./overseas_json/test6.json?cb=test1"></script> </body> </html>