可视化第一版本
<!DOCTYPE html>
<html lang="en">
<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: 3.2rem; */
height: auto;
/* 固定容器高度 */
overflow: hidden;
/* 隐藏超出容器的部分 */
position: relative;
/* 相对定位，用于绝对定位子元素 */
}
.scroll-news {
position: absolute;
/* 绝对定位，用于滚动 */
top: 0;
left: 0;
width: 100%;
/* 宽度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 id='app' >
<svg :width='width' :height='height' @mousemove='listener($event)'>
<a :href="tag.href" v-for='tag in tags'>
<text :x='tag.x' :y='tag.y' :font-size='20 * (600/(600-tag.z))' :fill-opacity='((400+tag.z)/600)'>{{tag.text}}</text>
</a>
</svg>
</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 colspan="4"><p style="width:9.6rem;">暂无数据</p></td></tr>-->
<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 id="pie_age" style="width:100%;height:100%;"></div> -->
<!--词云-->
<div class="boxall" style="height: 3.2rem">
<!-- <div class="alltitle">前二十物种</div> -->
<div class="inner">
<div class="boxnav" style="height: 3.0rem">
<div class="tagcloud">
<!-- bo大小 co颜色 -->
<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 id="qufenbu_data"style="width:90%;height:120px;margin-left:10px;"></div> -->
<!-- 滚动新闻 -->
<div class="boxall" style="height: 2.4rem; width: 100%;">
<!-- <div class="alltitle">相关文献</div> -->
<div class="allnav">
<div class="scroll-container">
<div class="scroll-news">
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="http://www.sp2000.org.cn/news/show_new_details/27b42027ff28423ab03f92e6f4062051"
target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">《中国生物名录》2022版</a>
</div>
<div class="allnav2">
<p style="text-align: right; color: orange;">--物种2000中国节点</p>
</div>
</div>
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="https://www.iplant.cn/ias/news/46" target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">外来生物入侵灾害等级是如何划分的 [1712]</a>
</div>
<div class="allnav2">
<p style="text-align: right; color: orange;">--中国外来入侵物种信息系统</p>
</div>
</div>
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="https://www.mee.gov.cn/xxgk2018/xxgk/xxgk02/202305/t20230516_1030091.html" target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">《生态环境行政处罚办法》</a>
</div>
<div class="allnav2">
<p style="text-align: right; color:orange">--中华人民共和国生态环境部</p>
</div>
</div>
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="http://env.people.com.cn/n1/2018/1029/c1010-30367771.html"
target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">生态文明建设的成效、问题与前景</a>
</div>
<div class="allnav2">
<p style="text-align: right; color:orange">--人民网</p>
</div>
</div>
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="http://theory.people.com.cn/GB/68294/417224/" target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">《关于社会主义生态文明建设论述摘编》</a>
</div>
<div class="allnav2">
<p style="text-align: right; color:orange">--中共中央文献研究室</p>
</div>
</div>
<div class="boxall">
<div class="alltitle"><i class="fas fa-fire icon"></i><a
href="https://www.gov.cn/zhengce/202401/content_6925405.htm" target="_blank"
style="font-size: 30px; font-family: 楷体, sans-serif;color:rgb(29, 124, 193)">中共中央 国务院关于全面推进美丽中国建设的意见</a>
</div>
<div class="allnav2">
<p style="text-align: right; color:orange">--新华社</p>
</div>
</div>
</div>
<div class="boxfoot"></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>
</body>
<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>
// 在页面加载完成后执行滚动
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>
标签：总结,滚动,--,每日,6.5,var,dt,document,scroll From： https://www.cnblogs.com/gyg1222/p/18234090