zyh

src/router/index.js

@@ -30,47 +30,38 @@ const routes = [
       {
         path: "/nxglnh",
         name: "nxglnh",
-        component: () => import("@/views/Zhou/NXGLNH.vue")
+        component: () => import("@/views/Zhou/NXGLNH.vue"),
       },
       // 能效管理
       {
         path: "/nxgl",
         name: "nxgl",
-        component: () => import("@/views/Zhou/NXGL.vue")
+        component: () => import("@/views/Zhou/NXGL.vue"),
       },
       // 碳资源管理
       {
         path: "/tzcgl",
         name: "tzcgl",
-        component: () => import("@/views/Zhou/TZCGL.vue")
+        component: () => import("@/views/Zhou/TZCGL.vue"),
       },
       // 碳资源熟料管理
       {
         path: "/tzcglsl",
         name: "tzcglsl",
-        component: () => import("@/views/Zhou/TZCGLSL.vue")
+        component: () => import("@/views/Zhou/TZCGLSL.vue"),
       },
       {
         path: "/znywjk",
         name: "znywjk",
-        component: () => import("@/views/Zhou/ZNYWJK.vue")
+        component: () => import("@/views/Zhou/ZNYWJK.vue"),
       },
+      //配电室
       {
         path: "pds",
         name: "pds",
         component: () => import("../views/lll/PDS.vue"),
       },
-      //测试页面
+      //能源监测
-      {
-        path: "pds1",
-        name: "pds1",
-        component: () => import("../views/lll/NYJCD/PDS.vue"),
-      },
-      {
-        path: "scx1",
-        name: "scx1",
-        component: () => import("../views/lll/NYJCD/SCX1.vue"),
-      },
       {
         path: "area",
         name: "area",

src/views/Index.vue

@@ -4,82 +4,97 @@
       <RouterView />
     </div>
     <div class="footer">
-      <div class="box1" v-if="isShow">
+      <div class="box1" @click="go1">
-        <img src="../assets/img/生产工艺按钮.png" alt="" class="tabbars1" />
+        <img
-        <p>生产工艺</p>
+          src="../assets/img/生产工艺按钮.png"
-      </div>
+          v-show="flag1"
-      <div class="box1" v-else>
+          alt=""
+          class="tabbars1"
+        />
         <img
           src="../assets/img/生产工艺按钮选中_hover.png"
           alt=""
+          v-show="!flag1"
           class="tabbars1"
         />
         <p>生产工艺</p>
       </div>
-      <div class="box2" v-if="isShow">
+
+      <div class="box2" @click="go2">
         <img
           src="../assets/img/能源监测按钮  拷贝.png"
           alt=""
+          v-show="flag2"
           class="tabbars2"
         />
-        <p>能源监测</p>
-      </div>
-      <div class="box2" v-else>
         <img
           src="../assets/img/能源监测按钮 _hover.png"
           alt=""
+          v-show="!flag2"
           class="tabbars2"
         />
         <p>能源监测</p>
       </div>
-      <div class="box3" v-if="isShow">
+
-        <img src="../assets/img/负荷管理按钮 .png" alt="" class="tabbars3" />
+      <div class="box3" @click="go3">
-        <p>负荷管理</p>
+        <img
-      </div>
+          src="../assets/img/负荷管理按钮 .png"
-      <div class="box3" v-else>
+          v-show="flag3"
+          alt=""
+          class="tabbars3"
+        />
         <img
           src="../assets/img/负荷管理按钮  拷贝_hover.png"
           alt=""
+          v-show="!flag3"
           class="tabbars3"
         />
         <p>负荷管理</p>
       </div>
-      <div class="box4" v-if="isShow">
+
+      <div class="box4" @click="go4">
         <img
           src="../assets/img/能效管理按钮  拷贝.png"
           alt=""
+          v-show="flag4"
           class="tabbars4"
         />
-        <p>能效管理</p>
-      </div>
-      <div class="box4" v-else>
         <img
           src="../assets/img/能效管理按钮_hover.png"
           alt=""
+          v-show="!flag4"
           class="tabbars4"
         />
         <p>能效管理</p>
       </div>
-      <div class="box5" v-if="isShow">
+
+      <div class="box5" @click="go5">
         <img
           src="../assets/img/智能运维按钮   拷贝.png"
           alt=""
+          v-show="flag5"
+          class="tabbars5"
+        />
+        <img
+          src="../assets/img/智能运维按_hover.png"
+          v-show="!flag5"
+          alt=""
           class="tabbars5"
         />
         <p>智能运维</p>
       </div>
-      <div class="box5" v-else>
+
-        <img src="../assets/img/智能运维按_hover.png" alt="" class="tabbars5" />
+      <div class="box6" @click="go6">
-        <p>智能运维</p>
+        <img
-      </div>
+          src="../assets/img/碳资产管理.png"
-      <div class="box6" v-if="isShow" @click="sendMessageToCSharp">
+          v-show="flag6"
-        <img src="../assets/img/碳资产管理.png" alt="" class="tabbars6" />
+          alt=""
-        <p>碳资产管理</p>
+          class="tabbars6"
-      </div>
+        />
-      <div class="box6" v-else>
         <img
           src="../assets/img/碳资产管理 拷贝_hover.png"
           alt=""
+          v-show="!flag6"
           class="tabbars6"
         />
         <p>碳资产管理</p>
@@ -96,7 +111,12 @@ export default {
   components: { RouterView },
   data() {
     return {
-      isShow: true,
+      flag1: true,
+      flag2: true,
+      flag3: true,
+      flag4: true,
+      flag5: true,
+      flag6: true,
     };
   },
   methods: {
@@ -106,6 +126,84 @@ export default {
         message: "碳资产管理_true",
       });
     },
+    go1() {
+      this.flag1 = false;
+      this.flag2 = true;
+      this.flag3 = true;
+      this.flag4 = true;
+      this.flag5 = true;
+      this.flag6 = true;
+      // this.$router.push(
+      //   "/znywjk",
+      //   () => {},
+      //   () => {}
+      // );
+    },
+    go2() {
+      this.flag1 = true;
+      this.flag2 = false;
+      this.flag3 = true;
+      this.flag4 = true;
+      this.flag5 = true;
+      this.flag6 = true;
+      this.$router.push(
+        "/area",
+        () => {},
+        () => {}
+      );
+    },
+    go3() {
+      this.flag1 = true;
+      this.flag2 = true;
+      this.flag3 = false;
+      this.flag4 = true;
+      this.flag5 = true;
+      this.flag6 = true;
+      this.$router.push(
+        "/fhgl",
+        () => {},
+        () => {}
+      );
+    },
+    go4() {
+      this.flag1 = true;
+      this.flag2 = true;
+      this.flag3 = true;
+      this.flag4 = false;
+      this.flag5 = true;
+      this.flag6 = true;
+      this.$router.push(
+        "/nxgl",
+        () => {},
+        () => {}
+      );
+    },
+    go5() {
+      this.flag1 = true;
+      this.flag2 = true;
+      this.flag3 = true;
+      this.flag4 = true;
+      this.flag5 = false;
+      this.flag6 = true;
+      this.$router.push(
+        "/znyw",
+        () => {},
+        () => {}
+      );
+    },
+    go6() {
+      this.flag1 = true;
+      this.flag2 = true;
+      this.flag3 = true;
+      this.flag4 = true;
+      this.flag5 = true;
+      this.flag6 = false;
+      this.$router.push(
+        "/tzcgl",
+        () => {},
+        () => {}
+      );
+    },
   },
 };
 </script>
@@ -263,7 +361,7 @@ export default {
       width: 316px;
       height: 46px;
       font-size: 50px;
-      font-family: FZZhengHeiS-B-GB;
+      font-family: "FZZhengHeiS-B-GB";
       font-weight: 400;
       color: #ffffff;
       line-height: 20px;
@@ -274,6 +372,9 @@ export default {
     width: 100%;
     height: 200px;
     position: relative;
+    div {
+      cursor: pointer;
+    }
   }
 }
 

src/views/Zhou/FHGL.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="box">
     <div class="a">
-      <img src="../../assets/img/可调图标--未选中.png" alt="" @click="
+      <img
-        $router.push(
+        src="../../assets/img/可调图标--未选中.png"
-          '/kdfh',
+        alt=""
-        )
+        @click="$router.push('/kdfh')"
-        " />
+      />
     </div>
     <div class="left">
       <img src="../../assets/img/标题/负荷管理.png" class="title" />
@@ -107,7 +107,10 @@
               <div class="chartbox" v-for="item in list">
                 <span class="chartname">{{ item.name }}</span>
                 <div class="bigBox">
-                  <div class="smallBox" :style="{ width: `${54 * item.value}px` }"></div>
+                  <div
+                    class="smallBox"
+                    :style="{ width: `${54 * item.value}px` }"
+                  ></div>
                 </div>
                 <span>{{ item.value * 100 }}kW</span>
               </div>
@@ -178,7 +181,8 @@ export default {
             {
               icon: "rect",
               name: "实时负荷",
-            }],
+            },
+          ],
           x: "center",
           y: "top",
           itemGap: 200,
@@ -232,7 +236,7 @@ export default {
         {
           name: "2号生产线",
           value: 88,
-        }
+        },
       ],
       statusChart: null,
       option1: {},
@@ -357,7 +361,7 @@ export default {
               showAbove: true,
               length: 40,
               length2: 20,
-              lineStyle: { cap: 'round' }
+              lineStyle: { cap: "round" },
             },
             itemStyle: {
               normal: {
@@ -937,7 +941,6 @@ export default {
     }
   }
 
-
   .byqfzl {
     position: relative;
     margin-top: 56px;
@@ -1103,10 +1106,12 @@ export default {
           .smallBox {
             width: 100px;
             height: 65px;
-            background: linear-gradient(to right,
+            background: linear-gradient(
+              to right,
               rgba(1, 191, 249, 1) 20%,
               rgba(68, 161, 201, 1) 100%,
-                rgba(42, 196, 243, 1) 20%);
+              rgba(42, 196, 243, 1) 20%
+            );
           }
         }
 
@@ -1116,7 +1121,7 @@ export default {
 
         span:nth-of-type(2) {
           font-size: 32px;
-          color: #43FFF1;
+          color: #43fff1;
           margin-left: 20px;
         }
       }
@@ -1152,7 +1157,5 @@ export default {
     background-size: 100% 100%;
     transform: translateX(-50%);
   }
-
 }
 </style>
-  

src/views/lll/NYJCD/SCX1.vue

@@ -468,7 +468,6 @@ export default {
       immediate: true, // 第一次初始化渲染就可以监听到
     },
   },
-
   methods: {
     defineEcharts(dom, option) {
       var chartDom = document.getElementById(dom);
@@ -628,25 +627,6 @@ export default {
           },
         },
         series: [
-          {
-            type: "bar",
-            itemStyle: {
-              color: "transparent",
-            },
-            data: yaxisData2,
-            label: {
-              normal: {
-                show: true,
-                position: "top",
-                formatter: (e) => {
-                  return e.value === maxValue2 ? e.value : "";
-                },
-                fontSize: 20,
-                color: "#3286FF",
-                offset: [0, -15],
-              },
-            },
-          },
           {
             type: "bar",
             itemStyle: {
@@ -667,87 +647,25 @@ export default {
             },
           },
           {
-            type: "custom",
+            type: "bar",
-            name: "昨日",
+            itemStyle: {
-            barCategoryGap: "20%",
+              color: "transparent",
-            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: {
+            data: yaxisData2,
-                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            label: {
-                        {
+              normal: {
-                          offset: 0,
+                show: true,
-                          color: "#08E83C",
+                position: "top",
+                formatter: (e) => {
+                  return e.value === maxValue2 ? e.value : "";
                 },
-                        {
+                fontSize: 20,
-                          offset: 0.35,
+                color: "#3286FF",
-                          color: "#1FE77D",
+                offset: [0, -15],
-                        },
-                        {
-                          offset: 1,
-                          color: "#38E7C5",
-                        },
-                      ]),
               },
             },
-                  {
-                    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: "#00C25D",
-                        },
-                        {
-                          offset: 0.35,
-                          color: "#05C269",
-                        },
-                        {
-                          offset: 1,
-                          color: "#0BC27B",
-                        },
-                      ]),
-                    },
-                  },
-                  {
-                    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: "#05E861",
-                    },
-                  },
-                ],
-              };
-            },
-            data: yaxisData,
           },
+
           {
             type: "custom",
             name: "今日",
@@ -831,6 +749,88 @@ export default {
             },
             data: yaxisData2,
           },
+          {
+            type: "custom",
+            name: "昨日",
+            barCategoryGap: "20%",
+            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: "#08E83C",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#1FE77D",
+                        },
+                        {
+                          offset: 1,
+                          color: "#38E7C5",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    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: "#00C25D",
+                        },
+                        {
+                          offset: 0.35,
+                          color: "#05C269",
+                        },
+                        {
+                          offset: 1,
+                          color: "#0BC27B",
+                        },
+                      ]),
+                    },
+                  },
+                  {
+                    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: "#05E861",
+                    },
+                  },
+                ],
+              };
+            },
+            data: yaxisData,
+          },
         ],
       };
 
@@ -840,6 +840,7 @@ export default {
     init() {
       //构建3d饼状图
       let myChart = this.$echarts.init(document.getElementById("fhzb"));
+
       // 传入数据生成 option ; getPie3D(数据，透明的空心占比（调节中间空心范围的0就是普通饼1就很镂空）)
       this.option = this.getPie3D(this.optionData, 0.5);
       //将配置项设置进去
@@ -917,32 +918,7 @@ export default {
           k,
           series[i].pieData.value
         );
-        // series[i].itemStyle.normal.label = {
+
-        //   show: true,
-        //   position: "outside",
-        //   color: "#ddd",
-        //   formatter: function (params) {
-        //     var percent = 0;
-        //     var total = 0;
-        //     for (var i = 0; i < trafficWay.length; i++) {
-        //       total += trafficWay[i].value;
-        //     }
-        //     percent = ((params.value / total) * 100).toFixed(0);
-        //     if (params.name !== "") {
-        //       return (
-        //         "设备状态：" +
-        //         params.name +
-        //         "\n" +
-        //         "\n" +
-        //         "占百分比：" +
-        //         percent +
-        //         "%"
-        //       );
-        //     } else {
-        //       return "";
-        //     }
-        //   },
-        // };
         startValue = endValue;
         let bfb = that.fomatFloat(series[i].pieData.value / sumValue, 4);
         legendData.push({
@@ -979,23 +955,67 @@ export default {
             }
           },
         },
-        labelLine: {
-          normal: {
-            show: true,
-            lineStyle: {
-              color: "#7BC0CB",
-            },
-            length: 0,
-            length2: 10,
-          },
-        },
         label: {
+          // normal: {
+          //   show: true,
+          //   position: "right",
+          //   formatter: "{b} \n{c} {d}%",
+          // },
+
           normal: {
             show: true,
-            position: "outside",
+            color: "#fff",
-            formatter: "{b} \n{c} {d}%",
+            position: "right",
+            // distance:-10,
+            offset: [0, 3],
+            formatter: [
+              "{d|{d}%}",
+              "————",
+              //   '{c|{c}}{b|台}',
+              "{b|{b}}",
+            ].join("\n"), // 用\n来换行
+            rich: {
+              b: {
+                lineHeight: 25,
+                align: "left",
+                color: "#fff",
+              },
+              c: {
+                fontSize: 22,
+                // color: '#fff',
+                textShadowColor: "#1c90a6",
+                textShadowOffsetX: 0,
+                textShadowOffsetY: 2,
+                textShadowBlur: 5,
+                color: "#fff",
+              },
+              d: {
+                color: "#fff",
+                align: "left",
               },
             },
+          },
+        },
+        labelLine: {
+          // normal: {
+          //   show: true,
+          //   lineStyle: {
+          //     color: "#7BC0CB",
+          //   },
+          //   length: 0,
+          //   length2: 100000,
+          // },
+
+          normal: {
+            show: true,
+            length2: 30,
+            lineStyle: {
+              width: 1,
+              color: "#fff",
+            },
+          },
+        },
+
         //这个可以变形
         xAxis3D: {
           min: -1,
@@ -1270,11 +1290,273 @@ export default {
       }
       return s;
     },
+
+    getEchart() {
+      var chartDom = document.getElementById("pdsydl");
+      var myChart = echarts.init(chartDom);
+      var option;
+      const sideData = [220, 182, 191, 234, 290];
+      const sideData1 = [100, 110, 120, 134, 190];
+
+      option = {
+        tooltip: {
+          trigger: "axis",
+        },
+        legend: {
+          data: [
+            {
+              name: "今日",
+              textStyle: {
+                color: "white",
+              },
+            },
+            {
+              name: "昨日",
+              textStyle: {
+                color: "white",
+              },
+            },
+          ],
+        },
+        grid: {
+          top: "10%",
+          bottom: "62%",
+          right: "15%",
+          containLabel: true,
+        },
+        toolbox: {
+          show: true,
+        },
+        calculable: true,
+        xAxis: [
+          {
+            type: "category",
+            splitLine: {
+              show: false,
+            },
+            data: ["1月", "2月", "3月", "4月", "5月"],
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        yAxis: [
+          {
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: true,
+              textStyle: {
+                color: "#fff", //X轴文字颜色
+              },
+            },
+          },
+        ],
+        series: [
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#2d8cf0", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#2d8cf0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#2d8cf0", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData,
+            barGap: 10,
+          },
+          {
+            name: "昨日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#09337C", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#0761C0", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#0575DE", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "昨日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#0571D5",
+              color: "#288ef3", // 控制顶部方形的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["-10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData,
+            z: 3,
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#15a00f", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#11ad0a", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#19c213", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            data: sideData1,
+            barGap: 0,
+          },
+          {
+            name: "今日",
+            type: "bar",
+            barWidth: 10,
+            itemStyle: {
+              normal: {
+                color: new echarts.graphic.LinearGradient(
+                  0,
+                  1,
+                  0,
+                  0,
+                  [
+                    {
+                      offset: 0,
+                      color: "#26ec10", // 0% 处的颜色
+                    },
+                    {
+                      offset: 0.6,
+                      color: "#26ec10", // 60% 处的颜色
+                    },
+                    {
+                      offset: 1,
+                      color: "#26ec10", // 100% 处的颜色
+                    },
+                  ],
+                  false
+                ),
+              },
+            },
+            barGap: 0,
+            data: sideData1,
+            label: {
+              show: true,
+              position: "top",
+              textStyle: {
+                color: "white",
+                fontSize: 10,
+              },
+            },
+          },
+          {
+            name: "今日",
+            tooltip: {
+              show: false,
+            },
+            type: "pictorialBar",
+            itemStyle: {
+              borderWidth: 1,
+              borderColor: "#fff",
+              color: "#26ec10", // 顶部方块的颜色
+            },
+            symbol: "path://M 0,0 l 90,0 l -60,60 l -90,0 z",
+            symbolSize: ["20", "7"], // 第一个值控制顶部方形大小
+            symbolOffset: ["10", "-4"], // 控制顶部放行 左右和上下
+            symbolRotate: -16,
+            symbolPosition: "end",
+            data: sideData1,
+            z: 3,
+          },
+        ],
+      };
+
+      myChart.setOption(option, true);
+    },
   },
   mounted() {
     this.defineEcharts("pdsssdh", this.option1);
     // this.defineEcharts("pdsydl", this.option2);
     this.pdsydl();
+    // this.getEchart();
     this.defineEcharts("pdstpt", this.option3);
     this.init();
   },

src/views/lll/ZNYW.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="box">
+    <img src="../../assets/nyjc/电1.png" alt="" id="img" />
     <div class="left">
       <img src="../../assets/img/标题/智能运维.png" class="title" />
       <div class="hbsj">
@@ -382,7 +383,7 @@ export default {
           data: ["正常", "预警", "故障"],
           x: "center",
           y: "top",
-          itemGap: 200,
+          itemGap: 100,
           textStyle: {
             color: "#fff",
             fontSize: "16px",
@@ -409,7 +410,7 @@ export default {
         yAxis: {
           type: "value",
           min: 0,
-          max: 0.15,
+          max: 0.3,
           interval: 0.05, // 指定刻度间隔
           axisLabel: {
             show: true,
@@ -430,40 +431,19 @@ export default {
           {
             name: "故障",
             type: "bar",
+            stack: "total",
             data: [0.08, 0.08, 0.06, 0.12, 0.09],
           },
-          //   {
-          //     type: "bar",
-          //     data: data.map((item) => {
-          //       // 找到三个值中的最大值
-          //       let max = Math.max(item.value1, item.value2, item.value3);
-          //       return {
-          //         name: item.name,
-          //         value: max,
-          //       };
-          //     }),
-          //     // itemStyle: {
-          //     //   colorStops: [
-          //     //     {
-          //     //       offset: 0,
-          //     //       color: "#192060", // 0% 处的颜色
-          //     //     },
-          //     //     {
-          //     //       offset: 0.9,
-          //     //       color: "#2D6E38", // 90% 处的颜色
-          //     //     },
-          //     //   ],
-          //     // },
-          //   },
           {
             name: "预警",
-
+            stack: "total",
             type: "bar",
             data: [0.06, 0.07, 0.03, 0.06, 0.04],
           },
           {
             name: "正常",
             type: "bar",
+            stack: "total",
             data: [0.13, 0.12, 0.08, 0.14, 0.12],
           },
         ],
@@ -500,6 +480,10 @@ export default {
   justify-content: space-between;
   background-color: transparent;
 }
+#img {
+  position: absolute;
+  right: 0px;
+}
 .left {
   width: 1237px;
   height: 2500px;