<!DOCTYPE html>
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<script th:src="@{${pubzyWebRoot} + 'media/js/jquery-1.11.1.js'}"></script>
|
<script th:src="@{${pubzyWebRoot} + 'echarts/echarts.min-3.0.js'}" type="text/javascript"></script>
|
|
<script type="text/javascript">
|
$(function () {
|
changeEcharts("#shengfen");
|
changeQYEcharts("#nianfen");
|
});
|
|
function changeQYEcharts(obj) {
|
var cdData; //减少
|
var zzbData; //增加
|
if ($(obj).val() == "1990-2000") {
|
cdData = [0.51,2.83,0.18,0];
|
zzbData = [16.85,18.35,12.95,4.28];
|
AXoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "2000-2005") {
|
cdData = [0.69,0.70,0.03,0];
|
zzbData = [21.28,97.27,131.36,12.81];
|
AXoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "2005-2010") {
|
cdData = [0.33,1.92,0.28,0];
|
zzbData = [268.17,178.64,70.61,114.70];
|
AXoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "2010-2014") {
|
cdData = [0.26,0.36,0.04,0.03];
|
zzbData = [50.12,181.08,109.66,102.42];
|
AXoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "2014-2017") {
|
cdData = [0,0,0,0];
|
zzbData = [13.01,18.42,11.84,7.10];
|
AXoption(cdData, zzbData);
|
}
|
}
|
|
function changeEcharts(obj) {
|
// var yyData; //
|
var hkData; //河口
|
var rgData; //人工
|
var zrData; //自然
|
if ($(obj).val() == "河北省") {
|
hkData = [3.41,3.37,3.37,3.37];
|
rgData = [405.41,547.67,609.68,618.39];
|
zrData = [78.46,62.96,51.93,50.51];
|
AXCDoption(hkData, rgData,zrData);
|
}
|
if ($(obj).val() == "辽宁省") {
|
hkData = [48.11,46.36,43.94,43.94];
|
rgData = [1400.65,1564.6,1700.84,1735.36];
|
zrData = [544.7,424.66,399.21,394.49];
|
AXCDoption(hkData, rgData,zrData);
|
}
|
if ($(obj).val() == "山东省") {
|
hkData = [0,0,0,0];
|
rgData = [652.65,725.82,810.8,804.3];
|
zrData = [493.97,437.88,391.99,371.42];
|
AXCDoption(hkData, rgData,zrData);
|
}
|
if ($(obj).val() == "天津市") {
|
hkData = [0,0,0,0,0,0];
|
rgData = [165.69,243.5,295.68,303.29];
|
zrData = [0,0,0,0,0,0];
|
AXCDoption(hkData, rgData,zrData);
|
}
|
}
|
|
|
function AXCDoption(hkData, rgData,zrData) {
|
var divxzqh = document.getElementById("div_AXCD");
|
var axcd = echarts.init(divxzqh);
|
var AXCDoption = {
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params){
|
var nameval = params[0].name + '年 <br/>';
|
for(var i=0;i<params.length;i++) {
|
nameval += params[i].seriesName + ' : ' + params[i].value + '千米 <br/>';
|
}
|
return nameval;
|
// return params[0].name + '年 <br/>'
|
// + params[0].seriesName + ' : ' + params[0].value + '千米 <br/>'
|
// + params[1].seriesName + ' : ' + params[1].value + '千米 <br/>'
|
// + params[2].seriesName + ' : ' + (params[2].value + '千米');
|
}
|
},
|
title : {
|
text: '岸线统计',
|
x:'center',
|
textStyle:{
|
fontWeight:"normal",
|
color: "#008acd"
|
}
|
},
|
grid:{width:'280px',height:'130px',y:'70',x:'60',x2:'60'},
|
legend: {
|
data: ['河口', '人工','自然'],
|
x: 'center', y: 35, show: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['2005','2010', '2014', '2017'],
|
splitLine: {show: false}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
name: '长度',
|
axisLabel: {
|
formatter: '{value}'
|
},
|
splitLine: {show: false}
|
}
|
],
|
series: [
|
{
|
name: '河口',
|
type: 'line',
|
data: hkData
|
},
|
{
|
name: '人工',
|
type: 'line',
|
data: rgData
|
},
|
{
|
name: '自然',
|
type: 'line',
|
data: zrData
|
}
|
]
|
};
|
axcd.setOption(AXCDoption);
|
}
|
|
//岸线长度
|
function AXoption(cdData, zzbData) {
|
var divxzqh = document.getElementById("div_AX");
|
var axcd = echarts.init(divxzqh);
|
var AXCDoption = {
|
tooltip: {
|
trigger: 'axis',
|
formatter: function (params){
|
var nameval = params[0].name + ' <br/>';
|
for(var i=0;i<params.length;i++) {
|
nameval += params[i].seriesName + ' : ' + params[i].value + '% <br/>';
|
}
|
return nameval;
|
}
|
},
|
title : {
|
text: '区域变化统计',
|
x:'center',
|
textStyle:{
|
fontWeight:"normal",
|
color: "#008acd"
|
}
|
},
|
color: [ '#C1232B','#59B1F0'],
|
grid:{width:'280px',height:'130px',y:'70',x:'60',x2:'60'},
|
legend: {
|
data: ['增加', '减少'],
|
x: 'center', y: 35, show: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['河北省', '辽宁省', '山东省', '天津市'],
|
splitLine: {show: false}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
name: '变化率',
|
axisLabel: {
|
formatter: '{value} %'
|
},
|
splitLine: {show: false}
|
}
|
],
|
series: [
|
{
|
name: '增加',
|
type: 'bar',
|
data: zzbData
|
},
|
{
|
name: '减少',
|
type: 'bar',
|
data: cdData
|
}
|
]
|
};
|
axcd.setOption(AXCDoption);
|
}
|
</script>
|
</head>
|
<body style="margin: 0px;">
|
<div style="margin-top: 10px;">
|
<select class="col-sm-3" id="nianfen" onchange="changeQYEcharts(this);" style="position: absolute;right: 15px;top: 15px;z-index: 1;">
|
<option value="1990-2000">1990-2000</option>
|
<option value="2000-2005">2000-2005</option>
|
<option value="2005-2010">2005-2010</option>
|
<option value="2010-2014">2010-2014</option>
|
<option value="2014-2017">2014-2017</option>
|
</select>
|
<div id="div_AX" style="width:400px; height:225px;"></div> <!--行政区划-->
|
</div>
|
|
<div style="margin-top: 10px;margin-bottom: 10px;">
|
<select class="col-sm-3" id="shengfen" onchange="changeEcharts(this);" style="position: absolute;right: 15px;top: 255px;z-index: 1;">
|
<option value="河北省">河北省</option>
|
<option value="辽宁省">辽宁省</option>
|
<option value="山东省">山东省</option>
|
<option value="天津市">天津市</option>
|
</select>
|
<div id="div_AXCD" style="width:400px; height:225px;"></div>
|
</div>
|
<label style="margin-left: 10px;">图例：</label><br />
|
<img src="/image/QuYuBianHuaTuLi.png" style="margin-left: 10px;"/>
|
|
</body>
|
</html>
|
