// 新建改造污水配套管网公里数 // Area:地区 Aim:目标值 Actual: 实际值 var myChart71 = echarts.init(document.querySelector(".echart71")) var myChart72 = echarts.init(document.querySelector(".echart72")) var sewagepipe = "http://118.178.224.202:8024/api/sewage-pipe" $.get(sewagepipe, function (data) { var d = [] d = data.data let arryArea = [] let arryAim = [] let arryActual = [] let countAim = 0 let countActual = 0 d.forEach(function (item) { arryArea.push(item.area) arryAim.push(item.aim) arryActual.push(item.actual) countAim += item.aim countActual += item.actual }) $("#countaim1").empty().append(countAim) let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100) let other = Number(100 - rate) let rate_percent = rate.toFixed(1) + "%" let other_percent = other.toFixed(1) + "%" let ratedata = [ { value: rate, name: rate_percent, label: { position: "center", fontSize: 18, color: "#FE6900", }, itemStyle: { color: "#FE6900", }, }, { value: other, name: other_percent, itemStyle: { color: "#EFEFEF", }, label: { show: false, }, }, ] var option71 = { tooltip: { trigger: "item", show: false, showContent: true, }, series: [ { // name: "Access From", type: "pie", radius: ["70%", "90%"], avoidLabelOverlap: false, label: { show: true, // position: "center", }, labelLine: { show: false, }, data: ratedata, }, ], } myChart71.setOption(option71) var option72 = { legend: { show: true, selectedMode: false, itemWidth: 15, itemHeight:10, top: 5, left: 0, textStyle: { fontSize: 13, color: "#6e7178", }, }, tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, confine: true, formatter: "{b}" + "  " + "{a0}" + ": " + "{c0}" + "  " + "{a1}" + ": " + "{c1}", }, grid: { left: "0%", right: "0%", bottom: 0, top: 50, // containLabel: true, }, xAxis: [ { show: false, }, ], yAxis: { type: "category", // max : 15, // min : 0, // splitNumber : 1, axisTick: { show: true, alignWithLabel: true, }, axisLabel: { align: "left", verticalAlign: "bottom", lineHeight: 70, margin: -0, fontSize: 14, color: "#6e7178", }, // tick是刻度,tickeline刻度线,axis是轴, axisTick: { show: false, }, axisTickLine: { show: false, }, axisLine: { show: false, }, data: arryArea, }, label: { show: true, position: "left", align: "right", offset: [$(".echart62").width(), -13], formatter: "{c}公里", fontSize: 14, color: "#6e7178", }, series: [ { name: "目标值", type: "bar", barWidth: 10, //柱图宽度 itemStyle: { color: "#3388FF", borderRadius: 5, }, showBackground: { show: true, }, backgroundStyle: { color: "#E6F1FF", borderRadius: 5, }, // data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10], data: arryAim, }, { name: "实际值", type: "bar", barWidth: 10, //柱图宽度 itemStyle: { color: "#3BA272", borderRadius: 5, }, showBackground: { show: true, }, backgroundStyle: { color: "#E6F1FF", borderRadius: 5, }, // data: [16, 4.3, 10, 8.2, 5, 29.5, 10, 15.4, 25, 15.6, 1, 10], data: arryActual, barGap: "250%", }, ], } myChart72.setOption(option72) }) // 农村生活污水处理设施标准化运维 // Area:地区 Aim:目标值 Actual: 实际值 var myChart73 = echarts.init(document.querySelector(".echart73")) var myChart74 = echarts.init(document.querySelector(".echart74")) var sewagetreatment = "http://118.178.224.202:8024/api/sewage-treatment" $.get(sewagetreatment, function (data) { var d = [] d = data.data let arryArea = [] let arryAim = [] let arryActual = [] let countAim = 0 let countActual = 0 d.forEach(function (item) { arryArea.push(item.area) arryAim.push(item.aim) arryActual.push(item.actual) countAim += item.aim countActual += item.actual }) $("#countaim2").empty().append(countAim) let rate = countAim == 0 ? 0 : Number((countActual / countAim) * 100) let other = Number(100 - rate) let rate_percent = rate.toFixed(1) + "%" let other_percent = other.toFixed(1) + "%" let ratedata = [ { value: rate, name: rate_percent, label: { position: "center", fontSize: 18, color: "#31C463", }, itemStyle: { color: "#31C463", }, }, { value: other, name: other_percent, itemStyle: { color: "#EFEFEF", }, label: { show: false, }, }, ] var option73 = { tooltip: { trigger: "item", show: false, showContent: true, }, series: [ { type: "pie", radius: ["70%", "90%"], avoidLabelOverlap: false, label: { show: true, // position: "center", }, labelLine: { show: false, }, data: ratedata, }, ], } myChart73.setOption(option73) var option74 = { tooltip: { trigger: "axis", axisPointer: { // 坐标轴指示器,坐标轴触发有效 type: "shadow", // 默认为直线,可选为:'line' | 'shadow' }, confine: true, // formatter: "{b}" + "{a1}" + ": " + "{c0}", formatter: "{b}" + "  " + "{a0}" + ": " + "{c0}" + "  " + "{a1}" + ": " + "{c1}", }, legend: { show: true, selectedMode: false, itemWidth: 15, itemHeight:10, textStyle: { fontSize: 13, color: "#6e7178", }, top: 0, left: 0, // left: "left", }, grid: { left: "0%", right: "0%", bottom: 0, top: 40, // containLabel: true, }, xAxis: [ { show: false, }, ], // },], yAxis: { type: "category", axisLabel: { align: "left", verticalAlign: "bottom", lineHeight: 60, margin: -0, fontSize: 14, color: "#6e7178", }, // tick是刻度,tickeline刻度线,axis是轴, axisTick: { show: false, }, axisTickLine: { show: false, }, axisLine: { show: false, }, data: arryArea, }, label: { show: true, position: "left", align: "right", offset: [$(".echart62").width(), -13], formatter: "{c}个", fontSize: 14, color: "#6e7178", }, series: [ { name: "实际值", type: "bar", // stack: true, barWidth: 10, //柱图宽度 itemStyle: { color: "#3388FF", borderRadius: 5, }, showBackground: { show: true, }, backgroundStyle: { color: "#E6F1FF", borderRadius: 5, }, // data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49], data: arryActual, }, { name: "目标值", type: "bar", barWidth: 10, //柱图宽度 itemStyle: { color: "#3BA272", borderRadius: 5, }, showBackground: { show: true, }, backgroundStyle: { color: "#E6F1FF", borderRadius: 5, }, // stack: true, // data: [65, 61, 21, 18, 86, 165, 330, 320, 145, 49], data: arryAim, barGap: "250%", }, ], } myChart74.setOption(option74) })