var resultData = null;
|
var ChartName = "";
|
window.onload = function () {
|
GetData();
|
btnClick();
|
new CusScrollBar({
|
contentSelector: '.scroll_cont1', //滚动内容区
|
barSelector: '.scroll_bar1', //滚动条
|
sliderSelector: '.scroll_slider1' //滚动滑块
|
});
|
ChartName = decodeURI(getUrlParam("typeName"));
|
$(".ttitle").empty();
|
$(".ttitle").append(ChartName);
|
}
|
|
//数据特殊，单独开发
|
function GetData() {
|
var TableName = getUrlParam("tableType");
|
var TableColor = GetCmpareTable(TableName);
|
var dataLegend = [];
|
var dataY1 = [];
|
var dataY2 = [];
|
var Pnode = "";
|
var html = "";
|
$.ajax({
|
url: "../../../Ashx/DataQH.ashx",
|
type: "post",
|
data: { Action: "GetQHFZData", dataTable: TableName, colorTable: TableColor },
|
dataType: "json",
|
async: false,
|
success: function (result) {
|
resultData = result;
|
$.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 itemStyle = new obj();
|
var itemColor = new col();
|
var clkVal = new clk();
|
if (value.Type == "parent") {
|
dataLegend.push(value.Name);
|
itemStyle.value = value.Area;
|
itemStyle.name = value.Name;
|
|
itemColor.color = "rgb(" + value.R + "," + value.G + "," + value.B + ")";
|
itemStyle.itemStyle = itemColor;
|
if (index == 0) {
|
// itemStyle.label = clkVal;
|
// itemStyle.selected = true;
|
Pnode = value.fr;
|
}
|
dataY2.push(itemStyle);
|
} else {
|
if (Pnode == value.fr.substring(0, Pnode.length) | Pnode == value.fr) {
|
itemStyle.value = value.Area;
|
itemStyle.name = value.Name;
|
//itemStyle.label = clkVal;
|
itemColor.color = "rgb(" + value.R + "," + value.G + "," + value.B + ")";
|
itemStyle.itemStyle = itemColor;
|
dataY1.push(itemStyle);
|
}
|
}
|
});
|
InitChart( dataLegend, dataY1, dataY2);
|
$("#dataTable table").empty();
|
$("#dataTable table").append("<tr><td>名称</td><td>面积</td><td>周长</td></tr>"+html);
|
}
|
});
|
}
|
|
function InitChart( dataLegend, dataY1, dataY2) {
|
dataY1 = uniq(dataY1);
|
var dom = document.getElementById("container");
|
var myChart = echarts.init(dom);
|
option = null;
|
option = {
|
//title: {
|
// text: ChartName,
|
// x: 'center',
|
// y: 'top',
|
|
// textStyle: {
|
// color: '#ffffff'
|
// }
|
//},
|
tooltip: {
|
trigger: 'item',
|
confine: 'hidden',
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
},
|
legend: {
|
orient: 'horizontal',
|
bottom: '10',
|
textStyle: {
|
color: '#ffffff'
|
},
|
icon: "circle",
|
itemWidth: 15,
|
itemHeight: 15,
|
data: dataLegend
|
},
|
|
series: [
|
{
|
center: ["50%", "30%"],
|
name: '面积',
|
type: 'pie',
|
|
radius: [0, '20%'],
|
label: {
|
show: false,
|
position: 'center'
|
},
|
|
labelLine: {
|
show: false
|
},
|
data: dataY1
|
|
},
|
{
|
center: ["50%", "30%"],
|
name: '面积',
|
type: 'pie',
|
radius: ['30%', '50%'],
|
label: {
|
show: false,
|
position: 'center'
|
},
|
|
labelLine: {
|
show: false
|
},
|
data: dataY2
|
}
|
]
|
};;
|
if (option && typeof option === "object") {
|
|
myChart.setOption(option, true);
|
};
|
|
myChart.on('click', function (params) {
|
// 当componentType == "xAxis"或者 ==“yAxisx”时，取被点击时坐标轴的值params.value
|
if (params.seriesIndex == 1 & dataY1 != "") {
|
myChart.dispose();
|
// alert(params.name);
|
GetClickData(params.name);
|
}
|
|
});
|
}
|
|
|
var obj = function (val, Nam) {
|
return {
|
value: val,
|
name: Nam,
|
itemStyle: col
|
//label: clk
|
}
|
|
}
|
|
|
var col = function (colorRgb) {
|
return {
|
color: colorRgb
|
}
|
}
|
//点中的显示
|
var clk = function () {
|
return {
|
show: 'true'
|
|
}
|
}
|
|
|
|
//点击模块
|
function GetClickData(Name) {
|
var dataLegend = [];
|
var dataY1 = [];
|
var dataY2 = [];
|
var code = "";
|
if (resultData != null) {
|
$.each(resultData, function (index, Rsvalue) {
|
//var R = Rsvalue.R;
|
//var G = Rsvalue.G;
|
//var B = Rsvalue.B;
|
var itemStyle = new obj();
|
var itemColor = new col();
|
var clkVal = new clk();
|
|
if (Rsvalue.Type == "parent") {
|
itemStyle.value = Rsvalue.Area;
|
itemStyle.name = Rsvalue.Name;
|
|
itemColor.color = "rgb(" + Rsvalue.R + "," + Rsvalue.G + "," + Rsvalue.B + ")";
|
itemStyle.itemStyle = itemColor;
|
dataLegend.push(Rsvalue.Name);
|
if (Rsvalue.Name == Name) {
|
itemStyle.label = clkVal;
|
itemStyle.selected = true;
|
code = Rsvalue.fr;
|
|
}
|
dataY2.push(itemStyle);
|
} else {
|
if (((code == (Rsvalue.fr.substring(0, code.length))) | (code == Rsvalue.fr))&code!="") {
|
itemStyle.value = Rsvalue.Area;
|
itemStyle.name = Rsvalue.Name;
|
itemStyle.label = clkVal;
|
itemColor.color = "rgb(" + Rsvalue.R + "," + Rsvalue.G + "," + Rsvalue.B + ")";
|
itemStyle.itemStyle = itemColor;
|
dataY1.push(itemStyle);
|
}
|
}
|
})
|
InitChart( dataLegend, dataY1, dataY2);
|
}
|
|
}
|
|
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");
|
});
|
}
|
