var first = "", second = "", time = "",title="";
|
|
window.onload = function () {
|
first =decodeURI(getUrlParam("first"));
|
second =decodeURI(getUrlParam("second"));
|
time = decodeURI(getUrlParam("time"));
|
title = localStorage.getItem("typeName");
|
//first = "河流湿地*湖泊湿地";
|
//second = "";
|
//time = "2019";
|
GetData(first, second, time);
|
|
btnClick();
|
new CusScrollBar({
|
contentSelector: '.scroll_cont1', //滚动内容区
|
barSelector: '.scroll_bar1', //滚动条
|
sliderSelector: '.scroll_slider1' //滚动滑块
|
});
|
}
|
|
|
|
function GetData(first, second, time) {
|
var dataLegend = [];
|
var dataY1 = [];
|
var dataY2 = [];
|
var TableName =localStorage.getItem("type");
|
var TableColor =GetCmpareTable(TableName);
|
$.ajax({
|
url: "../../../Ashx/Secondcommon.ashx",
|
type: "post",
|
data: { Action: "GetAllChooseData", firstLeverl: first, secondLevel: second, timeL: time,dataTable: TableName, colorTable:TableColor },
|
dataType: "json",
|
async: false,
|
success: function (result) {
|
//单选柱子
|
if (first == "" | second == "") {
|
DanxuanChart(result);
|
} else {
|
//多选柱子
|
DuoxuanChart(result);
|
}
|
|
}
|
});
|
|
}
|
|
function DanxuanChart(chartData) {
|
var dataX = [];
|
var dataYSon = [];
|
var dataY = [];
|
var color = [];
|
var dataLegend = [];
|
var name = "";
|
var html = "<tr><td>名称</td><td>面积</td><td>时间</td></tr>";
|
$.each(chartData, function (index, value) {
|
html += "<tr style='background-color:rgb(" + value.R + "," + value.G + "," + value.B + ");'><td>" +value.Name+ "</td><td>" + parseFloat(value.Area).toFixed(2) + "</td><td>" + value.Year + "</td></tr>";
|
|
dataX.push(value.Year);
|
color.push("rgb(" + value.R + "," + value.G + "," + value.B + ")");
|
dataLegend.push(value.Name);
|
if (value.Name != name) {
|
|
if (dataYSon.length > 0) {
|
var ity = new itemY();
|
ity.name = name;
|
ity.data = dataYSon;
|
dataY.push(ity);
|
dataYSon = [];
|
dataYSon.push(parseFloat(value.Area).toFixed(2));
|
} else {
|
dataYSon.push(parseFloat(value.Area).toFixed(2));
|
}
|
name = value.Name;
|
|
} else {
|
dataYSon.push(parseFloat(value.Area).toFixed(2));
|
}
|
if (index == chartData.length - 1) {
|
var ity = new itemY();
|
ity.name = value.Name;
|
ity.data = dataYSon;
|
dataY.push(ity);
|
}
|
});
|
$(".scroll_cont1 table").empty();
|
$(".scroll_cont1 table").append(html);
|
|
color = uniq(color);
|
dataX = uniq(dataX);
|
dataLegend = uniq(dataLegend);
|
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
option = {
|
//title: {
|
// text: title,
|
// x: 'center',
|
// y: 'top',
|
|
// textStyle: {
|
// color: '#ffffff',
|
// fontWeight: 'normal',
|
// }
|
//},
|
grid:{
|
left: '2%', // 与容器左侧的距离
|
//right: '5%', // 与容器右侧的距离
|
top: '10%', // 与容器顶部的距离
|
bottom: '5%', // 与容器底部的距离
|
containLabel: true
|
},
|
color: color,
|
tooltip: {
|
trigger: 'axis',
|
confine:'hidden',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
show:false,
|
data:dataLegend
|
},
|
|
xAxis: [
|
{
|
type: 'category',
|
axisTick: { show: false },
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel : {
|
formatter: '{value}',
|
textStyle: { //改变刻度字体样式
|
color: '#fff'
|
}
|
},
|
data: dataX
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
splitLine:{
|
show:false,
|
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel : {
|
formatter: '{value}',
|
textStyle: { //改变刻度字体样式
|
color: '#fff'
|
},
|
formatter: function (value) {
|
if (parseFloat(value) > 1000000) {
|
var yz = parseFloat(value / 1000000);
|
return yz + "百万";
|
} else {
|
return value;
|
}
|
}
|
}
|
}
|
],
|
series: dataY
|
};;
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
}
|
|
function DuoxuanChart(chartData) {
|
var year = "", vname = "", pcode = "", sname = "", html = "<tr><td>名称</td><td>面积</td><td>时间</td></tr>";
|
var color = [];
|
var dataX = [];
|
var Name = [];
|
var dataY = [];
|
var DataYSon = [];
|
var DataYSon1 = [];
|
$.each(chartData, function (index, value) {
|
color.push('rgb(' + value.R + ',' + value.G + ',' + value.B + ')');
|
Name.push(value.Name);
|
dataX.push(value.Year);
|
html += "<tr style='background-color:rgb(" + value.R + "," + value.G + "," + value.B + ");'><td >" + value.Name + "</td><td>" + parseFloat(value.Area).toFixed(2) + "</td><td>" + value.Year + "</td></tr>";
|
|
if (value.Type == "parent" & value.Name != vname) {
|
//如果有子项，先添加
|
if (DataYSon1.length > 0) {
|
if (value.Code.substring(0, 2) == pcode) {
|
var ity = new ItemDY();
|
ity.name = sname;
|
ity.stack = vname,
|
// ity.barWidth = 5;
|
ity.data = DataYSon1;
|
dataY.push(ity);
|
} else {
|
var ity = new ItemDY();
|
ity.name = sname;
|
ity.stack = sname,
|
// ity.barWidth = 5;
|
ity.data = DataYSon1;
|
dataY.push(ity);
|
}
|
DataYSon1 = [];
|
}
|
|
|
if (DataYSon.length > 0) {
|
var ity = new ItemDYP();
|
ity.name = vname;
|
//ity.barWidth = 20;
|
ity.data = DataYSon;
|
dataY.push(ity);
|
}
|
DataYSon = [];
|
vname = value.Name;
|
pcode = value.Code;
|
DataYSon.push(parseFloat(value.Area).toFixed(2));
|
|
} else if(value.Type=="parent"&value.Name==vname) {
|
DataYSon.push(parseFloat(value.Area).toFixed(2));
|
} else {
|
//如果有子项先添加父项
|
if (DataYSon.length > 0) {
|
var ity = new ItemDYP();
|
ity.name = vname;
|
// ity.barWidth = 20;
|
ity.data = DataYSon;
|
dataY.push(ity);
|
DataYSon = [];
|
}
|
|
|
if (value.Name != sname) {
|
if(DataYSon1.length>0){
|
if (value.Code.substring(0, 2) == pcode) {
|
var ity = new ItemDY();
|
ity.name = sname;
|
ity.stack=vname,
|
// ity.barWidth = 5;
|
ity.data = DataYSon1;
|
dataY.push(ity);
|
} else {
|
var ity = new ItemDY();
|
ity.name = sname;
|
ity.stack = sname,
|
//ity.barWidth =5;
|
ity.data = DataYSon1;
|
dataY.push(ity);
|
}
|
}
|
DataYSon1 = [];
|
sname = value.Name;
|
DataYSon1.push(parseFloat(value.Area).toFixed(2));
|
|
} else {
|
DataYSon1.push(parseFloat(value.Area).toFixed(2));
|
}
|
}
|
//判断是否是最后一个
|
if (index == chartData.length - 1) {
|
if (DataYSon.length > 0) {
|
var ity = new ItemDYP();
|
ity.name = vname;
|
//ity.barWidth = 20;
|
ity.data = DataYSon;
|
dataY.push(ity);
|
}
|
|
if (DataYSon1.length > 0) {
|
var ity = new ItemDY();
|
ity.name = value.Name;
|
ity.stack = vname,
|
//ity.barWidth = 5;
|
ity.data = DataYSon1;
|
dataY.push(ity);
|
}
|
}
|
});
|
$(".scroll_cont1 table").empty();
|
$(".scroll_cont1 table").append(html);
|
|
color = uniq(color);
|
Name = uniq(Name);
|
dataX = uniq(dataX);
|
|
// alert(JSON.stringify(dataY));
|
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
var app = {};
|
option = null;
|
var posList = [
|
'left', 'right', 'top', 'bottom',
|
'inside',
|
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
|
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
|
];
|
app.configParameters = {
|
rotate: {
|
min: -90,
|
max: 90
|
},
|
align: {
|
options: {
|
left: 'left',
|
center: 'center',
|
right: 'right'
|
}
|
},
|
verticalAlign: {
|
options: {
|
top: 'top',
|
middle: 'middle',
|
bottom: 'bottom'
|
}
|
},
|
position: {
|
options: echarts.util.reduce(posList, function (map, pos) {
|
map[pos] = pos;
|
return map;
|
}, {})
|
},
|
distance: {
|
min: 0,
|
max: 100
|
}
|
};
|
|
app.config = {
|
rotate: 90,
|
align: 'left',
|
verticalAlign: 'middle',
|
position: 'insideBottom',
|
distance: 5,
|
onChange: function () {
|
var labelOption = {
|
normal: {
|
rotate: app.config.rotate,
|
align: app.config.align,
|
verticalAlign: app.config.verticalAlign,
|
position: app.config.position,
|
distance: app.config.distance
|
}
|
};
|
myChart.setOption({
|
series: [{
|
label: labelOption
|
}, {
|
label: labelOption
|
}, {
|
label: labelOption
|
}, {
|
label: labelOption
|
}]
|
});
|
}
|
};
|
|
|
var labelOption = {
|
normal: {
|
show: true,
|
position: app.config.position,
|
distance: app.config.distance,
|
align: app.config.align,
|
verticalAlign: app.config.verticalAlign,
|
rotate: app.config.rotate,
|
formatter: '{c} {name|{a}}',
|
fontSize: 10,
|
}
|
};
|
|
option = {
|
//title: {
|
// text: title,
|
// x: 'center',
|
// y: 'top',
|
|
// textStyle: {
|
// color: '#ffffff',
|
// fontWeight: 'normal',
|
// }
|
//},
|
color: color,
|
tooltip: {
|
trigger: 'axis',
|
confine: 'hidden',
|
axisPointer: {
|
type: 'shadow'
|
}
|
},
|
legend: {
|
show: false,
|
data: Name,
|
textStyle: {//图例文字的样式
|
color: '#ffffff',
|
fontSize: 10
|
}
|
},
|
grid: {
|
left: '2%', // 与容器左侧的距离
|
//right: '5%', // 与容器右侧的距离
|
top: '10%', // 与容器顶部的距离
|
bottom: '18%', // 与容器底部的距离
|
containLabel: true
|
},
|
xAxis: [
|
{
|
type: 'category',
|
axisTick: { show: false },
|
boundaryGap:true,
|
data: dataX,
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#ffffff'
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
}
|
}
|
],
|
dataZoom: [
|
{
|
show: true,
|
start: 50,
|
end: 100,
|
bottom: "auto"
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
axisLabel: {
|
show: true,
|
textStyle: {
|
color: '#ffffff'
|
},
|
formatter: function (value) {
|
if (parseFloat(value) > 1000000) {
|
var yz = parseFloat(value / 1000000);
|
return yz + "百万";
|
} else {
|
return value;
|
}
|
|
}
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
splitLine: {
|
show: false
|
}
|
}
|
],
|
series: dataY
|
};;
|
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
|
}
|
|
|
|
var itemY = function (Name,Data) {
|
return {
|
type: 'bar',
|
name:Name,
|
data:Data
|
}
|
}
|
|
var ItemDY = function (Name,stack,width,dataArr) {
|
return {
|
|
name: Name,
|
type: 'bar',
|
stack: stack,
|
// barWidth: width,
|
data: dataArr
|
}
|
}
|
|
var ItemDYP = function (Name,width,dataArr) {
|
return {
|
|
name: Name,
|
type: 'bar',
|
// barWidth: width,
|
data: dataArr
|
}
|
}
|
|
|
|
//点中的显示
|
var clk = function () {
|
return {
|
show: 'true'
|
|
}
|
}
|
|
|
function uniq(array) {
|
var temp = []; //一个新的临时数组
|
for (var i = 0; i < array.length; i++) {
|
if (temp.indexOf(array[i]) == -1) {
|
temp.push(array[i]);
|
}
|
}
|
return temp;
|
}
|
|
|
function btnClick() {
|
$(".chartBtn").click(function () {
|
$("#container").css("display", "block");
|
$("#dataTable").css("display", "none");
|
$(".dataBtn").css("background-color", "#000000");
|
$(".chartBtn").css("background-color", "#033D73");
|
});
|
|
$(".dataBtn").click(function () {
|
$("#container").css("display", "none");
|
$("#dataTable").css("display", "block");
|
$(".dataBtn").css("background-color", "#033D73");
|
$(".chartBtn").css("background-color", "#000000");
|
});
|
}
|
