255 lines
11 KiB
HTML
255 lines
11 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="zh">
|
||
|
|
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
|
||
|
|
<title>贵州省主要指标趋势分析</title>
|
||
|
|
<link rel="stylesheet" href="./css/index.css">
|
||
|
|
<script src="./plug/jquery/jquery-1.12.3.min.js"></script>
|
||
|
|
<script src="./plug/echarts/echarts.min.js"></script>
|
||
|
|
<script src="./js/index.js"></script>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<!-- 标题 -->
|
||
|
|
<div class="top_box">
|
||
|
|
<div class="title_box">贵州省主要指标趋势分析</div>
|
||
|
|
<div class="title_line">
|
||
|
|
<img src="./img/title_line.png" alt="" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 主体内容 -->
|
||
|
|
<div class="container">
|
||
|
|
<!-- 左 -->
|
||
|
|
<div class="vertical vertical_left">
|
||
|
|
<div class="left left_top">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">地区生产总值趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gdp_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="left_top_map" class="map_sty">
|
||
|
|
</div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
<div class="left left_middle">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">工业趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="left_middle_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
<div class="left left_down">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">人均生产总值趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="left_down_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 中 -->
|
||
|
|
<div class="vertical vertical_middle">
|
||
|
|
<div class="middle middle_top">
|
||
|
|
<div id="middle_top_map" class="map_sty"></div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="middle middle_middle">
|
||
|
|
<div id="middle_middle_map" class="map_sty"></div>
|
||
|
|
</div> -->
|
||
|
|
<div class="middle middle_down">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">历年地区生产总值横向对比</div>
|
||
|
|
<div class="xiang_guan" title="点击查看指标相关性图表">
|
||
|
|
<img src="./img/table_icon.png" style="margin-right: 5px;margin-top: 2px;" alt="">
|
||
|
|
<a href="#modal">指标相关性</a>
|
||
|
|
</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="middle_down_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 右 -->
|
||
|
|
<div class="vertical vertical_right">
|
||
|
|
<div class="right right_top">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">第一产业增加值趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="right_top_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
<div class="right right_middle">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">第二产业增加值趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="right_middle_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
<div class="right right_down">
|
||
|
|
<!-- 图表标题 -->
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title">第三产业增加值趋势分析</div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div id="right_down_map" class="map_sty"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- 弹处框 -->
|
||
|
|
<div class="modal" id="modal">
|
||
|
|
<div class="modal-content">
|
||
|
|
<div class="modal_box">
|
||
|
|
<div class="map_title_box">
|
||
|
|
<div class="map_title" id="pertinence_title">指标相关性</div>
|
||
|
|
<div class="modal_close"><a href="#" title="关闭">X</a></div>
|
||
|
|
<div class="map_title_bg">
|
||
|
|
<img src="./img/gy_title.png" alt="">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="modal_con">
|
||
|
|
<div class="heat_map" id="heat_map"></div>
|
||
|
|
<!-- 四个角的样式 -->
|
||
|
|
<!-- <div class="map_side_sty"> -->
|
||
|
|
<div class="side_img side_left_top">
|
||
|
|
<img src="./img/left_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_left_down">
|
||
|
|
<img src="./img/left_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_top">
|
||
|
|
<img src="./img/right_top.png" alt="">
|
||
|
|
</div>
|
||
|
|
<div class="side_img side_right_down">
|
||
|
|
<img src="./img/right_down.png" alt="">
|
||
|
|
</div>
|
||
|
|
<!-- </div> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|