finish TechyBar

src/views/QualityManager/HomePage.vue

@@ -64,7 +64,19 @@
                           }
                         ]"
                       /> -->
-                      <techy-bar />
+                      <techy-bar
+                        unit-name="单位/片"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [163, 184, 110, 22, 96, 74]
+                          },
+                          {
+                            name: '产线B',
+                            list: [162, 172, 122, 15, 82, 74]
+                          }
+                        ]"
+                      />
                     </div>
                   </techy-box>
                 </div>
@@ -75,7 +87,7 @@
                       class="absolute top-0 left-0"
                       style="position: absolute; width: 100%; height: 100%; top: 0; left: 0;"
                     >
-                      <new-bar
+                      <!-- <new-bar
                         chart-name="realtime-cost-production"
                         :name-list="['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']"
                         unit-name="单位: 千片"
@@ -93,6 +105,20 @@
                             data: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
                           }
                         ]"
+                      /> -->
+                      <techy-bar
+                        unit-name="单位/千片"
+                        :extra-space-between-zero="0.8"
+                        :datainfo="[
+                          {
+                            name: '产线A',
+                            list: [4.12, 5.21, 3.2, 0.96, 2.61, 2.2]
+                          },
+                          {
+                            name: '产线B',
+                            list: [4.1, 4.34, 3.4, 0.32, 2.4, 2.14]
+                          }
+                        ]"
                       />
                     </div>
                   </techy-box>

src/views/QualityManager/components/charts/TechyBar.vue

@@ -9,7 +9,29 @@ import * as BottomPic from './bottom.png'
 
 export default {
   name: 'TechyBar',
-  props: {},
+  props: {
+    datainfo: {
+      type: Array,
+      default: () => [
+        {
+          name: '产线A',
+          list: [100, 102, 104, 105, 100, 117]
+        },
+        {
+          name: '产线B',
+          list: [110, 92, 124, 85, 100, 120]
+        }
+      ]
+    },
+    unitName: {
+      type: String,
+      default: ''
+    },
+    extraSpaceBetweenZero: {
+      type: Number,
+      default: 25
+    }
+  },
   mixins: [resize],
   data() {
     const color_gradients = [
@@ -29,32 +51,9 @@ export default {
       }
     ]
 
-    const mock_data = [
-      {
-        color: [
-          /** top color **/
-          '#0b58ff',
-          /** bottom color **/
-          '#993f80'
-        ],
-        name: '产线A',
-        list: [100, 102, 104, 105, 100, 117]
-      },
-      {
-        color: [
-          /** top color **/
-          '#49FBD6',
-          /** bottom color **/
-          '#31A2FF'
-        ],
-        name: '产线B',
-        list: [110, 92, 124, 85, 100, 120]
-      }
-    ]
-
     let result = []
 
-    mock_data.map((pl, index) => {
+    this.datainfo.map((pl, index) => {
       let topCircle = {
         __position: 'top',
         name: pl.name,
@@ -138,6 +137,13 @@ export default {
             ],
             global: false // 缺省为 false
           }
+        },
+        label: {
+          show: true,
+          position: 'top',
+          color: '#fff8',
+          fontSize: 8,
+          offset: [0, 6]
         }
       }
 
@@ -153,7 +159,7 @@ export default {
       option: {
         grid: {
           left: '10%',
-          top: 36,
+          top: 48,
           bottom: 28
         },
         xAxis: {
@@ -167,13 +173,22 @@ export default {
             lineStyle: {}
           },
           axisLabel: {
-            color: '#fff8'
+            color: '#fff8',
+            fontSize: 10
           },
           data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
         },
         yAxis: {
           type: 'value',
-          min: -25,
+          // min: -25,
+          min: this.extraSpaceBetweenZero * -1,
+          name: this.unitName,
+          nameTextStyle: {
+            color: '#fff8',
+            fontSize: 8,
+            verticalAlign: 'top',
+            align: 'right'
+          },
           axisLine: {
             show: true,
             lineStyle: {
@@ -182,6 +197,7 @@ export default {
           },
           axisLabel: {
             color: '#fff8',
+            fontSize: 10,
             /** y轴不从0开始，也可以用 xAxis 向下 offset 的方式模拟 **/
             formatter: function(value, index) {
               if (value < 0) {
@@ -207,8 +223,7 @@ export default {
             type: 'image',
             left: 0,
             bottom: 0,
-            // left: '10%',
+            scaleX: 0.8,
-            // bottom: '5%',
             style: {
               image: 'image url',
               height: 0,