174 lines
7.5 KiB
HTML
174 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>大数据可视化系统数据分析通用模版</title>
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
<link rel="stylesheet" href="css/index.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="loading">
|
|
<div class="loadbox">
|
|
<img src="images/loading.gif" /> 页面加载中...
|
|
</div>
|
|
</div>
|
|
<div class="head">
|
|
<h1>大数据可视化系统数据分析</h1>
|
|
</div>
|
|
<div class="mainbox">
|
|
<ul class="clearfix">
|
|
<li>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="alltitle">
|
|
学前教育规模发展预测
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<div class="tab-switcher">
|
|
<div class="tab-item active" data-tab="入园数">入园数总量</div>
|
|
<div class="tab-item" data-tab="在园数">在园数总量</div>
|
|
</div>
|
|
</div>
|
|
<div class="boxnav" id="echarts01">
|
|
</div>
|
|
</div>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="title-row">
|
|
<div class="alltitle">
|
|
义务教育规模发展预测
|
|
</div>
|
|
<select class="right-content">
|
|
<option value="cz">初中</option>
|
|
<option value="gz">高中</option>
|
|
</select>
|
|
</div>
|
|
<div style="display: flex;justify-content: center;">
|
|
<div class="tab-switcher">
|
|
<div class="tab-item active" data-tab="招生数">招生数总量</div>
|
|
<div class="tab-item" data-tab="在校数">在校生总量</div>
|
|
</div>
|
|
</div>
|
|
<div class="boxnav" id="echarts02"></div>
|
|
</div>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="alltitle">
|
|
高中阶段教育规模发展预测
|
|
</div>
|
|
<div class="boxnav" id="echarts03"></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="boxall" style="height: calc(20% - .15rem)">
|
|
<ul class="row h100 clearfix">
|
|
<li class="col-6">
|
|
<div class="sqzs h100">
|
|
<p>业绩总览</p>
|
|
<h1><span>30500</span>万</h1>
|
|
</div>
|
|
</li>
|
|
<li class="col-6">
|
|
<ul class="row h100 clearfix">
|
|
<li class="col-4">
|
|
<div class="tit01">
|
|
标题名称
|
|
</div>
|
|
<div class="piebox" id="pe01"></div>
|
|
</li>
|
|
<li class="col-4">
|
|
<div class="tit01">
|
|
标题名称
|
|
</div>
|
|
<div class="piebox" id="pe02"></div>
|
|
</li>
|
|
<li class="col-4">
|
|
<div class="tit01">
|
|
标题名称
|
|
</div>
|
|
<div class="piebox" id="pe03"></div>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="boxall" style="height: calc(38% - .15rem)">
|
|
<div class="alltitle">
|
|
标题名称1
|
|
</div>
|
|
<div class="boxnav" id="echarts4"></div>
|
|
</div>
|
|
<div class="boxall" style="height: calc(42% - .15rem)">
|
|
<div class="alltitle">
|
|
标题名称2
|
|
</div>
|
|
<div class="boxnav" id="echarts2"></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="alltitle">
|
|
标题名称3
|
|
</div>
|
|
<div class="boxnav" id="echarts5"></div>
|
|
</div>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="alltitle">
|
|
标题名称
|
|
</div>
|
|
<div class="boxnav" id="">
|
|
<table border="0" cellspacing="0">
|
|
<tbody>
|
|
<tr>
|
|
<th></th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
<th>字段</th>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>8098</td>
|
|
<td>19.80%</td>
|
|
<td>22</td>
|
|
<td>368</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>7506</td>
|
|
<td>6.70%</td>
|
|
<td>22</td>
|
|
<td>339</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>3261</td>
|
|
<td>32.30%</td>
|
|
<td>10</td>
|
|
<td>325.7</td>
|
|
</tr>
|
|
<tr>
|
|
<th>字段</th>
|
|
<td>1993</td>
|
|
<td> 201%</td>
|
|
<td>10</td>
|
|
<td> 199</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="boxall" style="height: calc(33.333% - .15rem)">
|
|
<div class="alltitle">
|
|
标题名称
|
|
</div>
|
|
<div class="boxnav" id="echarts6" style="height:calc(100% - .3rem);"></div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <script type="text/javascript" src="js/echarts.min.js"></script> -->
|
|
<script type="text/javascript" src="https://gcore.jsdelivr.net/npm/echarts@6.0.0/dist/echarts.min.js"></script>
|
|
<script language="JavaScript" src="js/index.js"></script>
|
|
</body>
|
|
|
|
</html> |