From 866a84f5da963fc6567b9f7116ae39cde68f21c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9C002001lixiaobang=E2=80=9D?= <2547956374@qq.com>
Date: Tue, 12 Dec 2023 17:47:36 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E6=8F=90=E4=BA=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/views/energyMonitoring/index.vue | 257 ++++++++++++++++++++----
src/views/overview/index.vue | 282 ++++++++++++++++++++++++++-
2 files changed, 497 insertions(+), 42 deletions(-)
diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue
index 1c7cac1..6ccd309 100644
--- a/src/views/energyMonitoring/index.vue
+++ b/src/views/energyMonitoring/index.vue
@@ -15,7 +15,7 @@
负荷分类
-
+
@@ -134,10 +134,10 @@ function getDailyElectricityConsumption() {
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
- const c0 = [shape.x - 10, shape.y];
- const c1 = [shape.x + 10, shape.y];
- const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
- const c3 = [xAxisPoint[0] - 10, xAxisPoint[1]];
+ const c0 = [shape.x - 7, shape.y];
+ const c1 = [shape.x + 7, shape.y];
+ const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
ctx
.moveTo(c0[0], c0[1])
.lineTo(c1[0], c1[1])
@@ -155,10 +155,10 @@ function getDailyElectricityConsumption() {
},
buildPath: function (ctx, shape) {
const xAxisPoint = shape.xAxisPoint;
- const c1 = [shape.x + 9, shape.y];
- const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
- const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
- const c4 = [shape.x + 7 + 8, shape.y - 5];
+ const c1 = [shape.x + 7, shape.y];
+ const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
+ const c4 = [shape.x + 7 + 7, shape.y - 5];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
@@ -175,10 +175,10 @@ function getDailyElectricityConsumption() {
y: 0,
},
buildPath: function (ctx, shape) {
- const c1 = [shape.x - 10, shape.y];
- const c2 = [shape.x + 10, shape.y];
+ const c1 = [shape.x - 7, shape.y];
+ const c2 = [shape.x + 8, shape.y];
const c3 = [shape.x + 15, shape.y - 5];
- const c4 = [shape.x - 5, shape.y - 5];
+ const c4 = [shape.x - 2, shape.y - 5];
ctx
.moveTo(c1[0], c1[1])
.lineTo(c2[0], c2[1])
@@ -193,16 +193,16 @@ function getDailyElectricityConsumption() {
echarts.graphic.registerShape("CubeRight", CubeRight);
echarts.graphic.registerShape("CubeTop", CubeTop);
let xAxisData = [
- "北京",
- "上海",
- "天津",
- "南京",
- "深圳",
- "重庆",
- "青岛",
- "大连",
- "沈阳",
- "哈尔滨",
+ "08:00",
+ "09:00",
+ "10:00",
+ "11:00",
+ "12:00",
+ "13:00",
+ "14:00",
+ "15:00",
+ "16:00",
+ "17:00",
];
let seriesData = [100, 200, 300, 400, 200, 250, 360, 250, 340, 280];
// 绿色渐变
@@ -210,8 +210,8 @@ function getDailyElectricityConsumption() {
// 蓝色渐变
let colorArr = [
["rgba(0, 170, 193, 1)"],
- ["rgba(0, 224, 255, 1)", "rgba(13,8,16,0)"],
- ["rgba(0, 224, 255, 1)", "rgba(14,156,185,0)"],
+ ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
+ ["rgba(0, 224, 255, 1)", "rgba(0, 224, 255,0)"],
];
let myChart = echarts.init(
document.getElementById("dailyElectricityConsumption")
@@ -228,9 +228,9 @@ function getDailyElectricityConsumption() {
},
},
grid: {
- left: "5%",
- right: "10%",
- top: "15%",
+ left: "4%",
+ right: "5%",
+ top: "18%",
bottom: "5%",
containLabel: true,
},
@@ -241,31 +241,37 @@ function getDailyElectricityConsumption() {
show: true,
lineStyle: {
width: 1,
- color: "rgba(255, 255, 255, 0.60)",
+ type: "solid",
+ color: "rgba(255, 255, 255, 0.20)",
},
},
axisTick: {
show: false,
},
axisLabel: {
+ color: "rgba(221, 255, 253, 1)",
fontSize: 14,
- interval: 0,
+ interval: 1,
// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
- formatter: function (value) {
- const length = value.length;
- if (length > 3) {
- const start = Math.floor(length / 2);
- const str =
- value.slice(0, start) + "\n" + value.slice(start, length);
- return str;
- }
- return value;
- },
+ // formatter: function (value) {
+ // const length = value.length;
+ // if (length > 3) {
+ // const start = Math.floor(length / 2);
+ // const str =
+ // value.slice(0, start) + "\n" + value.slice(start, length);
+ // return str;
+ // }
+ // return value;
+ // },
},
},
yAxis: {
type: "value",
- minInterval: 1,
+ name: "单位:kW/h",
+ nameTextStyle: {
+ color: "#DDFFFD",
+ },
+ // minInterval: 1,
// y轴（竖直线）
axisLine: {
show: false,
@@ -285,7 +291,7 @@ function getDailyElectricityConsumption() {
// y轴文字
axisLabel: {
fontSize: 14,
- color: "rgba(255, 255, 255, 0.60)",
+ color: "#DDFFFD",
},
},
series: [
@@ -397,12 +403,181 @@ function getDailyElectricityConsumption() {
};
myChart.setOption(option);
}
+//负荷分类
+function getLoadClassification() {
+ var trafficWay = [
+ {
+ name: "三类项目",
+ value: 20,
+ },
+ {
+ name: "天分重点",
+ value: 30,
+ },
+ {
+ name: "集团重点",
+ value: 50,
+ },
+ ];
+ var total = 0;
+ for (var i = 0; i < trafficWay.length; i++) {
+ total += trafficWay[i].value;
+ }
+
+ var data = [];
+ var color = ["rgba(1, 246, 139, 1)", "rgba(91, 250, 241,1)", "rgba(255, 221, 0, 1)"];
+ for (var i = 0; i < trafficWay.length; i++) {
+ data.push(
+ {
+ value: trafficWay[i].value,
+ name: trafficWay[i].name,
+ itemStyle: {
+ normal: {
+ borderWidth: 5,
+ shadowBlur: 20,
+ borderRadius: 10,
+ borderColor: color[i],
+ shadowColor: color[i],
+ },
+ },
+ },
+ {
+ value: total * 0.04,
+ name: "",
+ itemStyle: {
+ normal: {
+ label: {
+ show: false,
+ },
+ labelLine: {
+ show: false,
+ },
+ color: "rgba(0, 0, 0, 0)",
+ borderWidth: 0,
+ },
+ },
+ }
+ );
+ }
+ let myChart = echarts.init(document.getElementById("loadClassification"));
+ var option = {
+ color: color,
+ title: [
+ {
+ text: "1694",
+ x: "47%",
+ y: "42%",
+ textAlign: "center",
+ textStyle: {
+ fontFamily: "Verdana-Bold",
+ fontSize: "24",
+ fontWeight: "bold",
+ color: "#FFF",
+ },
+ },
+ {
+ text: "kw",
+ x: "56%",
+ y: "45%",
+ textAlign: "center",
+ textStyle: {
+ fontSize: "14",
+ fontWeight: "100",
+ color: "#FFF",
+ },
+ },
+ {
+ text: "总负荷",
+ left: "49%",
+ top: "55%",
+ textAlign: "center",
+ textStyle: {
+ fontFamily: "MicrosoftYaHei",
+ fontSize: "14",
+ fontWeight: "100",
+ color: "#fff",
+ },
+ },
+ ],
+ tooltip: {
+ show: true,
+ },
+ series: [
+ {
+ name: "",
+ type: "pie",
+ clockWise: false,
+ radius: [55, 59],
+ hoverAnimation: false,
+ itemStyle: {
+ normal: {
+ label: {
+ show: true,
+ position: "outside",
+ color: "#FFFFFF",
+ fontSize: 16,
+ formatter: function (params) {
+ var percent = 0;
+ // var total = 0
+ // for (var i = 0; i < trafficWay.length; i++) {
+ // total += trafficWay[i].value
+ // }
+ percent = params.percent;
+ // percent = ((params.value / total) * 100).toFixed(0)
+ if (params.name !== "") {
+ return (
+ params.name +
+ "\n" +
+ `{a${params.dataIndex / 2}|` +
+ percent +
+ "%}"
+ );
+ } else {
+ return "";
+ }
+ },
+ textStyle: {
+ rich: {
+ a0: {
+ color: "#36E461",
+ padding: [10, 0],
+ fontSize: 15,
+ },
+ a1: {
+ color: "#0BEFF9",
+ padding: [10, 0],
+ fontSize: 15,
+ },
+ a2: {
+ color: "#9429E1",
+ padding: [10, 0],
+ fontSize: 15,
+ },
+ },
+ },
+ },
+ labelLine: {
+ length: 30,
+ length2: 50,
+ show: true,
+ color: "#00ffff",
+ },
+ },
+ },
+ data: data,
+ },
+ ],
+ };
+ myChart.setOption(option);
+}
//加载完dom执行
onMounted(() => {
//实时负荷
getRealTimeLoad();
//当日累计用电量
getDailyElectricityConsumption();
+ //负荷分类
+ getLoadClassification();
});
diff --git a/src/views/overview/index.vue b/src/views/overview/index.vue
index a9c31a8..5fe996a 100644
--- a/src/views/overview/index.vue
+++ b/src/views/overview/index.vue
@@ -4,6 +4,8 @@ import * as echarts from 'echarts'
import {onMounted} from "vue";
onMounted(()=>{
drawPowerEcharts()
+ //碳排放
+ getCarbonEmission()
})
const drawPowerEcharts = () =>{
let myChart = echarts.init(document.getElementById('power'))
@@ -110,6 +112,284 @@ const drawPowerEcharts = () =>{
};
myChart.setOption(option)
}
+//碳排放
+function getCarbonEmission() {
+ const offsetX = 10; //bar宽
+ const offsetY = 5; //倾斜角度
+ // 绘制左侧面
+ const CubeLeft = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint;
+ const c0 = [shape.x - 7, shape.y];
+ const c1 = [shape.x + 7, shape.y];
+ const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] - 7, xAxisPoint[1]];
+ ctx
+ .moveTo(c0[0], c0[1])
+ .lineTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .closePath();
+ ctx.stroke();
+ },
+ });
+ // 绘制右侧面
+ const CubeRight = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ const xAxisPoint = shape.xAxisPoint;
+ const c1 = [shape.x + 7, shape.y];
+ const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
+ const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
+ const c4 = [shape.x + 7 + 7, shape.y - 5];
+ ctx
+ .moveTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .lineTo(c4[0], c4[1])
+ .closePath();
+ ctx.stroke();
+ },
+ });
+ // 绘制顶面
+ const CubeTop = echarts.graphic.extendShape({
+ shape: {
+ x: 0,
+ y: 0,
+ },
+ buildPath: function (ctx, shape) {
+ const c1 = [shape.x - 7, shape.y];
+ const c2 = [shape.x + 8, shape.y];
+ const c3 = [shape.x + 15, shape.y - 5];
+ const c4 = [shape.x - 2, shape.y - 5];
+ ctx
+ .moveTo(c1[0], c1[1])
+ .lineTo(c2[0], c2[1])
+ .lineTo(c3[0], c3[1])
+ .lineTo(c4[0], c4[1])
+ .closePath();
+ ctx.stroke();
+ },
+ });
+ // 注册三个面图形
+ echarts.graphic.registerShape("CubeLeft", CubeLeft);
+ echarts.graphic.registerShape("CubeRight", CubeRight);
+ echarts.graphic.registerShape("CubeTop", CubeTop);
+ let xAxisData = [
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ ];
+ let seriesData = [100, 200, 300, 400, 200, 250,];
+ // 绿色渐变
+ // let colorArr = [["#12D5AF"], ["#0BC19D", "rgba(13,8,16,0)"], ["#68EFD4", "rgba(14,185,151,0)"]]
+ // 蓝色渐变
+ let colorArr = [
+ ["rgba(0, 193, 113, 1)"],
+ ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
+ ["rgba(0, 255, 140, 1)", "rgba(0, 255, 140,0)"],
+ ];
+ let myChart = echarts.init(
+ document.getElementById("carbonEmission")
+ );
+ const option = {
+ tooltip: {
+ trigger: "axis",
+ axisPointer: {
+ type: "shadow",
+ },
+ formatter: function (params, ticket, callback) {
+ const item = params[1];
+ return item.name + " : " + item.value;
+ },
+ },
+ grid: {
+ left: "4%",
+ right: "5%",
+ top: "18%",
+ bottom: "5%",
+ containLabel: true,
+ },
+ xAxis: {
+ type: "category",
+ data: xAxisData,
+ axisLine: {
+ show: true,
+ lineStyle: {
+ width: 1,
+ type: "solid",
+ color: "rgba(255, 255, 255, 0.20)",
+ },
+ },
+ axisTick: {
+ show: false,
+ },
+ axisLabel: {
+ color: "rgba(221, 255, 253, 1)",
+ fontSize: 14,
+ interval: 0,
+ // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
+ // formatter: function (value) {
+ // const length = value.length;
+ // if (length > 3) {
+ // const start = Math.floor(length / 2);
+ // const str =
+ // value.slice(0, start) + "\n" + value.slice(start, length);
+ // return str;
+ // }
+ // return value;
+ // },
+ },
+ },
+ yAxis: {
+ type: "value",
+ name: "单位:kW/h",
+ nameTextStyle: {
+ color: "#DDFFFD",
+ },
+ // minInterval: 1,
+ // y轴（竖直线）
+ axisLine: {
+ show: false,
+ },
+ // y轴横向 标线
+ splitLine: {
+ show: true,
+ lineStyle: {
+ type: "dashed",
+ color: "rgba(1, 39, 37, 0.30)",
+ },
+ },
+ // y轴刻度线
+ axisTick: {
+ show: false,
+ },
+ // y轴文字
+ axisLabel: {
+ fontSize: 14,
+ color: "#DDFFFD",
+ },
+ },
+ series: [
+ {
+ type: "custom",
+ renderItem: (params, api) => {
+ const location = api.coord([api.value(0), api.value(1)]);
+ return {
+ type: "group",
+ children: [
+ // 左侧面
+ {
+ type: "CubeLeft",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: colorArr[1][0],
+ },
+ {
+ offset: 1,
+ color: colorArr[1][1],
+ },
+ ]),
+ },
+ },
+ // 右侧面
+ {
+ type: "CubeRight",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: colorArr[2][0],
+ },
+ {
+ offset: 1,
+ color: colorArr[2][1],
+ },
+ ]),
+ },
+ },
+ // 顶部
+ {
+ type: "CubeTop",
+ shape: {
+ api,
+ xValue: api.value(0),
+ yValue: api.value(1),
+ x: location[0],
+ y: location[1],
+ xAxisPoint: api.coord([api.value(0), 0]),
+ },
+ style: {
+ fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+ {
+ offset: 0,
+ color: colorArr[0][0],
+ },
+ {
+ offset: 1,
+ color: colorArr[0][0],
+ },
+ ]),
+ },
+ },
+ ],
+ };
+ },
+ data: seriesData,
+ },
+ {
+ type: "bar",
+ label: {
+ normal: {
+ show: false,
+ position: "top",
+ formatter: (e) => {
+ return e.value;
+ },
+ fontSize: 16,
+ color: "#43C4F1",
+ offset: [0, -5],
+ },
+ },
+ itemStyle: {
+ color: "transparent",
+ },
+ tooltip: {},
+ data: seriesData,
+ },
+ ],
+ };
+ myChart.setOption(option);
+}
@@ -146,7 +426,7 @@ const drawPowerEcharts = () =>{
月
-