代码提交

src/views/energyMonitoring/index.vue

@@ -15,7 +15,7 @@
       <div class="title margin10">
         <span>负荷分类</span>
       </div>
-      <div class="margin10 box-bg"></div>
+      <div class="margin10 box-bg" id="loadClassification"></div>
     </div>
     <div class="overview-right-box">
       <!--  空调负荷 -->
@@ -134,10 +134,10 @@ function getDailyElectricityConsumption() {
     },
     buildPath: function (ctx, shape) {
       const xAxisPoint = shape.xAxisPoint;
-      const c0 = [shape.x - 10, shape.y];
+      const c0 = [shape.x - 7, shape.y];
-      const c1 = [shape.x + 10, shape.y];
+      const c1 = [shape.x + 7, shape.y];
-      const c2 = [xAxisPoint[0] + 10, xAxisPoint[1]];
+      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
-      const c3 = [xAxisPoint[0] - 10, 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 c1 = [shape.x + 7, shape.y];
-      const c2 = [xAxisPoint[0] + 9, xAxisPoint[1]];
+      const c2 = [xAxisPoint[0] + 7, xAxisPoint[1]];
-      const c3 = [xAxisPoint[0] + 9 + 8, xAxisPoint[1] - 10];
+      const c3 = [xAxisPoint[0] + 7 + 7, xAxisPoint[1] - 10];
-      const c4 = [shape.x + 7 + 8, shape.y - 5];
+      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 c1 = [shape.x - 7, shape.y];
-      const c2 = [shape.x + 10, 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(0, 224, 255,0)"],
-    ["rgba(0, 224, 255, 1)", "rgba(14,156,185,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%",
+      left: "4%",
-      right: "10%",
+      right: "5%",
-      top: "15%",
+      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) {
+        // formatter: function (value) {
-          const length = value.length;
+        //   const length = value.length;
-          if (length > 3) {
+        //   if (length > 3) {
-            const start = Math.floor(length / 2);
+        //     const start = Math.floor(length / 2);
-            const str =
+        //     const str =
-              value.slice(0, start) + "\n" + value.slice(start, length);
+        //       value.slice(0, start) + "\n" + value.slice(start, length);
-            return str;
+        //     return str;
-          }
+        //   }
-          return value;
+        //   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();
 });
 </script>
 

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);
+}
 </script>
 
 <template>
@@ -146,7 +426,7 @@ const drawPowerEcharts = () =>{
           <span class="month">月</span>
         </p>
       </div>
-      <div class="margin10 box-bg">
+      <div class="margin10 box-bg" id="carbonEmission">
 
       </div>
     </div>