湖里大屏：更改 jChart/bar/JBarChart.vue 组件封装

src/views/projectAdmin/dataBoard/projectHuScreen/jChart/bar/JBarChart.vue

@@ -26,7 +26,10 @@ export default {
       default: () => []
     },
     yData: {
-      required: true,
+      type: Array,
+      default: () => []
+    },
+    series: {
       type: Array,
       default: () => []
     }
@@ -40,7 +43,15 @@ export default {
   },
   methods: {
     createChart() {
-      const { title, grid, color, xData, yData } = this
+      const { title, grid, color, xData, yData, series } = this
+      const configSeries = (series => {
+        if (series.length) {
+          return series.map(item => ({ data: item.data, type: 'bar', barWidth: 15 }))
+        } else {
+          return [{ data: yData, type: 'bar', barWidth: 15 }]
+        }
+      })(series)
+
       const option = {
         title: {
           text: title.text,
@@ -104,13 +115,7 @@ export default {
             show: false
           }
         },
-        series: [
+        series: configSeries
-          {
-            data: yData,
-            type: 'bar',
-            barWidth: 15
-          }
-        ]
       }
       this.jBarChart.setOption(option)
     }

src/views/projectAdmin/dataBoard/projectHuScreen/laborManage/leftBottom.vue

@@ -1,112 +1,75 @@
 <template>
-  <!-- 年龄结构 -->
+  <Card :title="title">
-  <div class="containerBox">
-    <div class="titleTxt">{{ title }}</div>
     <div class="topTit">
-      <div class="blue"></div><span>在场</span>
+      <div class="blue"></div>
-      <div class="purple"></div><span>在职</span>
+      <span>在场</span>
+      <div class="purple"></div>
+      <span>在职</span>
       <div class="topright">
         <p>在职平均年龄： <a>42</a></p>
         <p>在场平均年龄： <a>42</a></p>
       </div>
     </div>
     <div class="mychart">
-      <JBarChart :xData="xData" :yData="yData" :color="color" :grid="grid"  />
+      <JBarChart :xData="xData" :series="series" :color="color" :grid="grid" />
     </div>
-  </div>
+  </Card>
 </template>
 
 <script>
-import JBarChart from "../jChart/bar/JBarChart.vue";
+import Card from '../components/Card.vue'
+import JBarChart from '../jChart/bar/JBarChart.vue'
 export default {
-  components: { JBarChart },
+  components: { Card, JBarChart },
 
   props: {
     title: {
       type: String,
-      default: "default title"
+      default: 'default title'
     }
   },
   data() {
     return {
-      xData: ["18岁及下", "18-45岁", "45-59岁", "60岁以上"],
+      xData: ['18岁及下', '18-45岁', '45-59岁', '60岁以上'],
-      yData: [
+      series: [{ data: [22, 33, 22, 56] }, { data: [32, 22, 32, 15] }],
-        {
+      color: ['#5be2f6', '#5281f7'],
-          value: 170,
+      grid: ['10%', '5%', '15%', '5%']
-          itemStyle: {
+    }
-            color: "#a9adb6"
-          }
-        },
-        {
-          value: 320,
-          itemStyle: {
-            color: "#557dee"
-          }
-        },
-        {
-          value: 270,
-          itemStyle: {
-            color: "#43d7b5"
-          }
-        },
-        {
-          value: 310,
-          itemStyle: {
-            color: "#ff6c7f"
-          }
-        }
-      ],
-      color: ["#5be2f6", "#5281f7"],
-      grid: ["10%", "5%", "15%", "5%"]
-    };
   }
-};
+}
 </script>
 
 <style lang="less" scoped>
-.containerBox {
+.topTit {
-  width: 100%;
+  font-size: 12px;
-  height: 100%;
+  color: #5d6674;
-  border: 1px solid #0081c3;
+  .blue,
-
+  .purple {
-  .titleTxt {
-    font-size: 18px;
-    color: #6ee4f0;
-    margin-top: 5px;
-    margin-left: 5px;
-  }
-  .topTit{
-     font-size: 12px;
-     color: #5d6674;
-    .blue , .purple{
-      display: inline-block;
-      width: 15px;
-      height: 5px;
-      border-radius: 10px;
-      margin-left: 30px;
-      margin-right: 5px;
-      background-color: #5be2f6;
-    }
-    .purple{
-      background-color: #5181f7;
-    }
-    // span{
-    //   margin-right: 30px;
-    //   height: 15px;
-    //   line-height: 15px;
-    // }
-  }
-  .topright{
     display: inline-block;
-    p {
+    width: 15px;
-      margin-left: 110px;
+    height: 5px;
-    }
+    border-radius: 10px;
+    margin-left: 30px;
+    margin-right: 5px;
+    background-color: #5be2f6;
   }
-  .mychart {
+  .purple {
-    width: 100%;
+    background-color: #5181f7;
-    height: 90%;
+  }
+  // span{
+  //   margin-right: 30px;
+  //   height: 15px;
+  //   line-height: 15px;
+  // }
+}
+.topright {
+  display: inline-block;
+  p {
+    margin-left: 110px;
   }
 }
+.mychart {
+  width: 100%;
+  height: calc(100% - 28px);
+}
 </style>
-
-