<!DOCTYPE html>
|
<html>
|
<head>
|
<title>L1.html</title>
|
<meta http-equiv="Expires" content="0" />
|
<meta http-equiv="Cache" content="no-cache" />
|
<meta http-equiv="Pragma" content="no-cache" />
|
<meta http-equiv="Cache-control" content="no-cache" />
|
<link href="imgs/favicon.ico" rel="icon" type="image/x-icon" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
<style>
|
html, body {
|
margin: 0;
|
padding: 0;
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
font-family: "Microsoft YaHei", sansserif;
|
}
|
|
#main {
|
width: 530px;
|
height: 100%;
|
padding: 10px;
|
box-sizing: border-box;
|
background-color: #023852;
|
}
|
|
#yulian img:hover {
|
box-sizing: border-box;
|
border-bottom: 2px solid #3DC2E1;
|
}
|
</style>
|
<script src="../js/echarts.js"></script>
|
<script>
|
function getQueryString(name) {
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
var r = window.location.search.substring(1).match(reg);
|
if (r != null) {
|
return decodeURI(r[2]);
|
};
|
return null;
|
}
|
|
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'));
|
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: ['50%', '70%'],
|
itemStyle: {
|
normal: {
|
label: {
|
show: true
|
},
|
labelLine: {
|
show: true
|
}
|
},
|
emphasis: {
|
label: {
|
show: true,
|
position: 'center',
|
textStyle: {
|
fontSize: '15',
|
fontWeight: 'bold'
|
}
|
}
|
}
|
},
|
data: [
|
{ value: 643, name: '汉族' },
|
{ value: 3, name: '少数民族' }
|
]
|
}
|
]
|
};
|
c1.setOption(option);
|
}
|
|
function init2() {
|
var c2 = echarts.init(document.getElementById('c2'));
|
var option = {
|
toolbox: {
|
show: false,
|
},
|
calculable: true,
|
color: [
|
'#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
|
'#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed',
|
'#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
|
'#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'],
|
series: [
|
{
|
name: "c2",
|
type: 'pie',
|
radius: ['50%', '70%'],
|
itemStyle: {
|
normal: {
|
label: {
|
show: true
|
},
|
labelLine: {
|
show: true
|
}
|
},
|
emphasis: {
|
label: {
|
show: true,
|
position: 'center',
|
textStyle: {
|
fontSize: '15',
|
fontWeight: 'bold'
|
}
|
}
|
}
|
},
|
data: [
|
{ value: 636, name: '农业人口' },
|
{ value: 10, name: '非农业人口' }
|
]
|
}
|
]
|
};
|
c2.setOption(option);
|
}
|
</script>
|
</head>
|
<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>
|
</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;">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;">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;">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;">30</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;">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 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; 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;">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;">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;">1000</span> <span>亩</span>
|
</div>
|
</div>
|
</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;">
|
<span style="font-size: 20px; color: white; font-weight:600;">乡村生态预览</span>
|
</div>
|
<div>
|
<div id="yulian" style="float: left; box-sizing: border-box; padding: 20px 0px 0 50px;">
|
<div style="float: left;">
|
<img src="img/a1.png" style="width: 155px; height: 83px; cursor: pointer;" title="乡村生态01" alt="" />
|
</div>
|
<div style="float: left; margin-left: 60px;">
|
<img src="img/a2.png" style="width:155px; height: 83px; cursor: pointer;" title="乡村生态02" alt="" />
|
</div>
|
</div>
|
</div>-->
|
</div>
|
</body>
|
</html>
|
