diff --git a/src/assets/images/energyMonitoring/loadClassification.png b/src/assets/images/energyMonitoring/loadClassification.png
new file mode 100644
index 0000000..cac98ee
Binary files /dev/null and b/src/assets/images/energyMonitoring/loadClassification.png differ
diff --git a/src/views/energyEfficiency/index.vue b/src/views/energyEfficiency/index.vue
index 1250668..e78bb4d 100644
--- a/src/views/energyEfficiency/index.vue
+++ b/src/views/energyEfficiency/index.vue
@@ -1,79 +1,85 @@
 <script setup>
-import {ref, onMounted} from "vue";
+import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
 // 各系统能耗概况
-const systemTab = [{name: '空调'}, {name: '照明'}, {name: '展陈'}, {name: '消防'}, {name: '电梯'}]
-const systemTabIndex = ref(0)
+const systemTab = [
+  { name: "空调" },
+  { name: "照明" },
+  { name: "展陈" },
+  { name: "消防" },
+  { name: "电梯" },
+];
+const systemTabIndex = ref(0);
 const systemLeftList = ref([
   {
-    name: '今日用能峰值',
-    value: '322',
+    name: "今日用能峰值",
+    value: "322",
   },
   {
-    name: '本月用能峰值',
-    value: '35422',
-  }
-])
+    name: "本月用能峰值",
+    value: "35422",
+  },
+]);
 const systemRightList = ref([
   [
     {
-      name: '今日',
-      value: '3122',
-      unit:'kWh'
+      name: "今日",
+      value: "3122",
+      unit: "kWh",
     },
     {
-      name: '昨日',
-      value: '9400',
-      unit:'kWh'
+      name: "昨日",
+      value: "9400",
+      unit: "kWh",
     },
     {
-      name:'同比',
-      value:'-201',
-      unit:'%'
-    }
-  ],//日
+      name: "同比",
+      value: "-201",
+      unit: "%",
+    },
+  ], //日
   [
     {
-      name: '本月',
-      value: '3122',
-      unit:'kWh'
+      name: "本月",
+      value: "3122",
+      unit: "kWh",
     },
     {
-      name: '上月',
-      value: '9400',
-      unit:'kWh'
+      name: "上月",
+      value: "9400",
+      unit: "kWh",
     },
     {
-      name:'同比',
-      value:'-201',
-      unit:'%'
-    }
-  ],//月
+      name: "同比",
+      value: "-201",
+      unit: "%",
+    },
+  ], //月
   [
     {
-      name: '今年',
-      value: '3122',
-      unit:'kWh'
+      name: "今年",
+      value: "3122",
+      unit: "kWh",
     },
     {
-      name: '去年',
-      value: '9400',
-      unit:'kWh'
+      name: "去年",
+      value: "9400",
+      unit: "kWh",
     },
     {
-      name:'同比',
-      value:'-201',
-      unit:'%'
-    }
-  ]//年
-])
+      name: "同比",
+      value: "-201",
+      unit: "%",
+    },
+  ], //年
+]);
 const selectSystemTab = (index) => {
-  systemTabIndex.value = index
-}
+  systemTabIndex.value = index;
+};
 
 // 能耗总量echarts
 const drawTotalChart = () => {
-  let myChart = echarts.init(document.getElementById('totalEnergy'))
+  let myChart = echarts.init(document.getElementById("totalEnergy"));
   const option = {
     // backgroundColor: "#05224d",
     tooltip: {},
@@ -85,7 +91,6 @@ const drawTotalChart = () => {
       containLabel: true,
     },
     xAxis: [
-
       {
         type: "category",
         axisLine: {
@@ -103,12 +108,25 @@ const drawTotalChart = () => {
             color: "#DDFFFD",
             // margin: 40,
           },
-
         },
 
-        axisTick: {show: false},
+        axisTick: { show: false },
         boundaryGap: true,
-        data: ["11-01", "11-02", "11-03", "11-04", "11-05", "11-07", "11-08", "11-09", "11-10", "11-11", "11-12", "11-13", "11-14"],
+        data: [
+          "11-01",
+          "11-02",
+          "11-03",
+          "11-04",
+          "11-05",
+          "11-07",
+          "11-08",
+          "11-09",
+          "11-10",
+          "11-11",
+          "11-12",
+          "11-13",
+          "11-14",
+        ],
       },
     ],
     yAxis: [
@@ -127,17 +145,17 @@ const drawTotalChart = () => {
         splitLine: {
           show: true,
           lineStyle: {
-            type: 'dashed',
+            type: "dashed",
             color: "rgba(1, 39, 37, 0.30)",
           },
         },
-        axisLine: {show: false},
+        axisLine: { show: false },
         axisLabel: {
           textStyle: {
             color: "#DDFFFD",
           },
         },
-        axisTick: {show: false},
+        axisTick: { show: false },
       },
     ],
     series: [
@@ -155,15 +173,15 @@ const drawTotalChart = () => {
           //区域填充样式
           //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
           color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {offset: 0, color: "rgba(1, 246, 139, 0.7)"},
-                {offset: 1, color: "rgba(1, 246, 139, 0)"},
-              ],
-              false
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
+              { offset: 1, color: "rgba(1, 246, 139, 0)" },
+            ],
+            false
           ),
 
           shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
@@ -173,25 +191,25 @@ const drawTotalChart = () => {
       },
     ],
   };
-  myChart.setOption(option)
-}
+  myChart.setOption(option);
+};
 // 定额管理charts
 const drawManagement = () => {
-  let myChart = echarts.init(document.getElementById('management'))
+  let myChart = echarts.init(document.getElementById("management"));
   const option = {
     // backgroundColor: "#05224d",
     tooltip: {},
     legend: {
       show: true,
-      icon: 'rect',
-      right: '10',
-      top: '5',
-      layout: 'vertical',
-      itemHeight: '10',
+      icon: "rect",
+      right: "10",
+      top: "5",
+      layout: "vertical",
+      itemHeight: "10",
       // itemWidth:'10',
       textStyle: {
-        color: "rgba(221, 255, 253, 1)"
-      }
+        color: "rgba(221, 255, 253, 1)",
+      },
     },
     grid: {
       top: "18%",
@@ -201,7 +219,6 @@ const drawManagement = () => {
       containLabel: true,
     },
     xAxis: [
-
       {
         type: "category",
         axisLine: {
@@ -219,10 +236,9 @@ const drawManagement = () => {
             color: "#DDFFFD",
             margin: 40,
           },
-
         },
 
-        axisTick: {show: false},
+        axisTick: { show: false },
         boundaryGap: true,
         data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
       },
@@ -243,29 +259,30 @@ const drawManagement = () => {
         splitLine: {
           show: true,
           lineStyle: {
-            type: 'dashed',
+            type: "dashed",
             color: "rgba(1, 39, 37, 0.30)",
           },
         },
-        axisLine: {show: false},
+        axisLine: { show: false },
         axisLabel: {
           textStyle: {
             color: "#DDFFFD",
           },
         },
-        axisTick: {show: false},
+        axisTick: { show: false },
       },
     ],
     series: [
       {
         name: "单位建筑面积综合能耗",
-        markLine: { //阈值
+        markLine: {
+          //阈值
           //最大值和最小值
           data: [
             {
               yAxis: 9,
               label: {
-                show: false
+                show: false,
               },
               lineStyle: {
                 width: 1,
@@ -291,15 +308,15 @@ const drawManagement = () => {
           //区域填充样式
           //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
           color: new echarts.graphic.LinearGradient(
-              0,
-              0,
-              0,
-              1,
-              [
-                {offset: 0, color: "rgba(221, 255, 253, .7)"},
-                {offset: 1, color: "rgba(221, 255, 253, 0)"},
-              ],
-              false
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: "rgba(221, 255, 253, .7)" },
+              { offset: 1, color: "rgba(221, 255, 253, 0)" },
+            ],
+            false
           ),
 
           shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
@@ -309,13 +326,12 @@ const drawManagement = () => {
       },
     ],
   };
-  myChart.setOption(option)
-}
+  myChart.setOption(option);
+};
 // 能效流向
 const drawEnergyFlow = () => {
-  let myChart = echarts.init(document.getElementById('energyFlow'))
+  let myChart = echarts.init(document.getElementById("energyFlow"));
   let sourceData = [
-
     {
       name: "电",
       nameValue: 1562,
@@ -338,16 +354,16 @@ const drawEnergyFlow = () => {
     },
   ];
   let sangjiColor = [
-    'rgba(91, 250, 241, 1)',
-    'rgba(91, 250, 241, 1)',
-    'rgba(91, 250, 241, 1)',
-    'rgba(91, 250, 241, 1)'
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
+    "rgba(91, 250, 241, 1)",
   ];
   let itemStyleSource = [];
   for (let d = 0; d < sourceData.length; d++) {
     if (sourceData[d].name == "电") {
       sourceData[d].label = {
-        position: 'right'
+        position: "right",
       };
     }
     sourceData[d].itemStyle = {
@@ -365,7 +381,7 @@ const drawEnergyFlow = () => {
         bottom: "4%",
         left: "6%",
         right: "5%",
-        nodeWidth: '13',
+        nodeWidth: "13",
         // nodeAlign:'right',
         focusNodeAdjacency: "allEdges",
         data: itemStyleSource,
@@ -385,39 +401,40 @@ const drawEnergyFlow = () => {
             target: "电梯",
             value: 8,
           },
-
         ],
         label: {
           position: "left",
           color: "#fff",
           fontSize: 14,
           formatter: function (params) {
-
             if (params.dataIndex == 0) {
               return (
-                  "{a|" +
-                  params.data.name +
-                  "}\n" + "{b|" +
-                  params.data.nameValue + "}" +
-                  " " +
-                  params.data.valueUnit
+                "{a|" +
+                params.data.name +
+                "}\n" +
+                "{b|" +
+                params.data.nameValue +
+                "}" +
+                " " +
+                params.data.valueUnit
               );
             } else {
               return (
-                  "{name|" +
-                  params.data.name +
-                  "}" + "{value|" +
-                  params.data.nameValue + "}" +
-                  // " " +
-                  params.data.valueUnit
+                "{name|" +
+                params.data.name +
+                "}" +
+                "{value|" +
+                params.data.nameValue +
+                "}" +
+                // " " +
+                params.data.valueUnit
               );
             }
-
           },
           rich: {
             a: {
               padding: [0, 15, 10, 0],
-              fontSize: "14"
+              fontSize: "14",
             },
             b: {
               color: "rgba(91, 250, 241, 1)",
@@ -432,9 +449,8 @@ const drawEnergyFlow = () => {
               color: "rgba(91, 250, 241, 1)",
               fontWeight: "600",
               fontSize: "16",
-              padding: [0, 10, 0, 10]
-            }
-
+              padding: [0, 10, 0, 10],
+            },
           },
         },
         lineStyle: {
@@ -448,17 +464,297 @@ const drawEnergyFlow = () => {
       },
     ],
   };
-  myChart.setOption(option)
+  myChart.setOption(option);
+};
+//复费率
+function getExhibitionLoad() {
+  let myChart = echarts.init(document.getElementById("exhibitionLoad"));
+  var option = {
+    tooltip: {
+      axisPointer: {
+        type: "shadow",
+        textStyle: {
+          color: "#fff",
+        },
+      },
+    },
+    grid: {
+      borderWidth: 0,
+      top: 40,
+      bottom: 40,
+      left: 40,
+      right:20,
+      textStyle: {
+        color: "#fff",
+      },
+    },
+    legend: {
+      icon: "rect",
+      right: "4%",
+      top:'3%',
+      itemWidth: 20, // 标签宽度为20px
+      itemHeight: 10, // 标签高度为10px
+      textStyle: {
+        color: "#ffffff",
+      },
+      data: ["尖", "峰", "平", "谷",'深'],
+    },
+    calculable: true,
+    xAxis: [
+      {
+        type: "category",
+        trigger: "axis",
+        axisLine: {
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        splitLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        splitArea: {
+          show: false,
+        },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+        },
+        data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name:"单位:kWh",
+        nameTextStyle:{
+          color: "#DDFFFD",
+          // align:"right",
+          padding:[0,0,0,0]
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type:'dashed',
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: "#fff",
+          },
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        splitArea: {
+          show: false,
+        },
+      },
+    ],
+    series: [
+      {
+        name: "尖",
+        type: "bar",
+        stack: "Total1",
+        barMaxWidth: 15,
+        barGap: "10%",
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(255, 165, 29, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 165, 29, 0)",
+              },
+            ]),
+            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(255, 165, 29, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 165, 29, 0)",
+              },
+            ]),
+          },
+        },
+        data: [1, 2, 3, 4, 5, 6, 7],
+      },
+      {
+        name: "峰",
+        type: "bar",
+        barMaxWidth: 15,
+        stack: "Total1",
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(80, 194, 255, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(80, 194, 255, 0)",
+              },
+            ]),
+            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(80, 194, 255, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(80, 194, 255, 0)",
+              },
+            ]),
+          },
+        },
+        data: [1, 2, 3, 4, 5, 6, 7],
+      },
+      {
+        name: "平",
+        type: "bar",
+        barMaxWidth: 15,
+        stack: "Total1",
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(255, 221, 0, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 221, 0, 0)",
+              },
+            ]),
+            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(255, 221, 0, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(255, 221, 0, 0)",
+              },
+            ]),
+            barBorderRadius: 0,
+          },
+        },
+        data: [1, 2, 3, 4, 5, 6, 7],
+      },
+      {
+        name: "谷",
+        type: "bar",
+        barMaxWidth: 15,
+        stack: "Total1",
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(1, 246, 139, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(1, 246, 139, 0)",
+              },
+            ]),
+            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(1, 246, 139, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(1, 246, 139, 0)",
+              },
+            ]),
+            barBorderRadius: 0,
+          },
+        },
+        data: [1, 2, 3, 4, 5, 6, 7],
+      },
+      {
+        name: "深",
+        type: "bar",
+        barMaxWidth: 15,
+        stack: "Total1",
+        label: {
+          show: false,
+        },
+        itemStyle: {
+          normal: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(91, 250, 241, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(91, 250, 241, 0)",
+              },
+            ]),
+            borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              {
+                offset: 0,
+                color: "rgba(91, 250, 241, 1)",
+              },
+              {
+                offset: 1,
+                color: "rgba(91, 250, 241, 0)",
+              },
+            ]),
+            barBorderRadius: 0,
+          },
+        },
+        data: [1, 2, 3, 4, 5, 6, 7],
+      },
+    ],
+  };
+  myChart.setOption(option);
 }
 // dom加载
 onMounted(() => {
   // 能耗总量
-  drawTotalChart()
+  drawTotalChart();
   // 定额管理
-  drawManagement()
+  drawManagement();
   // 能效流向
-  drawEnergyFlow()
-})
+  drawEnergyFlow();
+  //复费率
+  getExhibitionLoad();
+});
 </script>
 
 <template>
@@ -481,9 +777,7 @@ onMounted(() => {
           <span class="month">月</span>
         </p>
       </div>
-      <div id="management" class="margin10 box-bg">
-
-      </div>
+      <div id="management" class="margin10 box-bg"></div>
       <!--  能效流向 -->
       <div class="title margin10">
         <span>能效流向</span>
@@ -497,30 +791,38 @@ onMounted(() => {
       </div>
       <div id="airConditioningLoad" class="margin10 box-bg">
         <ul class="system-tab">
-          <li v-for="(item,index) in systemTab" :class="index==systemTabIndex?'tab-select':''"
-              @click="selectSystemTab(index)">
+          <li
+            v-for="(item, index) in systemTab"
+            :class="index == systemTabIndex ? 'tab-select' : ''"
+            @click="selectSystemTab(index)"
+          >
             <span>{{ item.name }}</span>
           </li>
         </ul>
         <div class="system-content">
           <div class="system-content-left">
-            <div v-for="(item,index) in systemLeftList" class="system-content-left-item">
+            <div
+              v-for="(item, index) in systemLeftList"
+              class="system-content-left-item"
+            >
               <p class="system-content-left-item-p1">{{ item.name }}</p>
               <p class="system-content-left-item-p2">{{ item.value }}</p>
             </div>
           </div>
           <div class="system-content-right">
-            <div class="system-content-right-item" v-for="(item,index) in systemRightList">
-              <ul  class="system-content-right-item-title">
-                <li v-for="(s,i) in item">{{s.name}}</li>
+            <div
+              class="system-content-right-item"
+              v-for="(item, index) in systemRightList"
+            >
+              <ul class="system-content-right-item-title">
+                <li v-for="(s, i) in item">{{ s.name }}</li>
               </ul>
               <div class="system-content-right-item-box">
-                  <span v-for="v in item" :class="v.unit==='%'?'yoy':''">{{v.value}} <span class="unit">{{v.unit}}</span></span>
-
+                <span v-for="v in item" :class="v.unit === '%' ? 'yoy' : ''"
+                  >{{ v.value }} <span class="unit">{{ v.unit }}</span></span
+                >
               </div>
             </div>
-
-
           </div>
         </div>
       </div>
@@ -547,7 +849,7 @@ onMounted(() => {
 .system-tab {
   display: flex;
   justify-content: space-evenly;
-  padding-top: .7rem;
+  padding-top: 0.7rem;
   box-sizing: border-box;
 
   .tab-select {
@@ -559,8 +861,8 @@ onMounted(() => {
     cursor: pointer;
     color: rgba(221, 255, 253, 1);
     background-size: 100% 100%;
-    font-size: .8rem;
-    padding: .2rem 1.1rem;
+    font-size: 0.8rem;
+    padding: 0.2rem 1.1rem;
   }
 }
 
@@ -586,7 +888,7 @@ onMounted(() => {
       &-p1 {
         height: 29%;
         text-align: center;
-        font-size: .875rem;
+        font-size: 0.875rem;
         color: rgba(221, 255, 253, 1);
       }
 
@@ -614,33 +916,32 @@ onMounted(() => {
       //background-color: #000;
       width: 100%;
 
-      &-title{
+      &-title {
         display: flex;
         justify-content: space-between;
-        font-size: .8rem;
-        padding: 0 .5rem;
+        font-size: 0.8rem;
+        padding: 0 0.5rem;
         box-sizing: border-box;
       }
-      &-box{
+      &-box {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        padding: 0 .5rem;
+        padding: 0 0.5rem;
         box-sizing: border-box;
         font-weight: bold;
         background-image: url("@/assets/images/system-box.png");
         background-size: 100% 100%;
         height: 65%;
         width: 100%;
-        color: rgba(255,255,255,1);
-        .yoy{
-          color:rgba(1, 246, 139, 1);
+        color: rgba(255, 255, 255, 1);
+        .yoy {
+          color: rgba(1, 246, 139, 1);
         }
-
       }
     }
   }
 
   //background-color: #fff;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/energyMonitoring/index.vue b/src/views/energyMonitoring/index.vue
index 93be36a..06e74b2 100644
--- a/src/views/energyMonitoring/index.vue
+++ b/src/views/energyMonitoring/index.vue
@@ -19,7 +19,7 @@
     </div>
     <div class="page-right-box">
       <!--  空调负荷 -->
-      <div class="title" >
+      <div class="title">
         <span>空调负荷</span>
       </div>
       <div class="margin10 box-bg" id="airConditioningLoad"></div>
@@ -40,9 +40,9 @@
 <script setup>
 import { ref, onMounted } from "vue";
 import * as echarts from "echarts";
-const getImageUrl=(name)=>{
-  return new URL(name, import.meta.url).href
-}
+const getImageUrl = (name) => {
+  return new URL(name, import.meta.url).href;
+};
 //实时负荷
 function getRealTimeLoad() {
   let myChart = echarts.init(document.getElementById("realTimeLoad"));
@@ -407,8 +407,8 @@ function getDailyElectricityConsumption() {
 }
 
 //空调负荷
-function drawAirConditioningLoad(){
-  let myChart = echarts.init(document.getElementById('airConditioningLoad'))
+function drawAirConditioningLoad() {
+  let myChart = echarts.init(document.getElementById("airConditioningLoad"));
   const option = {
     // backgroundColor: "#05224d",
     tooltip: {},
@@ -420,109 +420,6 @@ function drawAirConditioningLoad(){
       containLabel: true,
     },
     xAxis: [
-
-      {
-        type: "category",
-        axisLine: {
-          //坐标轴轴线相关设置。数学上的x轴
-          show: true,
-          lineStyle: {
-            // type:'dashed',
-            color: "#557775"
-            // color: "#233e64",
-          },
-        },
-        axisLabel: {
-          //坐标轴刻度标签的相关设置
-          textStyle: {
-            color: "#DDFFFD",
-            margin: 40,
-          },
-
-        },
-
-        axisTick: { show: false },
-        boundaryGap: true,
-        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
-      },
-    ],
-    yAxis: [
-      {
-        type: "value",
-        name:"单位:kW",
-        nameTextStyle:{
-          color: "#DDFFFD",
-          align:"right",
-        },
-        min: 0,
-        max: 2000,
-        splitNumber: 5,
-        splitLine: {
-          show: true,
-          lineStyle: {
-            type:'dashed',
-            color: "rgba(1, 39, 37, 0.30)",
-          },
-        },
-        axisLine: { show: false },
-        axisLabel: {
-          textStyle: {
-            color: "#DDFFFD",
-          },
-        },
-        axisTick: { show: false },
-      },
-    ],
-    series: [
-      {
-        name: "异常流量",
-        type: "line",
-        smooth: true, //是否平滑曲线显示
-        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
-        symbolSize: 0,
-
-        lineStyle: {
-            color: "#5BFAF1", // 线条颜色
-        },
-        areaStyle: {
-          //区域填充样式
-            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-            color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
-                  { offset: 1, color: "rgba(91, 250, 241, 0)" },
-                ],
-                false
-            ),
-
-            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
-            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
-        },
-        data: [500, 800, 900,1200, 1800, 1600],
-      },
-    ],
-  };
-  myChart.setOption(option)
-}
-// 展陈负荷
-function drawExhibitionLoad(){
-  let myChart = echarts.init(document.getElementById('exhibitionLoad'))
-  const option = {
-    // backgroundColor: "#05224d",
-    tooltip: {},
-    grid: {
-      top: "18%",
-      left: "4%",
-      right: "4%",
-      bottom: "4%",
-      containLabel: true,
-    },
-    xAxis: [
-
       {
         type: "category",
         axisLine: {
@@ -540,7 +437,6 @@ function drawExhibitionLoad(){
             color: "#DDFFFD",
             margin: 40,
           },
-
         },
 
         axisTick: { show: false },
@@ -551,10 +447,10 @@ function drawExhibitionLoad(){
     yAxis: [
       {
         type: "value",
-        name:"单位:kW",
-        nameTextStyle:{
+        name: "单位:kW",
+        nameTextStyle: {
           color: "#DDFFFD",
-          align:"right",
+          align: "right",
         },
         min: 0,
         max: 2000,
@@ -562,7 +458,7 @@ function drawExhibitionLoad(){
         splitLine: {
           show: true,
           lineStyle: {
-            type:'dashed',
+            type: "dashed",
             color: "rgba(1, 39, 37, 0.30)",
           },
         },
@@ -584,36 +480,135 @@ function drawExhibitionLoad(){
         symbolSize: 0,
 
         lineStyle: {
-            color: "rgba(1, 246, 139, 1)", // 线条颜色
+          color: "#5BFAF1", // 线条颜色
         },
         areaStyle: {
           //区域填充样式
-            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
-            color: new echarts.graphic.LinearGradient(
-                0,
-                0,
-                0,
-                1,
-                [
-                  { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
-                  { offset: 1, color: "rgba(1, 246, 139, 0)" },
-                ],
-                false
-            ),
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: "rgba(91, 250, 241, 0.40)" },
+              { offset: 1, color: "rgba(91, 250, 241, 0)" },
+            ],
+            false
+          ),
 
-            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
-            shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
         },
-        data: [500, 800, 900,1200, 1800, 1600],
+        data: [500, 800, 900, 1200, 1800, 1600],
       },
     ],
   };
-  myChart.setOption(option)
+  myChart.setOption(option);
+}
+// 展陈负荷
+function drawExhibitionLoad() {
+  let myChart = echarts.init(document.getElementById("exhibitionLoad"));
+  const option = {
+    // backgroundColor: "#05224d",
+    tooltip: {},
+    grid: {
+      top: "18%",
+      left: "4%",
+      right: "4%",
+      bottom: "4%",
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: "category",
+        axisLine: {
+          //坐标轴轴线相关设置。数学上的x轴
+          show: true,
+          lineStyle: {
+            // type:'dashed',
+            color: "#557775",
+            // color: "#233e64",
+          },
+        },
+        axisLabel: {
+          //坐标轴刻度标签的相关设置
+          textStyle: {
+            color: "#DDFFFD",
+            margin: 40,
+          },
+        },
 
-  }
+        axisTick: { show: false },
+        boundaryGap: true,
+        data: ["09:00", "11:00", "13:00", "15:00", "17:00", "19:00"],
+      },
+    ],
+    yAxis: [
+      {
+        type: "value",
+        name: "单位:kW",
+        nameTextStyle: {
+          color: "#DDFFFD",
+          align: "right",
+        },
+        min: 0,
+        max: 2000,
+        splitNumber: 5,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: "dashed",
+            color: "rgba(1, 39, 37, 0.30)",
+          },
+        },
+        axisLine: { show: false },
+        axisLabel: {
+          textStyle: {
+            color: "#DDFFFD",
+          },
+        },
+        axisTick: { show: false },
+      },
+    ],
+    series: [
+      {
+        name: "异常流量",
+        type: "line",
+        smooth: true, //是否平滑曲线显示
+        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
+        symbolSize: 0,
+
+        lineStyle: {
+          color: "rgba(1, 246, 139, 1)", // 线条颜色
+        },
+        areaStyle: {
+          //区域填充样式
+          //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
+          color: new echarts.graphic.LinearGradient(
+            0,
+            0,
+            0,
+            1,
+            [
+              { offset: 0, color: "rgba(1, 246, 139, 0.7)" },
+              { offset: 1, color: "rgba(1, 246, 139, 0)" },
+            ],
+            false
+          ),
+
+          shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
+          shadowBlur: 20, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
+        },
+        data: [500, 800, 900, 1200, 1800, 1600],
+      },
+    ],
+  };
+  myChart.setOption(option);
+}
 //   配电回路排名
-function drawRanking(){
-  let myChart = echarts.init(document.getElementById('ranking'))
+function drawRanking() {
+  let myChart = echarts.init(document.getElementById("ranking"));
   let option = {
     grid: {
       left: "5%",
@@ -629,15 +624,15 @@ function drawRanking(){
       },
       formatter: function (params) {
         return (
-            params[0].name +
-            "<br/>" +
-            "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
-            params[0].seriesName +
-            " : " +
-            Number(
-                (params[0].value.toFixed(4) / 10000).toFixed(2)
-            ).toLocaleString() +
-            " 万元<br/>"
+          params[0].name +
+          "<br/>" +
+          "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
+          params[0].seriesName +
+          " : " +
+          Number(
+            (params[0].value.toFixed(4) / 10000).toFixed(2)
+          ).toLocaleString() +
+          " 万元<br/>"
         );
       },
     },
@@ -656,24 +651,21 @@ function drawRanking(){
           show: true,
           textStyle: {
             color: "#fff",
-            fontSize:"14"
+            fontSize: "14",
           },
-          formatter: function (value,index) {
-            return "{a|TOP " +  (index+1) +
-                "}" + "{b|" +  value +
-                "}";
+          formatter: function (value, index) {
+            return "{a|TOP " + (index + 1) + "}" + "{b|" + value + "}";
+          },
+          rich: {
+            a: {
+              width: 45,
+              // padding: [0, 8, 0,0],
+              fontSize: "14",
+              backgroundColor: {
+                image: getImageUrl("../../assets/images/rank-bg.png"),
+              },
+            },
           },
-          rich:{
-              a:{
-                width:45,
-                // padding: [0, 8, 0,0],
-                fontSize:"14",
-                backgroundColor:{
-
-                  image:getImageUrl('../../assets/images/rank-bg.png')
-                }
-              }
-          }
         },
         splitLine: {
           show: false,
@@ -697,26 +689,21 @@ function drawRanking(){
           padding: [0, 0, 10, -10],
           verticalAlign: "bottom",
           inside: true,
-          textStyle: {
-
-          },
+          textStyle: {},
           formatter: function (value) {
-            return "{a|" +  (value / 10000).toLocaleString() +
-                "}" + "{b|kWh}";
+            return "{a|" + (value / 10000).toLocaleString() + "}" + "{b|kWh}";
           },
-          rich:{
-            a:{
+          rich: {
+            a: {
               fontSize: "16",
-              color:"rgba(0, 255, 240, 1)",
-              padding:[0,6,0,0]
+              color: "rgba(0, 255, 240, 1)",
+              padding: [0, 6, 0, 0],
             },
-            b:{
+            b: {
               color: "#fff",
               fontSize: "12",
-
-            }
-
-          }
+            },
+          },
         },
         data: [50000000, 22000000, 10000000, 5000000, 1],
       },
@@ -748,26 +735,26 @@ function drawRanking(){
         barGap: "-115%",
         data: [50000000, 50000000, 50000000, 50000000, 50000000],
         itemStyle: {
-          color: 'rgba(5, 33, 31, 0.32)',
+          color: "rgba(5, 33, 31, 0.32)",
         },
       },
     ],
   };
-  myChart.setOption(option)
+  myChart.setOption(option);
 }
 //负荷分类
 function getLoadClassification() {
   var trafficWay = [
     {
-      name: "三类项目",
+      name: "一级",
       value: 20,
     },
     {
-      name: "天分重点",
+      name: "二级",
       value: 30,
     },
     {
-      name: "集团重点",
+      name: "三级",
       value: 50,
     },
   ];
@@ -777,7 +764,11 @@ function getLoadClassification() {
   }
 
   var data = [];
-  var color = ["rgba(1, 246, 139, 1)", "rgba(91, 250, 241,1)", "rgba(255, 221, 0, 1)"];
+  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(
       {
@@ -811,8 +802,25 @@ function getLoadClassification() {
       }
     );
   }
+  var img =
+    "/src/assets/images/energyMonitoring/loadClassification.png";
   let myChart = echarts.init(document.getElementById("loadClassification"));
   let option = {
+    graphic: {
+      elements: [
+        {
+          type: "image",
+          z: 3,
+          style: {
+            image: img,
+            width: 188,
+            height: 188,
+          },
+          left: "center",
+          top: "center",
+        },
+      ],
+    },
     color: color,
     title: [
       {
@@ -829,7 +837,7 @@ function getLoadClassification() {
       },
       {
         text: "kw",
-        x: "56%",
+        x: "58%",
         y: "45%",
         textAlign: "center",
         textStyle: {
@@ -875,36 +883,46 @@ function getLoadClassification() {
                 //   total += trafficWay[i].value
                 // }
                 percent = params.percent;
+                let unit = "kW";
                 // percent = ((params.value / total) * 100).toFixed(0)
                 if (params.name !== "") {
                   return (
-                    params.name +
-                    "\n" +
                     `{a${params.dataIndex / 2}|` +
                     percent +
-                    "%}"
+                    "}" +
+                    `{s0|` +
+                    unit +
+                    "}" +
+                    "\n" +
+                    params.name
                   );
                 } else {
                   return "";
                 }
               },
+              padding: [60, -50],
               textStyle: {
                 rich: {
                   a0: {
-                    color: "#36E461",
-                    padding: [10, 0],
+                    color: "rgba(1, 246, 139, 1)",
+                    padding: [0, 0, 10, 0],
                     fontSize: 15,
                   },
                   a1: {
-                    color: "#0BEFF9",
-                    padding: [10, 0],
+                    color: "rgba(91, 250, 241,1)",
+                    padding: [0, 0, 10, 0],
                     fontSize: 15,
                   },
                   a2: {
-                    color: "#9429E1",
-                    padding: [10, 0],
+                    color: "rgba(255, 221, 0, 1)",
+                    padding: [0, 0, 10, 0],
                     fontSize: 15,
                   },
+                  s0: {
+                    color: "#fff",
+                    padding: [0, 0, 10, 5],
+                    fontSize: 12,
+                  },
                 },
               },
             },
@@ -939,6 +957,4 @@ onMounted(() => {
 });
 </script>
 
-<style lang="scss" scoped>
-
-</style>
+<style lang="scss" scoped></style>