<!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");
|
});
|
|
function changeEcharts(obj) {
|
var cdData;
|
var zzbData;
|
if ($(obj).val() == "辽宁") {
|
cdData = [2114,2141,2147,2110,2205,2345,2381];
|
zzbData = [0,1.28,0.28,-1.72,4.50,6.35,1.54];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "河北") {
|
cdData = [423,455,482,485,605,653,654];
|
zzbData = [0,7.57,5.93,0.62,24.74,7.93,0.15];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "天津") {
|
cdData = [148,154,166,153,244,296,300];
|
zzbData = [0,4.05,7.79,-7.83,59.48,21.39,1.35];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "山东") {
|
cdData = [3219,3269,3295,3345,3313,3368,3379];
|
zzbData = [0,1.55,0.79,1.52,-0.96,1.66,0.33];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "江苏") {
|
cdData = [823,837,920,889,946,976,998];
|
zzbData = [0,1.70,9.92,-3.37,6.41,3.17,2.25];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "上海") {
|
cdData = [188,203,214,211,213,215,215];
|
zzbData = [0,7.98,5.42,-1.40,0.95,0.94,0];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "浙江") {
|
cdData = [2116,2174,2218,2218,2204,2154,2149];
|
zzbData = [0,2.74,2.02,0,-0.63,-2.27,-0.23];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "福建") {
|
cdData = [3474,3469,3475,3486,3445,3442,3442];
|
zzbData = [0,-0.14,0.17,0.32,-1.18,-0.09,0];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "广东") {
|
cdData = [3847,3943,3980,4114,4003,4013,4015];
|
zzbData = [0,2.50,0.94,3.37,-2.70,0.25,0.05];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "香港") {
|
cdData = [384,396,392,396,392,392,392];
|
zzbData = [0,3.13,-1.01,1.02,-1.01,0,0];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "澳门") {
|
cdData = [18,18,19,21,19,19,19];
|
zzbData = [0,0,5.56,10.53,-9.52,0,0];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "广西") {
|
cdData = [1602,1618,1624,1629,1614,1634,1634];
|
zzbData = [0,1,0.37,0.31,-0.92,1.24,0];
|
AXCDoption(cdData, zzbData);
|
}
|
if ($(obj).val() == "全国") {
|
cdData = [18356,18677,18932,19057,19203,19507,19578];
|
zzbData = [0,1.75,1.37,0.66,0.77,1.58,0.36];
|
AXCDoption(cdData, zzbData);
|
}
|
}
|
|
//岸线长度
|
function AXCDoption(cdData, zzbData) {
|
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++) {
|
if(params[i].seriesName == '长度') {
|
nameval += params[i].seriesName + ' : ' + params[i].value + '千米 <br/>';
|
}
|
if(params[i].seriesName == '增长率') {
|
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 + '%');
|
}
|
},
|
title : {
|
text: '中国大陆岸线长度统计',
|
x:'center',
|
textStyle:{
|
fontWeight:"normal",
|
color: "#008acd"
|
}
|
},
|
color: ['#59B1F0', '#C1232B'],
|
grid:{width:'300px',height:'180px',y:'70',x:'60',x2:'60'},
|
legend: {
|
data: ['长度', '增长率'],
|
x: 'center', y: 35, show: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: ['1990', '2000', '2005', '2008', '2010', '2014', '2017'],
|
splitLine: {show: false}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
name: '长度（千米）',
|
axisLabel: {
|
formatter: '{value}'
|
},
|
splitLine: {show: false}
|
},
|
{
|
type: 'value',
|
name: '增长率',
|
axisLabel: {
|
formatter: '{value} %'
|
},
|
splitLine: {show: false}
|
}
|
],
|
series: [
|
{
|
name: '长度',
|
type: 'bar',
|
data: cdData
|
},
|
{
|
name: '增长率',
|
type: 'line',
|
yAxisIndex: 1,
|
data: zzbData
|
}
|
]
|
};
|
axcd.setOption(AXCDoption);
|
}
|
</script>
|
</head>
|
<body style="margin: 0px;">
|
<div style="margin-top: 10px;margin-bottom: 10px;">
|
<select class="col-sm-3" id="shengfen" onchange="changeEcharts(this);" style="position: absolute;right: 10px;top: 5px;z-index: 1;">
|
<option value="全国" selected="true">全国</option>
|
<option value="辽宁">辽宁</option>
|
<option value="河北">河北</option>
|
<option value="天津">天津</option>
|
<option value="山东">山东</option>
|
<option value="江苏">江苏</option>
|
<option value="上海">上海</option>
|
<option value="浙江">浙江</option>
|
<option value="福建">福建</option>
|
<option value="广东">广东</option>
|
<option value="香港">香港</option>
|
<option value="澳门">澳门</option>
|
<option value="广西">广西</option>
|
</select>
|
<div id="div_AXCD" style="width:420px; height:280px;"></div> <!--行政区划-->
|
</div>
|
<label style="margin-left: 10px;">图例：</label><br />
|
<img src="/image/AnXianChangDuTuLi.jpg" />
|
</body>
|
</html>
|
