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 += "
" + value.Name + " | " + parseFloat(value.Area).toFixed(2) + " | " + parseFloat(value.ZhouChang).toFixed(2) + " |
";
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("名称 | 面积 | 周长 |
" + html);
}
function DuoxuanChart(result) {
var code = "",pname="";
var dataLegned = [];
var DataY = [];
var DataYparent = [];
var DataYSon = [];
var html = "";
$.each(result, function (index, value) {
html += "" + value.Name + " | " + parseFloat(value.Area).toFixed(2) + " | " + parseFloat(value.ZhouChang).toFixed(2) + " |
";
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("名称 | 面积 | 周长 |
" + 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");
});
}