finish TechyBar

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%',
-            // bottom: '5%',
+            scaleX: 0.8,
             style: {
               image: 'image url',
               height: 0,