Add color configuration items to customize colors

src/components/decoration5/src/main.vue

@@ -3,7 +3,7 @@
     <svg :width="width" :height="height">
       <polyline
         fill="transparent"
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="3"
         :points="line1Points"
       >
@@ -22,7 +22,7 @@
       </polyline>
       <polyline
         fill="transparent"
-        stroke="#3f96a5"
+        :stroke="mergedColor[1]"
         stroke-width="2"
         :points="line2Points"
       >
@@ -48,9 +48,19 @@ import autoResize from '../../../mixin/autoResize'
 
 import { getPolylineLength } from '@jiaminghi/charts/lib/util'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration5',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     return {
       ref: 'decoration-5',
@@ -59,7 +69,18 @@ export default {
       line2Points: '',
 
       line1Length: 0,
-      line2Length: 0
+      line2Length: 0,
+
+      defaultColor: ['#3f96a5', '#3f96a5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -97,7 +118,17 @@ export default {
       const { calcSVGData } = this
 
       calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>