lincaoju.git - Gitblit

			@@ -1,7 +1,7 @@
			<!DOCTYPE html>
			<html>
			<head>
			<title>chart.html</title>
			<title>L1.html</title>
			<meta http-equiv="Expires" content="0" />
			<meta http-equiv="Cache" content="no-cache" />
			<meta http-equiv="Pragma" content="no-cache" />
			@@ -33,7 +33,6 @@
			border-bottom: 2px solid #3DC2E1;
			}
			</style>
			<script src="../js/jquery-1.11.3.min.js"></script>
			<script src="../js/echarts.js"></script>
			<script>
			function getQueryString(name) {
			@@ -45,10 +44,130 @@
			return null;
			}

			$(function () {
			init1();
			init2();
			});
			window.onload = function () {
			init3();
			init4();
			}

			function init3() {
			var c3 = echarts.init(document.getElementById('c3'));
			var option = {
			toolbox: {
			show: false,
			},
			calculable: true,
			color: [
			'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
			'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
			'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
			'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
			series: [
			{
			name: "c1",
			type: 'pie',
			//radius: ['40%', '70%'],
			radius: '90%',
			center: ['50%', '50%'],
			itemStyle: {
			normal: {
			label: {
			show: true
			},
			labelLine: {
			show: true
			}
			},
			emphasis: {
			label: {
			show: true,
			position: 'center',
			textStyle: {
			fontSize: '15',
			fontWeight: 'bold'
			}
			}
			}
			},
			data: [
			{ value: 32, name: '天然草地' },
			{ value: 20, name: '退化' },
			{ value: 30, name: '沙化' },
			{ value: 18, name: '盐渍化' }
			]
			}
			]
			};
			c3.setOption(option);
			}

			function init4() {
			var c4 = echarts.init(document.getElementById('c4'));
			var option = {
			grid: {
			left: 0,
			top: 0,
			right: 0,
			bottom: 0,
			borderWidth: 0,
			containLabel: false
			},
			title: {
			text: ' 补种类别',
			left: 'right',
			show: true,
			textStyle: {
			color: '#fff',
			fontSize: 20
			}
			},
			color: [ "#4874CB",
			'#3cb371', '#6b8e23', '#ff6347', '#7b68ee', '#00fa9a',
			'#ff00ff', '#b8860b', '#30e0e0', '#ffd700'],
			tooltip: {
			trigger: 'axis'
			},
			calculable: true,
			xAxis: [
			{
			type: 'category',
			data: ['羊草', '沙草', '紫花苜蓿'],
			splitLine: {
			show: false
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#fff',
			fontSize: 14
			}
			}
			}
			],
			yAxis: [
			{
			type: 'value',
			splitLine: {
			show: true
			},
			axisLabel: {
			show: true,
			textStyle: {
			color: '#fff',
			fontSize: 14
			}
			}
			}
			],
			series: [
			{
			name: '补种量',
			type: 'bar',
			data: [100, 500, 400]
			}
			]
			};
			c4.setOption(option);
			}

			function init1() {
			var c1 = echarts.init(document.getElementById('c1'));
			@@ -147,89 +266,66 @@
			<body>
			<div id="main">
			<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
			<span style="font-size: 20px; color: white; font-weight:600;">乡村基础数据</span>
			<span style="font-size: 20px; color: white; font-weight:600;">前德门苏木沙化草原修复区</span>
			</div>
			<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 20px 0 0 50px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>乡村总面积</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>万亩</span>
			<span>天然草地</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">113</span> <span>万亩</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>总耕地面积</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">336</span> <span>亩</span>
			<span>天然草地</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">32</span> <span>%</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>党组织数</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1.1</span> <span>个</span>
			<span>退化</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">20</span> <span>%</span>
			</div>
			</div>
			</div>
			<div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 0 0 0 50px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>自然村数</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">7</span> <span>个</span>
			<span>沙化</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">30</span> <span>%</span>
			</div>
			</div>
			</div>
			<div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 0px 0px 0 50px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box; border: 1px solid rgba(65,194,225, 0.4); height: 35px; line-height: 35px; vertical-align: central; border-bottom: none;">
			<span>  总人数：646</span><br /><br />
			</div>
			<div style="clear: both; height: 10px; width: 160px; border-left: 160px dashed #36C6FB; box-sizing: border-box; float: left;"></div>
			<div style="height: 10px; width: 150px; float: left; border-left: 150px dashed #E66B4E; box-sizing: border-box; "></div>
			<div style="color: white;">
			<span style="float: left;">男：329</span>
			<span style="float: right;">女：317</span>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>盐渍化</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">18</span> <span>%</span>
			</div>
			</div>
			</div>
			<div style="height: 180px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style="padding: 0 0px; box-sizing: border-box;">
			<div id="c1" style="width: 50%; height: 170px; float: left;"></div>
			<div id="c2" style="width: 50%; height: 170px; margin-left: -50px; float: left;"></div>
			<div id="c3" style="padding: 0px 0px; box-sizing: border-box; height: 180px; width: 100%;">
			</div>
			</div>

			<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
			<span style="font-size: 20px; color: white; font-weight:600;">乡村生态概况</span>
			<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8; margin-top:20px;">
			<span style="font-size: 20px; color: white; font-weight:600;">前德门苏木</span>
			</div>
			<div style="height: 110px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 20px 0px 0 50px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>液位</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">28.73</span> <span>M</span>
			<span>总面积</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">7554</span> <span>亩</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>瞬时流量</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6702</span> <span>A</span>
			<span>植被覆盖</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">15</span> <span>%</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>电流</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">0</span> <span>A</span>
			<span>免耕补种</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">1000</span> <span>亩</span>
			</div>
			</div>
			</div>
			<div style="height: 90px; width: 100%; float: left; background-color: #023852; padding-left: 10px; box-sizing: border-box;">
			<div style=" float: left; box-sizing: border-box; padding: 0px 0px 0 50px;">
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>土壤水分</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">90</span> <span>%</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>湿度</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">6</span> <span>ppm</span>
			</div>
			<div style="color: white; width: 150px; float: left; box-sizing: border-box;">
			<span>COD</span><br /><br />
			<span style="font-size: 25px; color: #41C2E1; font-weight: bolder;">100</span> <span>mg</span>
			</div>
			<div style="height: 180px; width: 100%; float: left; background-color: #023852; margin-top: 20px; margin-left: -20px; box-sizing: border-box;">
			<div id="c4" style="padding: 0px 0px; box-sizing: border-box; height: 130%; width: 115%;">
			</div>
			</div>

			<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
			<!--<div style="height: 35px; width: 100%; float: left; line-height: 35px; border-left: solid 5px #2186C8; background-color: #023852; padding-left: 10px; box-sizing: border-box; border-bottom: dashed 1px #2186C8;">
			<span style="font-size: 20px; color: white; font-weight:600;">乡村生态预览</span>
			</div>
			<div>
			@@ -241,7 +337,7 @@
			<img src="img/a2.png" style="width:155px; height: 83px; cursor: pointer;" title="乡村生态02" alt="" />
			</div>
			</div>
			</div>
			</div>-->
			</div>
			</body>
			</html>