var first = "", second = "";
|
window.onload = function () {
|
first = decodeURI(getUrlParam("first"));
|
second = decodeURI(getUrlParam("second"));
|
GetData(first, second);
|
|
btnClick();
|
new CusScrollBar({
|
contentSelector: '.scroll_cont1', //滚动内容区
|
barSelector: '.scroll_bar1', //滚动条
|
sliderSelector: '.scroll_slider1' //滚动滑块
|
});
|
var title = localStorage.getItem("typeName");
|
$(".ttitle").empty();
|
$(".ttitle").append(title);
|
}
|
|
|
function GetData(first,second) {
|
var color = [];
|
var dataLegend = [];
|
var dataY = [];
|
var TableName = localStorage.getItem("type");
|
var TableColor = GetCmpareTable(TableName);
|
var html = "";
|
$.ajax({
|
url: "../../../Ashx/DataQH.ashx",
|
type: "post",
|
data: { Action: "GetFZDataChoose", firstLevel: first, secondLevel: second, dataTable: TableName, colorTable: TableColor },
|
dataType: "json",
|
async: false,
|
success: function (result) {
|
if (first == ""|second=="") {
|
DanxuanChart(result);
|
} else {
|
DuoxuanChart(result);
|
}
|
|
|
}
|
});
|
|
}
|
|
function DanxuanChart(result) {
|
var dataLegend = [];
|
var color = [];
|
var dataY = [];
|
var html = "";
|
$.each(result, 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>" + parseFloat(value.ZhouChang).toFixed(2) + "</td></tr>";
|
dataLegend.push(value.Name);
|
color.push("rgb("+value.R+","+value.G+","+value.B+")");
|
dataY.push(value.Area);
|
})
|
|
|
|
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
option = {
|
grid: {
|
top: '5%',
|
left: '23%',
|
bottom: '15%'
|
},
|
// 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: dataLegend
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
splitLine: {
|
show: false,
|
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: { //改变刻度字体样式
|
color: '#fff'
|
}
|
}
|
}
|
],
|
series: [{
|
data: dataY,
|
type: 'bar',
|
itemStyle: {
|
normal: {
|
//每根柱子颜色设置
|
color: function (params) {
|
let colorList =color;
|
return colorList[params.dataIndex];
|
}
|
}
|
}
|
}]
|
};;
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
//表格添加数据
|
|
$(".scroll_cont1 table").empty();
|
$(".scroll_cont1 table").append("<tr><td>名称</td><td>面积</td><td>周长</td></tr>" + html);
|
}
|
|
function DuoxuanChart(result) {
|
var code = "",pname="";
|
var dataLegned = [];
|
var DataY = [];
|
var DataYparent = [];
|
var DataYSon = [];
|
var html = "";
|
$.each(result, 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>" + parseFloat(value.ZhouChang).toFixed(2) + "</td></tr>";
|
var rgb = "rgb(" + value.R + "," + value.G + "," + value.B + ")";
|
var dv = new dataEve(parseFloat(value.Area).toFixed(2), rgb);
|
if (value.Type == "parent") {
|
|
code = value.Code;
|
pname = value.Name;
|
DataYparent.push(dv);
|
var itemy = new item();
|
itemy.name = value.Name;
|
itemy.type = "bar";
|
itemy.barMaxWidth = 20;
|
itemy.data = DataYparent;
|
DataY.push(itemy);
|
DataYparent = [];
|
} else {
|
if (code != "" & ((code == value.code) | code == value.Code.substring(0, code.length)))
|
{
|
DataYSon.push(dv);
|
var itemson = new itemSon();
|
itemson.name = value.Name;
|
itemson.type = "bar";
|
itemson.stack = pname;
|
itemson.barMaxWidth = 5;
|
itemson.data = DataYSon;
|
DataY.push(itemson);
|
DataYSon = [];
|
} else {
|
DataYparent.push(dv);
|
var itemy = new item();
|
itemy.name = value.Name;
|
itemy.type = "bar";
|
itemy.barMaxWidth = 20;
|
itemy.data = DataYparent;
|
DataY.push(itemy);
|
DataYparent = [];
|
}
|
|
|
}
|
});
|
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
option = {
|
grid: {
|
left: '5%', // 与容器左侧的距离
|
//right: '5%', // 与容器右侧的距离
|
top: '10%', // 与容器顶部的距离
|
bottom: '5%', // 与容器底部的距离
|
containLabel: true
|
},
|
tooltip: {
|
trigger: 'axis',
|
confine: 'hidden',
|
axisPointer: { // 坐标轴指示器，坐标轴触发有效
|
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
}
|
},
|
legend: {
|
data: dataLegned
|
},
|
xAxis: [
|
{
|
type: 'category',
|
data: [2014],
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: { //改变刻度字体样式
|
color: '#fff'
|
}
|
}
|
}
|
],
|
yAxis: [
|
{
|
type: 'value',
|
splitLine: {
|
show: false,
|
|
},
|
axisLine: {
|
lineStyle: {
|
color: '#fff'
|
}
|
},
|
axisLabel: {
|
formatter: '{value}',
|
textStyle: { //改变刻度字体样式
|
color: '#fff'
|
}
|
}
|
}
|
],
|
series:DataY
|
};
|
if (option && typeof option === "object") {
|
myChart.setOption(option, true);
|
}
|
$(".scroll_cont1 table").empty();
|
$(".scroll_cont1 table").append("<tr><td>名称</td><td>面积</td><td>周长</td></tr>" + html);
|
|
}
|
|
|
var item = function (name, type, width, dataEve) {
|
return {
|
name: name,
|
type: type,
|
barMaxWidth: width,
|
data: dataEve
|
}
|
}
|
|
var itemSon = function (name, type, pname, width,dataEve) {
|
return{
|
name: name,
|
type: type,
|
stack: pname,
|
barMaxWidth:width,
|
data: dataEve
|
}
|
}
|
|
var dataEve = function (val,rgb) {
|
return {
|
value:val,
|
itemStyle: {
|
color: rgb
|
}
|
}
|
}
|
|
|
|
|
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("color", "#ffffff");
|
$(".chartBtn").css("color", "aqua");
|
});
|
|
$(".dataBtn").click(function () {
|
$("#container").css("display", "none");
|
$("#dataTable").css("display", "block");
|
$(".dataBtn").css("color", "aqua");
|
$(".chartBtn").css("color", "#ffffff");
|
});
|
}
|
