From ff185023e84bbb4a2cf79bfedac845f14dd8cfd9 Mon Sep 17 00:00:00 2001
From: lll <you@example.com>
Date: Mon, 4 Dec 2023 09:11:12 +0800
Subject: [PATCH] 11

---
 src/views/KHC.vue | 191 +++++++++++++++++++++++++++++-----------------
 1 file changed, 121 insertions(+), 70 deletions(-)

diff --git a/src/views/KHC.vue b/src/views/KHC.vue
index 0492cc7..0bfd983 100644
--- a/src/views/KHC.vue
+++ b/src/views/KHC.vue
@@ -83,7 +83,11 @@
         </div>
         <div class="ynflzb">
           <p class="title">用能分类占比</p>
-          <img src="../assets/客户侧总体用能情况分析/底盘.png" alt="" class="pic" />
+          <img
+            src="../assets/客户侧总体用能情况分析/底盘.png"
+            alt=""
+            class="pic"
+          />
           <div id="ynflzb"></div>
         </div>
         <div class="qyydlpm">
@@ -127,7 +131,6 @@
 </template>
 <script>
 import * as echarts from "echarts";
-import { fontSizeRem } from "../assets/function";
 export default {
   data() {
     return {
@@ -192,7 +195,7 @@ export default {
             { icon: "roundRect", name: "今日" },
           ],
           textStyle: {
-            fontSize: fontSizeRem(14),
+            fontSize: "0.07rem",
             fontFamily: "AlibabaPuHuiTi",
             fontWeight: 400,
             color: "rgba(255,255,255,0.8)",
@@ -213,7 +216,7 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                fontSize: fontSizeRem(14),
+                fontSize: "0.07rem",
                 fontFamily: "AlibabaPuHuiTi",
                 fontWeight: 400,
                 color: "rgba(255,255,255,0.8)",
@@ -227,13 +230,13 @@ export default {
             name: "单位:KW",
             nameTextStyle: {
               color: "#fff",
-              fontSize: fontSizeRem(14),
+              fontSize: "0.07rem",
               padding: 10,
             },
             axisLabel: {
               show: true,
               textStyle: {
-                fontSize: fontSizeRem(14),
+                fontSize: "0.07rem",
                 fontFamily: "AlibabaPuHuiTi",
                 fontWeight: 400,
                 color: "rgba(255,255,255,0.8)",
@@ -315,7 +318,7 @@ export default {
           left: "right",
           data: [{ icon: "roundRect", name: "用电量" }],
           textStyle: {
-            fontSize: fontSizeRem(14),
+            fontSize: "0.07rem",
             fontFamily: "AlibabaPuHuiTi",
             fontWeight: 400,
             color: "rgba(255,255,255,0.8)",
@@ -336,7 +339,7 @@ export default {
             axisLabel: {
               show: true,
               textStyle: {
-                fontSize: fontSizeRem(14),
+                fontSize: "0.07rem",
                 fontFamily: "AlibabaPuHuiTi",
                 fontWeight: 400,
                 color: "rgba(255,255,255,0.8)",
@@ -350,13 +353,13 @@ export default {
             name: "单位:MWH",
             nameTextStyle: {
               color: "#fff",
-              fontSize: fontSizeRem(14),
+              fontSize: "0.07rem",
               padding: 10,
             },
             axisLabel: {
               show: true,
               textStyle: {
-                fontSize: fontSizeRem(14),
+                fontSize: "0.07rem",
                 fontFamily: "AlibabaPuHuiTi",
                 fontWeight: 400,
                 color: "rgba(255,255,255,0.8)",
@@ -465,17 +468,18 @@ export default {
           {
             text: "{name|" + "总量" + "}\n{val|" + formatNumber(total) + "}",
             top: "center",
-            left: 110,
+            // left: 110,
+            left: "32%",
             textStyle: {
               rich: {
                 name: {
-                  fontSize: fontSizeRem(14),
+                  fontSize: "0.07rem",
                   fontWeight: "normal",
                   color: "#fff",
                   padding: [10, 0],
                 },
                 val: {
-                  fontSize: fontSizeRem(32),
+                  fontSize: "0.166rem",
                   fontWeight: "bold",
                   color: "#fff",
                 },
@@ -495,14 +499,14 @@ export default {
             color: "#fff",
             rich: {
               name: {
-                fontSize: fontSizeRem(12),
+                fontSize: "0.06rem",
               },
               value: {
-                fontSize: fontSizeRem(16),
+                fontSize: "0.08rem",
                 padding: [0, 5, 0, 15],
               },
               unit: {
-                fontSize: fontSizeRem(12),
+                fontSize: "0.06rem",
               },
             },
           },
@@ -743,10 +747,10 @@ export default {
         label: {
           show: false,
           opacity: 1,
-          fontSize: fontSizeRem(14),
+          fontSize: "0.07rem",
           lineHeight: 20,
           textStyle: {
-            fontSize: fontSizeRem(14),
+            fontSize: "0.07rem",
             color: "#fff",
           },
         },
@@ -794,7 +798,7 @@ export default {
           right: "2%",
           textStyle: {
             color: "#fff",
-            fontSize: fontSizeRem(12),
+            fontSize: "0.06rem",
           },
           formatter: function (name) {
             let res = data.filter((v) => v.name === name);
@@ -811,14 +815,17 @@ export default {
               params.seriesName !== "mouseoutSeries" &&
               params.seriesName !== "pie2d"
             ) {
-              return `${params.seriesName
-                }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color
-                };"></span>${option.series[params.seriesIndex].pieData.value + "%"
-                }`;
+              return `${
+                params.seriesName
+              }<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
+                params.color
+              };"></span>${
+                option.series[params.seriesIndex].pieData.value + "%"
+              }`;
             }
           },
           textStyle: {
-            fontSize: fontSizeRem(14),
+            fontSize: "0.07rem",
           },
         },
         title: {
@@ -826,7 +833,7 @@ export default {
           top: "20",
           textStyle: {
             color: "#fff",
-            fontSize: fontSizeRem(22),
+            fontSize: "0.11rem",
           },
         },
         // backgroundColor: "#0E3567",
@@ -866,7 +873,7 @@ export default {
           show: false,
           boxHeight: 0.01,
           //top: '30%',
-          bottom: "50%",
+          bottom: "500%",
           left: "-7%",
           // environment: "rgba(255,255,255,0)",
           viewControl: {
@@ -992,7 +999,7 @@ export default {
                     borderWidth: 2, // 高亮时的边框宽度
                   },
                   label: {
-                    fontSize: 12, // 选中地图文字字号和字体颜色
+                    fontSize: "0.06rem", // 选中地图文字字号和字体颜色
                     color: "#fff",
                   },
                 },
@@ -1006,7 +1013,7 @@ export default {
                   },
                   textStyle: {
                     color: "#000", //文字颜色
-                    fontSize: 16, //文字大小
+                    fontSize: "0.08rem", //文字大小
                     fontFamily: "微软雅黑",
                     // backgroundColor: {
                     //   image: "../assets/客户侧总体用能情况分析/光标.png",
@@ -1017,13 +1024,13 @@ export default {
                     fline: {
                       padding: [0, 35],
                       color: "#FDCC00",
-                      fontSize: 14,
+                      fontSize: "0.07rem",
                       fontWeight: 600,
                     },
                     tline: {
                       padding: [0, 27],
                       color: "#fff",
-                      fontSize: 12,
+                      fontSize: "0.06rem",
                     },
                   },
                 },
@@ -1141,53 +1148,87 @@ export default {
     initfbqk() {
       // mock 数据
       const dataArr = {
-        xdata: ['济南', '烟台', '威海', '青岛', '潍坊', '临沂', '济宁', '德州', '聊城', '泰安', '菏泽', '枣庄', '淄博', '莱芜', '东营', '日照', '滨州'],
-        disinfeced: [32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19],
-      }
+        xdata: [
+          "济南",
+          "烟台",
+          "威海",
+          "青岛",
+          "潍坊",
+          "临沂",
+          "济宁",
+          "德州",
+          "聊城",
+          "泰安",
+          "菏泽",
+          "枣庄",
+          "淄博",
+          "莱芜",
+          "东营",
+          "日照",
+          "滨州",
+        ],
+        disinfeced: [
+          32, 34, 20, 14, 36, 27, 30, 28, 32, 27, 32, 33, 24, 26, 27, 28, 19,
+        ],
+      };
       const maxValue = Math.max(...dataArr.disinfeced);
-      const grid = { top: '20%', left: '5%', right: '3%', bottom: '10%' }
+      const grid = { top: "20%", left: "5%", right: "3%", bottom: "10%" };
       // xAxis
       const xAxis = {
         axisTick: { show: true },
-        axisLine: { lineStyle: { color: 'rgba(255,255,255, .2)' } },
-        axisLabel: { textStyle: { fontSize: 12, color: '#fff' }, },
-        data: dataArr.xdata
-      }
+        axisLine: { lineStyle: { color: "rgba(255,255,255, .2)" } },
+        axisLabel: { textStyle: { fontSize: 12, color: "#fff" } },
+        data: dataArr.xdata,
+      };
 
       // yAxis
       const yAxis = {
         type: "value",
         name: "单位:kWh",
-        splitLine: { lineStyle: { color: 'rgba(255,255,255, .05)' } },
+        nameTextStyle: {
+          color: "#fff",
+          fontSize: "0.07rem",
+          padding: 10,
+        },
+        splitLine: { lineStyle: { color: "rgba(255,255,255, .05)" } },
         axisLine: { show: false, lineStyle: { color: "#fff" } },
-        axisLabel: { textStyle: { fontSize: 12, color: '#fff' } }
-      }
+        axisLabel: { textStyle: { fontSize: "0.06rem", color: "#fff" } },
+      };
       // series
       const series = [
         {
           z: 2,
-          name: '底部',
-          type: 'pictorialBar',
+          name: "底部",
+          type: "pictorialBar",
           data: [1, 1, 1, 1, 1, 1, 1, 1],
-          symbol: 'diamond',
-          symbolOffset: [0, '50%'],
+          symbol: "diamond",
+          symbolOffset: [0, "50%"],
           symbolSize: [18, 12],
           itemStyle: {
             color: {
-              type: 'linear',
-              x: 0, x2: 1, y: 0, y2: 0,
-              colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, 1)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .7)' }, { offset: 1, color: 'rgba(27, 126, 242, 1)' }]
-            }
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, 1)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, 1)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .7)" },
+                { offset: 1, color: "rgba(27, 126, 242, 1)" },
+              ],
+            },
           },
-        }, {
+        },
+        {
           z: 3,
-          name: '上部1',
-          type: 'pictorialBar',
-          symbolPosition: 'end',
+          name: "上部1",
+          type: "pictorialBar",
+          symbolPosition: "end",
           data: dataArr.disinfeced,
-          symbol: 'diamond',
-          symbolOffset: [0, '-50%'],
-          symbolSize: [18, 12],
+          symbol: "diamond",
+          symbolOffset: [0, "-50%"],
+          symbolSize: ["0.09rem", "0.06rem"],
           label: {
             normal: {
               show: true,
@@ -1195,34 +1236,43 @@ export default {
               formatter: (e) => {
                 return e.value === maxValue ? e.value : "";
               },
-              fontSize: 18,
+              fontSize: "0.09rem",
               color: "#fff",
               offset: [0, 0],
             },
           },
           itemStyle: {
-            borderColor: '#28F1FA',
+            borderColor: "#28F1FA",
             borderWidth: 2,
-            color: '#28F1FA'
+            color: "#28F1FA",
           },
-        }, {
+        },
+        {
           z: 1,
-          stack: '总量',
-          type: 'bar',
-          name: '电费',
+          stack: "总量",
+          type: "bar",
+          name: "电费",
           barWidth: 18,
           // barGap: '-100%',
           data: dataArr.disinfeced,
           itemStyle: {
             color: {
-              type: 'linear',
-              x: 0, x2: 1, y: 0, y2: 0,
-
-              colorStops: [{ offset: 0, color: 'rgba(27, 126, 242, .7)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 0.5, color: 'rgba(27, 126, 242, .5)' }, { offset: 1, color: 'rgba(27, 126, 242, .7)' }]
-            }
+              type: "linear",
+              x: 0,
+              x2: 1,
+              y: 0,
+              y2: 0,
+              colorStops: [
+                { offset: 0, color: "rgba(27, 126, 242, .7)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 0.5, color: "rgba(27, 126, 242, .5)" },
+                { offset: 1, color: "rgba(27, 126, 242, .7)" },
+              ],
+            },
           },
-        }]
-      let option = { xAxis, yAxis, series, grid }
+        },
+      ];
+      let option = { xAxis, yAxis, series, grid };
       this.defineEcharts("yhzyfbqk", option);
     },
   },
@@ -1593,6 +1643,7 @@ export default {
               background: url("../assets/客户侧总体用能情况分析/矩形(3).png");
               width: 24px;
               height: 16px;
+              font-size: 14px;
               line-height: 16px;
               background: rgba(34, 23, 23, 0.1);
               border-radius: 0px 0px 0px 0px;