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"); }); }