116 lines
7.7 KiB
HTML
116 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en" style="font-size: 80px;">
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>诗词阅读大数据展示</title>
|
||
<link rel="stylesheet" href="./static/index.css">
|
||
<meta http-equiv="refresh" content="20;url=/web1/web1.html">
|
||
</head>
|
||
|
||
<body style="font-size: 12px;">
|
||
<header>
|
||
<h1>诗词阅读统计</h1>
|
||
<div class="showTime"><span>2023-12-23 15:35:43</span></div>
|
||
</header>
|
||
<section class="mainbox">
|
||
<div class="column">
|
||
<div class="panel pie">
|
||
<h2>各类型诗词数</h2>
|
||
<div class="chart" _echarts_instance_="ec_1703316923334" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
<div class="panel pie1">
|
||
<h2>季节诗数量占比</h2>
|
||
<div class="chart" _echarts_instance_="ec_1703316923335" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
</div>
|
||
<div class="column">
|
||
<div class="no">
|
||
<div class="panel words">
|
||
<h2>用户评论</h2>
|
||
<div class="chart" _echarts_instance_="ec_1703316923336" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);"><div style="position: relative; width: 429px; height: 318px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="429" height="318" style="position: absolute; left: 0px; top: 0px; width: 429px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div></div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
<div class="num_box panel">
|
||
<div class="no-hd">
|
||
<ul>
|
||
<li class="counter">307,453</li>
|
||
</ul>
|
||
</div>
|
||
<div class="no-bd">
|
||
<ul>
|
||
<li>诗词阅读总数</li>
|
||
</ul>
|
||
</div>
|
||
<div class="no-hd">
|
||
<ul>
|
||
<li class="counter">33,193</li>
|
||
</ul>
|
||
</div>
|
||
<div class="no-bd">
|
||
<ul>
|
||
<li>诗词阅读Top1：杜甫</li>
|
||
</ul>
|
||
</div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
</div>
|
||
<div style="height: 49%;">
|
||
<div class="panel map">
|
||
<h2>各类别诗词阅读趋势</h2>
|
||
<div class="chart" style="height: 100%; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" _echarts_instance_="ec_1703316923339"><div style="position: relative; width: 938px; height: 386px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="938" height="386" style="position: absolute; left: 0px; top: 0px; width: 938px; height: 386px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div>
|
||
</div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="column">
|
||
<div class="panel bar">
|
||
<h2>诗词阅读榜</h2>
|
||
<div class="chart" _echarts_instance_="ec_1703316923337" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class="" style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 10px; transition: opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, visibility 0.2s cubic-bezier(0.23, 1, 0.32, 1) 0s, transform 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgb(255, 255, 255); border-width: 1px; border-radius: 4px; color: rgb(102, 102, 102); font: 14px / 21px "Microsoft YaHei"; padding: 10px; top: 0px; left: 0px; transform: translate3d(86px, 95px, 0px); border-color: rgb(255, 255, 255); pointer-events: none; visibility: hidden; opacity: 0;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="font-size:14px;color:#666;font-weight:400;line-height:1;">Model3</div><div style="margin: 10px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><div style="margin: 0px 0 0;line-height:1;"><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#00FFE3;"></span><span style="font-size:14px;color:#666;font-weight:400;margin-left:2px">上牌数</span><span style="float:right;margin-left:20px;font-size:14px;color:#666;font-weight:900">14,537</span><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div><div style="clear:both"></div></div></div></div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
<div class="panel bar1">
|
||
<h2>季节词数量</h2>
|
||
<div class="chart" _echarts_instance_="ec_1703316923338" style="user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); position: relative;"><div style="position: relative; width: 438px; height: 318px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="438" height="318" style="position: absolute; left: 0px; top: 0px; width: 438px; height: 318px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div class=""></div></div>
|
||
<div class="panel-footer"></div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script src="./static/flexible.js"></script>
|
||
<script src="./static/echarts.min.js"></script>
|
||
<script src="./static/echarts-words.js"></script>
|
||
<script src="./static/index.js"></script>
|
||
<script src="./static/china.js"></script>
|
||
<script src="./static/myMap.js"></script>
|
||
<script src="./static/jquery.js"></script>
|
||
<script src="./static/jquery.waypoints.min.js"></script>
|
||
<script src="./static/jquery.countup.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
$('.counter').countUp({
|
||
delay: 10,
|
||
time: 1000
|
||
});
|
||
</script>
|
||
|
||
<script>
|
||
(function (fn) {
|
||
fn();
|
||
setInterval(fn, 1000);
|
||
})(function () {
|
||
var dt = new Date();
|
||
document.querySelector(".showTime span").innerHTML =
|
||
dt.getFullYear() + "-" +
|
||
(dt.getMonth() + 1) + "-" +
|
||
dt.getDate() + " " +
|
||
dt.getHours() + ":" +
|
||
dt.getMinutes() + ":" +
|
||
dt.getSeconds() + "";
|
||
});
|
||
</script>
|
||
|
||
|
||
</body></html> |