可视化第二版本代码留存
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit"> <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"> <script type="text/javascript" src="js/rem.js"></script> <link rel="stylesheet" href="css/style.css"> <link rel="icon" href="/src/views/map1/images/image.png"> <link rel="stylesheet" href="css/comon0.css"> <link rel="stylesheet" href="css/bubble.css"> <title>生态卫士</title> <style> .scroll-container { height: auto; overflow: hidden; position: relative; } .scroll-news { position: absolute; top: 0; left: 0; width: 100%; animation: scroll-up 50s linear infinite; } @keyframes scroll-up { from { top: 0; } to { top: -100%; } } </style> </head> <body style="visibility: hidden;"> <div class="container-flex" tabindex="0" hidefocus="true"> <div class="box-left"> <div class="left-top"> <div class="current-num"> <div>当前数据来源</div> <p style="font-size: medium;">物种2000中国节点</p> <p style="font-size: medium;">植物科学数据中心</p> </div> </div> <div class="left-center"> <div class="title-box"> <h6>入侵等级分析</h6> </div> <div class="chart-box pie-chart"> <div id="pie_fanzui" style="width:100%;"></div> </div> </div> <div class="left-bottom" class="select"> <div class="title-box"> <h6>入侵物种种类</h6> </div> <div class="chart-box"> <table class="table3"> <thead> <tr> <th>入侵等级</th> <th>数量</th> <th>详情</th> <th>备注</th> </th> </tr> </thead> <tbody id="tList"> <tr> <td>一级</td> <td>38</td> <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB134CB17A4E8AC1C26A8E4C0838DE9A792F576B1468B5435BFCAF13EC0DE19F2CD27C5736CE00B77A6F2" target="_blank">查看</a></td> <td>恶意入侵</td> </tr> <tr> <td>二级</td> <td>49</td> <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB1347C19519A7C52E460DD34756F632BBF118983B9C1E053075B1311F6468E4CA3500F8A6734635F80D2" target="_blank">查看</a></td> <td>严重入侵</td> </tr> <tr> <td>三级</td> <td>69</td> <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB13420FFF1B223C1513CF1CDEB0B1FF9365151F1F790197FD3754C2A265F008016E94EADA5F35A6C5397" target="_blank">查看</a></td> <td>局部入侵</td> </tr> <tr> <td>四级</td> <td>61</td> <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB134FAE44317C29D51DAA7BD6FD5BEE6CD318731B04D84C6EAB900687CBE2870F553CFCF8DFF877DA391" target="_blank">查看</a></td> <td>一般入侵</td> </tr> <tr> <td>其他</td> <td>304</td> <td><a href="https://www.iplant.cn/ias/splist?exkey=6E9C70B741D00BE5B37A064636CBB1345C601267350001389F8A375B5329B01D50D8A24A4BE829557081230F98BE7966" target="_blank">查看</a></td> <td>有待观察</td> </tr> </tbody> </table> </div> </div> </div> <div class="box-center"> <div class="center-top"> <h1><img src="/public/logo.png" style="width:55px;margin-right:20px;" />物种多样性数据分析</h1> </div> <div class="center-center"> <div class="weather-box"> <div class="data"> <p class="time" id="time">00:00:00</p> <p id="date"></p> </div> <div class="weather"> <img id="weatherImg" src="images/weather/weather_img01.png" alt=""> <div id="weather"> <p class="active">多云</p> <p>16-22℃</p> <p>天津市和平区</p> </div> </div> </div> <img src="images/line_bg.png" alt=""> <div class="select-box" style="height: 0.3rem;"> <div data-type="2"> <div class="select" tabindex="0" hidefocus="true"> <p style="color:#FFFF00;font-weight:bold;">NO.1广东： 294种</p> <p style="color:#7FFF00;font-weight:bold;">NO.2云南： 288种</p> <p style="color:#7FFFD4;font-weight:bold;">NO.3台湾： 287种</p> </div> </div> </div> </div> <div class="center-bottom"> <div class="chart-box"> <div id="china_map" style="width:100%;height:95%;"></div> </div> </div> </div> <div class="box-right"> <div class="right-top"> <div class="title-box"> <h6 id="barTitle">物种分布</h6> </div> <div class="chart-box"> <div class="boxall" style="height: 3.2rem"> <div class="inner"> <div class="boxnav" style="height: 3.0rem"> <div class="tagcloud"> <a class="b01 co01" href="#">身体霸凌</a> <a class="b02 co02" href="#">没有朋友</a> <a class="b03 co03" href="#">言语霸凌</a> <a class="b04 co04" href="#">外貌</a> <a class="b03 co05" href="#">男生居多</a> <a class="b01 co02" href="#">常感到孤独</a> <a class="b02 co03" href="#">11~14岁居多</a> <a class="b03 co04" href="#">霸凌事件频发</a> <a class="b04 co05" href="#">部分地区集中</a> <a class="b01 co03" href="#">不敢举报</a> <a class="b02 co04" href="#">隐蔽性</a> </div> </div> </div> </div> </div> </div> <div class="right-center"> <div class="title-box"> <h6>相关文献</h6> </div> <div class="chart-box pie-chart"> <div class="boxall" style="height: 2.4rem; width: 100%;"> <div class="allnav"> <div class="scroll-container"> <div class="scroll-news" id="news-container"></div> </div> </div> </div> </div> </div> <div class="right-bottom"> <div class="title-box"> <p id="switchBtn"><span class="active" data-dataType="income">种及种下统计年度变化</span></p> </div> <div> <div id="line_time" style="width:90%;height:160px;margin-left:15px;"></div> </div> </div> </div> </div> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/layer/layer.min.js"></script> <script type="text/javascript" src="js/layer/laydate/laydate.js"></script> <script type="text/javascript" src="js/echarts.min.js"></script> <script type="text/javascript" src="js/china.js"></script> <script type="text/javascript" src="js/infographic.js"></script> <script type="text/javascript" src="js/macarons.js"></script> <script type="text/javascript" src="js/shine.js"></script> <script type="text/javascript" src="js/base.js"></script> <script type="text/javascript"> $('document').ready(function () { $("body").css('visibility', 'visible'); var localData = [$('#teacher').val(), $('#start').val() + '/' + $('#end').val(), $('#leader').val()] localStorage.setItem("data", localData); }); </script> <script src="js/bubble.js"></script> <script> function fetchNews() { const proxyUrl = 'https://cors-anywhere.herokuapp.com/'; const url = 'http://www.sp2000.org.cn/news/show_new_details/27b42027ff28423ab03f92e6f4062051'; fetch(proxyUrl + url) .then(response => response.text()) .then(data => { const parser = new DOMParser(); const doc = parser.parseFromString(data, 'text/html'); const newsContainer = document.getElementById('news-container'); newsContainer.innerHTML = ''; // 清空之前的内容 doc.querySelectorAll('.boxall').forEach(item => { const titleTag = item.querySelector('.alltitle a'); const sourceTag = item.querySelector('.allnav2 p'); if (titleTag && sourceTag) { const title = titleTag.textContent.trim(); const link = titleTag.href; const source = sourceTag.textContent.trim(); const newsItem = ` <div class="boxall"> <div class="alltitle"><i class="fas fa-fire icon"></i><a href="${link}" target="_blank">${title}</a></div> <div class="allnav2"> <p>--${source}</p> </div> </div> `; newsContainer.insertAdjacentHTML('beforeend', newsItem); } }); }) .catch(error => console.error('Error fetching news:', error)); } document.addEventListener('DOMContentLoaded', function() { fetchNews(); // 初次加载时获取数据 setInterval(fetchNews, 1800000); // 每30分钟获取一次数据 }); </script> <script> // 在页面加载完成后执行滚动 document.addEventListener("DOMContentLoaded", function () { // 获取滚动新闻容器和滚动新闻元素 var scrollContainer = document.querySelector('.scroll-container'); var scrollNews = document.querySelector('.scroll-news'); // 计算滚动新闻元素的高度，用于设置滚动容器的高度 var scrollHeight = scrollNews.clientHeight; scrollContainer.style.height = scrollHeight + 'px'; }); </script> <script> /*3D标签云*/ tagcloud({ selector: ".tagcloud", //元素选择器 fontsize: 100, //基本字体大小, 单位px radius: 140, //滚动半径, 单位px 页面宽度和高度的五分之一 mspeed: "slow", //滚动最大速度, 取值: slow, normal(默认), fast ispeed: "slow", //滚动初速度, 取值: slow, normal(默认), fast direction: 0, //初始滚动方向, 取值角度(顺时针360): 0对应top, 90对应left, 135对应right-bottom(默认)... keep: false, //鼠标移出组件后是否继续随鼠标滚动, 取值: false, true(默认) 对应 减速至初速度滚动, 随鼠标滚动 }); </script> <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.getElementById("showTime").innerHTML = y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒"; t = setTimeout(time, 1000); //设定定时器，循环运行 } </script> </html>
