some optmization

src/components/labelLine/index.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="label-line">
     <div class="label-item"
-      v-for="(labelItem, i) in label"
+      v-for="(labelItem, i) in labelData"
       :key="labelItem">
-      <div :style="`background-color: ${colors[i % colors.length]};`"></div>
+      <div :class="type" :style="`background-color: ${labelColor[i % labelColorNum]};`"></div>
       <div>{{ labelItem }}</div>
     </div>
   </div>
@@ -12,7 +12,55 @@
 <script>
 export default {
   name: 'LabelLine',
-  props: ['label', 'colors']
+  props: ['label', 'colors'],
+  data () {
+    return {
+      labelData: [],
+      labelColor: [],
+      labelColorNum: 0,
+      type: 'rect'
+    }
+  },
+  watch: {
+    label () {
+      const { init } = this
+
+      init()
+    },
+    colors () {
+      const { init } = this
+
+      init()
+    }
+  },
+  methods: {
+    init () {
+      const { label, colors } = this
+
+      if (!label) return
+
+      const { data, color, type } = label
+
+      if (!data) return
+
+      this.labelData = data
+
+      let trueColor = color || colors
+
+      typeof trueColor === 'string' && (trueColor = [trueColor])
+
+      this.labelColor = trueColor
+
+      this.labelColorNum = trueColor.length
+
+      this.type = type || 'rect'
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
 }
 </script>
 
@@ -30,12 +78,18 @@ export default {
     flex-direction: row;
     align-items: center;
     margin: 0px 5px 5px 5px;
+  }
 
-    :nth-child(1) {
-      width: 10px;
-      height: 10px;
-      margin-right: 5px;
-    }
+  .rect {
+    width: 10px;
+    height: 10px;
+    margin-right: 5px;
+  }
+
+  .rectangle {
+    width: 30px;
+    height: 10px;
+    margin-right: 5px;
   }
 }
 </style>