multiple-bar-chart组件修改，支持传入柱子宽度以及柱子间距、其他琐碎布局修改

src/components/chart/bar/multiple-bar-chart.vue

@@ -150,12 +150,30 @@ export default {
     // 颜色
     color: {
       type: Array,
-      default: () => ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b", "#1a93cf", "#c531c7", "#bd3338"],
+      default: () => [
+        "#05bb4c",
+        "#4b55ae",
+        "#fa8c16",
+        "#f8de5b",
+        "#1a93cf",
+        "#c531c7",
+        "#bd3338",
+      ],
     },
     showAnimation: {
       type: Boolean,
       default: true,
     },
+    // 柱子最大宽度
+    barMaxWidth: {
+      type: Number || String,
+      default: 0,
+    },
+    // 柱子间距
+    barGap: {
+      type: Number || String,
+      default: 0,
+    },
   },
   data() {
     return {
@@ -223,17 +241,26 @@ export default {
       let result = [];
       if (this.list && this.list.length > 0) {
         this.list.forEach((value, index) => {
-          result.push({
+          let seriesItem = {
             name: value.title,
             type: "bar",
             barWidth: "8%",
-            // barWidth: "10%",
             animation: this.firstAnimation && this.showAnimation,
             yAxisIndex: value.yAxisIndex,
             data: value.value.map((t) => {
               return t.value;
             }),
-          });
+          };
+          if (this.barMaxWidth) {
+            seriesItem.barMaxWidth = this.barMaxWidth;
+          } else {
+            seriesItem.barWidth = "8%";
+          }
+
+          if (this.barGap) {
+            seriesItem.barGap = this.barGap;
+          }
+          result.push(seriesItem);
         });
       }
       return result;
@@ -296,7 +323,7 @@ export default {
       chart.clear();
       chart.setOption(option);
 
-      this.resize = function() {
+      this.resize = function () {
         chart.resize();
       };
 

src/views/LightMatrix/LightMatrix.vue

@@ -14,7 +14,10 @@
                 <SvgIcon svgid="svg-photovoltaic"></SvgIcon>
               </span>
             </div>
-            <div class="panel-item-gf-right curStyle" @click="changeShow(panelData.first.category)">
+            <div
+              class="panel-item-gf-right curStyle"
+              @click="changeShow(panelData.first.category)"
+            >
               <div class="panel-item-gf-up">接入光伏</div>
               <div class="panel-item-gf-down">
                 {{ sourceMap[panelData.first.key] || "---" }}
@@ -37,16 +40,20 @@
           </div> -->
         </Col>
         <Col :span="3" v-for="(data, index) of panelData.datas" :key="index">
-          <div class="panel-item-new curStyle" :class="data.color" @click="changeShow(data.category,data.fjZT)">
-            <div class="panel-left" >
+          <div
+            class="panel-item-new curStyle"
+            :class="data.color"
+            @click="changeShow(data.category, data.fjZT)"
+          >
+            <div class="panel-left">
               <i class="svg-icon" :class="'svg-icon-' + data.color">
                 <SvgIcon :svgid="data.nameIcon"></SvgIcon>
               </i>
               <!-- <span class="text">{{ data.text1 }}</span> -->
             </div>
-            <div class="panel-right" >
+            <div class="panel-right">
               <!-- <span class="text">台数</span> -->
-                <span class="text">{{data.name}}</span>
+              <span class="text">{{ data.name }}</span>
               <span class="value">
                 {{ sourceMap[data.key1] || "---" }}
               </span>
@@ -187,13 +194,13 @@ export default {
           icon: "svg-photovoltaic",
           text: "接入光伏",
           key: "gfjrnum",
-          category:'jrgf_GDC'
+          category: "jrgf_GDC",
         },
         datas: [
           {
             color: "green",
             name: "待机",
-            category:'dj_GDC',
+            category: "dj_GDC",
             fjZT: 0,
             nameIcon: "svg-standby",
             numIcon: "svg-manual",
@@ -205,7 +212,7 @@ export default {
           {
             color: "purple",
             name: "运行",
-            category:'yx_GDC',
+            category: "yx_GDC",
             fjZT: 1,
             nameIcon: "svg-normal-power",
             numIcon: "svg-drop-output",
@@ -217,7 +224,7 @@ export default {
           {
             color: "pink",
             name: "限电",
-            category:'xd_GDC',
+            category: "xd_GDC",
             fjZT: 5,
             nameIcon: "svg-limit-power",
             numIcon: "svg-downtime",
@@ -229,8 +236,8 @@ export default {
           {
             color: "red",
             name: "故障",
-            category:'gz_GDC',
-            fjZT:2,
+            category: "gz_GDC",
+            fjZT: 2,
             nameIcon: "svg-gz-downtime",
             numIcon: "svg-field-involved",
             text1: "故障停机",
@@ -241,7 +248,7 @@ export default {
           {
             color: "orange",
             name: "检修",
-            category:'jx_GDC',
+            category: "jx_GDC",
             fjZT: 4,
             nameIcon: "svg-jx-downtime",
             numIcon: "svg-field-involved",
@@ -253,7 +260,7 @@ export default {
           {
             color: "write",
             name: "受累",
-            category:'sl_GDC',
+            category: "sl_GDC",
             fjZT: 12,
             nameIcon: "svg-intranet-involvement",
             numIcon: "svg-environment",
@@ -265,8 +272,8 @@ export default {
           {
             color: "gray",
             name: "离线",
-            category:'lx_GDC',
-            fjZT:3,
+            category: "lx_GDC",
+            fjZT: 3,
             nameIcon: "svg-offline",
             key: "gflxnum",
             numIcon: "svg-unknown",
@@ -404,8 +411,8 @@ export default {
       //     this.fillCategory = null;
       //     this.fillFjzt = null;
       //   } else {
-          this.fillCategory = category;
-          this.fillFjzt = fjzt;
+      this.fillCategory = category;
+      this.fillFjzt = fjzt;
       //     console.log("fillCategory:", this.fillCategory);
       //     console.log("fillFjz:", this.fillFjzt);
       //   }
@@ -445,7 +452,7 @@ export default {
         subUrl: "matrix/matrixDetialGfPush",
         success(res) {
           if (res.data) {
-            console.log('resMap:',res)
+            console.log("resMap:", res);
             let sourceMap = res.data;
             for (let key in sourceMap) {
               if (key !== "fczbmap" && key !== "fjmap") {
@@ -609,7 +616,6 @@ export default {
 
       .panel-right {
         display: flex;
-        flex-direction: column;
         padding-left: 2.2222vh;
 
         .text {
@@ -639,12 +645,10 @@ export default {
       .panel-left {
         width: 100%;
         display: flex;
-        flex-direction: column;
         align-items: center;
         justify-content: center;
         height: 30px;
         line-height: 30px;
-        flex: 1 0 auto;
 
         i svg {
           width: 16px;
@@ -661,6 +665,7 @@ export default {
       .panel-right {
         display: flex;
         justify-content: space-between;
+        align-items: center;
         width: 100%;
         height: 100%;
         line-height: 30px;
@@ -668,13 +673,22 @@ export default {
 
         .text {
           font-size: 14px;
+          width: 30px;
         }
 
         .value {
+          flex: 1;
           color: @white;
           font-size: 16px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
         }
         .unit {
+          width: 30px;
+          display: flex;
+          justify-content: flex-end;
+          align-items: center;
         }
       }
 
@@ -1157,7 +1171,7 @@ export default {
       }
     }
   }
-    .curStyle {
+  .curStyle {
     cursor: pointer;
   }
 }

src/views/warningRank/index.vue

@@ -36,7 +36,7 @@
       <ComTable height="100vh" :data="tableData"></ComTable>
     </div>
     <!-- <Mlc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" /> -->
-    <Lbc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" />
+    <Lbc height="650px" :list="chartData" :units="chartUnit" :showLegend="true" :barMaxWidth="'4%'" :barGap="'150%'" />
   </div>
 </template>