-
-
碳排放量统计
-
+
+
+
+
碳排放量统计
+
+
+
+
+
+
接入统计
+
+
+
+
+
{{ item.count }}
+
{{ item.name }}
+
+
+
+
+
100
+
总接入数量
+
+
-
-
-
-
接入统计
-
-
-
-
-
{{ item.count }}
-
{{ item.name }}
-
-
-
-
-
100
-
总接入数量
-
-
-
-
-
实时负荷走势
-
- -
- 总量
-
- -
- 发电
-
- -
- 石化
-
- -
- 钢铁
-
- -
- 有色
-
-
-
-
-
-
-
-
-
碳源结构
-
-
-
-
-
-
-
-
-
-
-
-
-
企业碳排放量排名 单位（万吨）
-
- -
-
{{ index + 1 }}
- {{ item.name }}
- {{ item.value }}
-
-
-
-
-
-
+
+
+
+
+
碳源结构
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 企业碳排放量排名 单位（万吨）
+
+
+ -
+
{{ index + 1 }}
+ {{ item.name }}
+ {{ item.value }}
+
+
+
+
+
+
+
-
\ No newline at end of file
diff --git a/src/views/XQXY.vue b/src/views/XQXY.vue
index 1a9ee59..2777090 100644
--- a/src/views/XQXY.vue
+++ b/src/views/XQXY.vue
@@ -1000,15 +1000,26 @@ export default {
},
};
let option = {
+ grid: {
+ left: "20%", // 调整饼状图的左边距
+ top: "20%", // 调整饼状图的上边距
+ right: "20%", // 调整饼状图的右边距
+ bottom: "20%", // 调整饼状图的下边距
+ },
title: {
- text: "工业",
- left: "center",
- top: "51%",
- padding: [10, 0],
+ subtext: "工业",
+ text: "85.2%",
+ left: "48",
+ align:"center",
+ top: "40%",
+ // padding: [10, 0],
textStyle: {
- color: "#6B9DD7",
+ color: "#fff",
+ fontSize: 14,
+ align: "center",
+ },
+ subtextStyle: {
fontSize: 12,
- fontWeight: "normal",
align: "center",
},
},
@@ -1020,7 +1031,7 @@ export default {
var percent = 0;
var total = 0;
for (var i = 0; i < echartData.length; i++) {
- total += trafficWay[i].value;
+ total += echartData[i].value;
}
const item = echartData.filter((item) => item.name === name)[0];
console.log(item);
@@ -1032,20 +1043,30 @@ export default {
return "";
}
},
- data: [echartData[0].name],
- left: 320,
- bottom: 145,
+ data: [
+ {
+ name: "工业",
+ icon: "rect",
+ },
+ {
+ name: "楼宇",
+ icon: "rect",
+ },
+ ],
+ right: 20,
+ top: 40,
+ orient: "vertical",
align: "left",
textStyle: {
- color: "#fff",
+ color: "#",
rich: {
name: {
- fontSize: 16,
- color: "#fff",
+ fontSize: 12,
+ // color: "#fff",
},
num: {
fontSize: 12,
- color: color[1],
+ // color: "#fff",
},
},
},
@@ -1054,9 +1075,10 @@ export default {
{
name: "",
type: "pie",
+ center: ["25%", "50%"],
radius: ["42%", "50%"],
hoverAnimation: false,
- color: ["#fc962c", "#d83472"],
+ color: ["#13AAF3", "#6FF0FD"],
label: {
show: false,
},
@@ -1069,6 +1091,122 @@ export default {
};
this.defineEcharts("gongye", option);
},
+ xuefeng() {
+ var echartData = [
+ {
+ value: 85.2,
+ name: "削锋",
+ },
+ {
+ value: 14.8,
+ name: "填谷",
+ },
+ ];
+ var rich = {
+ total: {
+ color: "#A2C7F3",
+ fontSize: 16,
+ align: "center",
+ },
+ white: {
+ color: "#a2c7f3",
+ align: "center",
+ fontSize: 12,
+ padding: [8, 0],
+ },
+ };
+ let option = {
+ grid: {
+ left: "20%", // 调整饼状图的左边距
+ top: "20%", // 调整饼状图的上边距
+ right: "20%", // 调整饼状图的右边距
+ bottom: "20%", // 调整饼状图的下边距
+ },
+ title: {
+ subtext: "削锋",
+ text: "85.2%",
+ left: "48",
+ top: "40%",
+ align:"center",
+ padding: [10, 0],
+ textStyle: {
+ color: "#fff",
+ fontSize: 14,
+ align: "center",
+ },
+ subtextStyle: {
+ fontSize: 12,
+ align: "center",
+ },
+ },
+ legend: {
+ icon: "rect",
+ x: "right",
+ // selectedMode: false,
+ formatter: function (name) {
+ var percent = 0;
+ var total = 0;
+ for (var i = 0; i < echartData.length; i++) {
+ total += echartData[i].value;
+ }
+ const item = echartData.filter((item) => item.name === name)[0];
+ console.log(item);
+ percent = ((item.value / total) * 100).toFixed(2);
+ if (name !== "") {
+ return `{name|${name}}` + "\t" + "\t" + `{num|${percent}}{num|%}`;
+ // return `{name|${name}` + `{num|${percent}}{name|kWh}`;
+ } else {
+ return "";
+ }
+ },
+ data: [
+ {
+ name: "削锋",
+ icon: "rect",
+ },
+ {
+ name: "填谷",
+ icon: "rect",
+ },
+ ],
+ right: 20,
+ top: 40,
+ orient: "vertical",
+ align: "left",
+ textStyle: {
+ color: "#",
+ rich: {
+ name: {
+ fontSize: 12,
+ // color: "#fff",
+ },
+ num: {
+ fontSize: 12,
+ // color: "#fff",
+ },
+ },
+ },
+ },
+ series: [
+ {
+ name: "",
+ type: "pie",
+ center: ["25%", "50%"],
+ radius: ["42%", "50%"],
+ hoverAnimation: false,
+ color: ["#13AAF3", "#6FF0FD"],
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ data: echartData,
+ },
+ ],
+ };
+ this.defineEcharts("xuefeng", option);
+ },
},
mounted() {
this.defineEcharts("ndqylfb", this.option1);
@@ -1848,11 +1986,39 @@ export default {
width: 100%;
height: 100%;
.xyzy1 {
+ height: 100px;
display: flex;
justify-content: space-around;
+ p:nth-child(1) {
+ width: 103px;
+ height: 36px;
+ margin-top: 60px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 36px;
+ }
#gongye {
- width: 200px;
- height: 200px;
+ width: 300px;
+ height: 160px;
+ }
+ }
+ .xyzy2 {
+ height: 100px;
+ display: flex;
+ justify-content: space-around;
+ p:nth-child(1) {
+ width: 103px;
+ height: 36px;
+ margin-top: 60px;
+ font-size: 14px;
+ font-weight: 400;
+ color: #ffffff;
+ line-height: 36px;
+ }
+ #xuefeng {
+ width: 300px;
+ height: 160px;
}
}
}
diff --git a/src/views/ZHDY.vue b/src/views/ZHDY.vue
index d8e461d..7322daa 100644
--- a/src/views/ZHDY.vue
+++ b/src/views/ZHDY.vue
@@ -519,184 +519,133 @@ export default {
},
// 年度售电量
ndsdl() {
- // 假数据
- let left1 = {
- code: 200,
- msg: "人数趋势图获取成功",
- data: {
- count: [
- 153456, 143456, 163456, 183456, 163456, 153456, 163456, 133456,
- 163456, 143456, 103456, 113456, 153456, 133456, 143456,
- ],
- time: [
- "01",
- "02",
- "03",
- "04",
- "05",
- "06",
- "07",
- "08",
- "09",
- "10",
- "11",
- "12",
- ],
- },
- };
- //计算最大值
- function maxNumCount(num) {
- let maxNum = "";
- //将数字转化为数组
- let max = num.toString().split("");
- for (var i = 0; i < max.length; i++) {
- if (i > 1) {
- maxNum += "0";
- }
- }
- //组装补0
- if (maxNum.length > 1) {
- if (max[1] == "9") {
- maxNum = parseInt(max[0]) + 1 + "0" + maxNum;
- } else {
- maxNum = max[0] + (parseInt(max[1]) + 1) + maxNum;
- }
- } else {
- maxNum = "100";
- }
- return maxNum;
- }
- //计算最小值
- function minNumCount(num) {
- if (num < 10000) {
- return "0";
- }
- let minNum = "";
- //将数字转化为数组
- let min = num.toString().split("");
- for (var i = 0; i < min.length; i++) {
- //组装补0
- if (i > 1) {
- minNum += "0";
- }
- }
- if (min[1] == "0") {
- minNum = parseInt(min[0]) - 1 + "9" + minNum;
- } else {
- minNum = min[0] + parseInt(min[1]) + minNum;
- }
+ var colors = ["#00FFFF", "#02FF67", "#675bba"];
- return minNum;
- }
-
- let maxNum = Math.max(...left1.data.count);
- let minNum = Math.min(...left1.data.count);
- maxNum = maxNumCount(maxNum);
- minNum = minNumCount(minNum);
- let yName = "人数（万）";
- if (maxNum > 9999999) {
- yName = "人数（千万）";
- }
- var option;
-
- option = {
- grid: {
- width: "84%",
- height: "75%",
- top: "20%", //生成的图片和顶部的间距
- left: "5%",
- bottom: "0%",
- right: "16%",
- containLabel: true, //为ture才会生效
- },
+ let option = {
tooltip: {
trigger: "axis",
- // axisPointer: {
- // type: "shadow",
- // },
+ axisPointer: {
+ type: "shadow",
+ },
},
- xAxis: {
- // name: "日期",
- nameTextStyle: {
- color: "#03CECF",
- fontSize: 14,
- },
- type: "category",
- boundaryGap: false,
- data: left1.data.time,
- axisLabel: {
- color: "#03CECF",
- fontSize: 14,
- margin: 10,
- // interval: 0, //使x轴上的文字显示完全,
- },
- axisLine: {
- show: true,
- lineStyle: {
- color: "rgb(37,52,82)",
+ grid: {
+ top: "25%",
+ right: "5%",
+ left: "15%",
+ bottom: "20%",
+ },
+
+ xAxis: [
+ {
+ type: "category",
+ axisLabel: {
+ color: "#fff",
},
+ axisLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3e98",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: false,
+ lineStyle: {
+ color: "#195384",
+ type: "dotted",
+ },
+ },
+ data: [
+ "01",
+ "02",
+ "03",
+ "04",
+ "05",
+ "06",
+ "07",
+ "08",
+ "09",
+ "10",
+ "11",
+ "12",
+ ],
},
- axisTick: {
+ ],
+ dataZoom: [
+ {
show: false,
+ realtime: false,
+ start: 0,
+ end: 100,
},
- },
- yAxis: {
- type: "value",
- name: yName,
- nameTextStyle: {
- color: "#03CECF",
- fontSize: 14,
+ {
+ type: "inside",
+ realtime: true,
+ start: 0,
+ end: 100,
},
- min: minNum,
- max: maxNum,
- axisLine: {
- lineStyle: {
- color: "rgb(37,52,82)",
+ ],
+ yAxis: [
+ {
+ type: "value",
+ name: "单位：户",
+ min: 0,
+ position: "left",
+ nameTextStyle: {
+ color: "#fff",
+ fontSize: 12,
},
- show: true,
- },
- splitLine: {
- show: true,
- lineStyle: {
- color: "rgba(37,52,82)",
+ axisLine: {
+ lineStyle: {
+ color: "#0a3e98",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ splitLine: {
+ show: true,
+ lineStyle: {
+ color: "#0a3e98",
+ type: "dotted",
+ },
+ },
+ axisLabel: {
+ formatter: "{value}",
+ textStyle: {
+ color: "#fff",
+ },
},
},
- axisLabel: {
- color: "#03CECF",
- fontSize: 14,
- interval: 20,
- formatter: function (value, index) {
- if (yName.indexOf("千万") && maxNum > 10000000) {
- value = (value / 10000000).toFixed(2);
- } else if (maxNum > 10000 && maxNum < 10000000) {
- value = value / 10000;
- }
- return value;
- },
- },
- },
- splitLine: {
- show: false,
- },
+ ],
series: [
{
- data: left1.data.count,
+ name: "发放人数",
type: "line",
- showSymbol: true,
- itemStyle: {
- emphasis: {
- color: "rgb(7,162,148)",
- borderColor: "rgba(7,162,148,0.6)",
- borderWidth: 20,
- },
+ // smooth: true, //是否平滑
+ // showAllSymbol: true,
+ // symbol: 'image://./static/images/guang-circle.png',
+ symbol: "circle",
+ symbolSize: 2,
+ lineStyle: {
normal: {
- color: "rgb(62,195,221)",
- borderColor: "rgb(6,65,95)",
- lineStyle: {
- color: "rgb(101,184,196)",
- },
+ color: "#14ADFD",
},
},
+ label: {
+ show: true,
+ position: "top",
+ textStyle: {
+ color: "#14ADFD",
+ },
+ },
+ itemStyle: {
+ color: "#fff",
+ borderColor: "#14ADFD",
+ borderWidth: 2,
+ },
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
@@ -707,20 +656,24 @@ export default {
[
{
offset: 0,
- color: "#68e3e5",
+ color: "rgba(78, 173, 244, 0.90)",
},
{
offset: 1,
- color: "rgba(24, 68, 121,0)",
+ color: "rgba(37, 98, 179, 0.90)",
},
],
false
),
+ shadowColor: "rgba(37, 98, 179, 0.90)",
+ shadowBlur: 20,
},
},
+ data: [300, 400, 200, 250, 320, 180, 190, 400, 160, 300, 480,300],
},
],
};
+ this.defineEcharts("ndsdl", option);
},
//偏差分析
pcfx() {
@@ -1109,6 +1062,7 @@ export default {
this.qyyh();
this.pcfx();
this.yhhyzb();
+ this.ndsdl();
var data = [
{
name: "南京市",
+
+
+ {{ item.percent }}%
+ .png)
+
+ .png)
+ .png)
+ 
+ 
+ 
+