update version to 2.9.9

2.optimize unit-label child style;

CHANGELOG.md

@@ -1,6 +1,164 @@
+# 2.9.9-alpha (2020-08-25)
+
+### Optmization
+
+- **borderBox:** Canonical class name.
+- **autoResize(mixin):** Add exception prompt.
+
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
+
+### Optmization
+
+- **scrollBoard:** Optimize the update effect of updateRows.
+
+# 2.9.6-alpha (2020-08-05)
+
+### Bug Fixes
+
+- **scrollBoard:** Carousel is abnormal when carousel is page.
+- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
+
+# 2.9.5-alpha (2020-08-05)
+
+### Optmization
+
+- **scrollBoard:** Reduce redundant node rendering.
+- **scrollRankingBoard:** Reduce redundant node rendering.
+- **scrollBoard:** Add api to update row data.
+
+# 2.9.4-alpha (2020-07-03)
+
+### Optmization
+
+- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
+
+# 2.9.3-alpha (2020-07-02)
+
+### Perfect
+
+- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
+
+# 2.9.2-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollBoard:** reset animationIndex when config upate.
+
+# 2.9.1-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
+
+### Perfect
+
+- **digitalFlop:** add number formatter.
+
+# 2.9.0-alpha (2020-06-10)
+
+### ScrollBoard
+
+- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+
+# 2.8.4-alpha (2020-05-25)
+
+### Perfect
+
+- **uuid:** Use uuid to produce unique id.
+
+# 2.8.3-alpha (2020-05-06)
+
+### Perfect
+
+- **activeRingChart:** add `showOriginValue` configuration.
+- **capsuleChart:** add `showValue` configuration.
+
+# 2.8.2-alpha (2020-05-06)
+
+### Perfect
+
+- **borderBox8:** add `reverse` configuration.
+
+# 2.8.1-alpha (2020-05-03)
+
+### Perfect
+
+- **digitalFlop:** Use `\n` to start a newline.
+- **digitalFlop:** `rowGap` configuration.
+
+# 2.7.4-alpha (2020-04-15)
+
+### Bug Fixes
+
+- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).
+
+# 2.7.3-alpha (2020-01-16)
+
+### Bug Fixes
+
+- **activeRingChart:** `parseInt` precision lost.
+
+# 2.7.2-alpha (2020-01-10)
+
+### Perfect
+
+- **ativeRingChart:** Add digitalFlopToFixed configuration.
+
+# 2.7.1-alpha (2020-01-08)
+
+### Bug Fixes
+
+- **flylineChartEnhanced:** Exception when relative is false.
+
+# 2.7.0-alpha (2020-01-05)
+
+### New
+
+- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).
+
+# 2.6.0-alpha (2019-12-25)
+
+### Perfect
+
+- **scrollRankingBoard:** Configurable auto-sequencing [(#35)](https://github.com/DataV-Team/DataV/pull/35).
+- **scrollRankingBoard:** Render name using `v-html` [(#36)](https://github.com/DataV-Team/DataV/pull/36).
+
+# 2.5.0-alpha (2019-12-06)
+
+### Feature
+
+- **borderBox & decoration:** **Configurable** colors.
+  ```html
+  <!-- Example -->
+  <dv-border-box-1 :color="['red', 'green']" />
+  <dv-decoration-1 :color="['red', 'green']" />
+  ```
+- **scrollBoard:** Configurable index header [(#33)](https://github.com/DataV-Team/DataV/pull/33). 
+
+### New
+
+- **borderBox11**
+- **borderBox12**
+- **borderBox13**
+- **decoration11**
+
+# 2.4.8-alpha (2019-11-12)
+
+### Bug Fixes
+
+- **scrollBoard:** After updating props, the carousel speed is abnormal [(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
+- **scrollRankingBorad:** After updating props, the carousel speed is abnormal[(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
+
 # 2.4.7-alpha (2019-10-24)
 
-### perfect
+### Perfect
 
 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.

README.md

@@ -1,5 +1,8 @@
 [ENGLISH](./README_EN.md)
 
+<p align="center">
+  <img src="./icon.png">
+</p>
 <h1 align="center">DataV</h1>
 <p align="center">
     <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
@@ -44,23 +47,16 @@ Vue.use(borderBox1)
 
 [UMD版使用示例](./umdExample.html)
 
-### 调研
-
-关于React版本组件库及反馈请移步[问卷调查](https://www.wjx.cn/jq/45326197.aspx)
-
-![问卷调查](./questionnaire.jpg)
-
 ### TODO
 
-* **飞线图**添加多中心点及反向飞线功能
-* **边框**及**装饰**添加颜色及其他必要配置项，增强可配置性及灵活性.
+* **地图组件**
+* **TS**重构组件库底层依赖
 
 ### 致谢
 
 组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
 
 ### 反馈
-
 ![Feedback](./QQGroup.png)
 
 ### Demo

README_EN.md

@@ -1,7 +1,9 @@
 [中文](./README.md)
 
+<p align="center">
+  <img src="./icon.png">
+</p>
 <h1 align="center">DataV</h1>
-
 <p align="center">
     <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
       <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
@@ -57,8 +59,8 @@ React version of the component library and feedback[Questionnaire](https://www.w
 
 ### TODO
 
-* **flylineChart**Add multi-center point and reverse fly line function.
-* Add color and other necessary configuration to the **borderBox** and **decoration** to enhance configurability and flexibility.
+* **Map Component**
+* Refactor underlying dependencies using **TS**.
 
 ### Acknowledgement
 

lib/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -78,6 +78,11 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
+        /**
+         * @description Digital flop toFixed
+         * @type {Number}
+         */
+        digitalFlopToFixed: 0,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -89,7 +94,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -102,33 +113,47 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseInt(value[activeIndex] / sum * 100) || 0
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
-        style: digitalFlopStyle
+        content: showOriginValue ? '{nt}' : '{nt}%',
+        number: [displayValue],
+        style: digitalFlopStyle,
+        toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -137,7 +162,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -150,7 +175,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -159,17 +184,20 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -178,7 +206,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -200,7 +228,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -211,14 +239,15 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -251,12 +280,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

lib/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -8,36 +19,36 @@
       :class="`${item} border`"
     >
       <polygon
-        fill="#4fd2dd"
+        :fill="mergedColor[0]"
         points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#4fd2dd"
+          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#235fa7"
+        :fill="mergedColor[1]"
         points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
       >
         <animate
           attributeName="fill"
-          values="#235fa7;#4fd2dd;#235fa7"
+          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#4fd2dd"
+        :fill="mergedColor[0]"
         points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;transparent"
+          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -52,12 +63,54 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox1',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      ref: 'border-box-1',
+
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+
+      defaultColor: ['#4fd2dd', '#235fa7'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox10/src/main.css

@@ -2,7 +2,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 25px 3px #1d48c4;
   border-radius: 6px;
 }
 .dv-border-box-10 .border {

lib/components/borderBox10/src/main.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="dv-border-box-10">
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -8,7 +15,7 @@
       :class="`${item} border`"
     >
       <polygon
-        fill="#d3e1f8"
+        :fill="mergedColor[1]"
         points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
       />
     </svg>
@@ -20,12 +27,54 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox10',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      ref: 'border-box-10',
+
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+
+      defaultColor: ['#1d48c4', '#d3e1f8'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox11/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox11.name, BorderBox11)
+}

lib/components/borderBox11/src/main.css

@@ -0,0 +1,21 @@
+.dv-border-box-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-11 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-11 .dv-border-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-11 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox11/src/main.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="dv-border-box-11" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `"
+      />
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <text
+        class="dv-border-box-11-title"
+        :x="`${width / 2}`"
+        y="32"
+        fill="#fff"
+        font-size="18"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        {{ title }}
+      </text>
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `"
+      />
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    titleWidth: {
+      type: Number,
+      default: 250
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${id}`,
+
+      defaultColor: ['#8aaafb', '#1f33a2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>

lib/components/borderBox12/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox12.name, BorderBox12)
+}

lib/components/borderBox12/src/main.css

@@ -0,0 +1,17 @@
+.dv-border-box-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-12 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-12 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox12/src/main.vue

@@ -0,0 +1,148 @@
+<template>
+  <div class="dv-border-box-12" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
+          <feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
+            <animate
+              attributeName="flood-color"
+              :values="`
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+                ${fade(mergedColor[1] || defaultColor[1], 30)};
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+              `"
+              dur="3s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </feFlood>
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        v-if="width && height"
+        :fill="backgroundColor"
+        stroke-width="2"
+        :stroke="mergedColor[0]"
+        :d="`
+          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
+          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
+          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
+          Q 5 5 15 5
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
+          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
+          L ${width - 5} ${height - 20}
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M 20 ${height - 5} L 15 ${height - 5}
+          Q 5 ${height - 5} 5 ${height - 15}
+          L 5 ${height - 20}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'border-box-12',
+      filterId: `borderr-box-12-filterId-${id}`,
+
+      defaultColor: ['#2e6099', '#7ce7fd'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>

lib/components/borderBox13/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox13 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox13.name, BorderBox13)
+}

lib/components/borderBox13/src/main.css

@@ -0,0 +1,17 @@
+.dv-border-box-13 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-13 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-13 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox13/src/main.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="dv-border-box-13" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <path
+        :fill="backgroundColor"
+        :stroke="mergedColor[0]"
+        :d="`
+          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+          L ${width - 20} 10 L ${width - 5} 25
+          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L 5 ${height - 20} L 5 20
+        `"
+      />
+
+      <path
+        fill="transparent"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-dasharray="10, 5"
+        :stroke="mergedColor[0]"
+        :d="`M 16 9 L 61 9`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox13',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-13',
+
+      defaultColor: ['#6586ec', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>

lib/components/borderBox2/src/main.css

@@ -14,15 +14,6 @@
   fill: none;
   stroke-width: 1;
 }
-.dv-border-box-2 .dv-border-svg-container circle {
-  fill: #fff;
-}
-.dv-border-box-2 .dv-bb2-line1 {
-  stroke: #fff;
-}
-.dv-border-box-2 .dv-bb2-line2 {
-  stroke: rgba(255, 255, 255, 0.6);
-}
 .dv-border-box-2 .border-box-content {
   position: relative;
   width: 100%;

lib/components/borderBox2/src/main.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
-      <polyline class="dv-bb2-line1"
-        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
-      <polyline class="dv-bb2-line2"
-        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
-      <circle cx="11" cy="11" r="1" />
-      <circle :cx="width - 11" cy="11" r="1" />
-      <circle :cx="width - 11" :cy="height - 11" r="1" />
-      <circle cx="11" :cy="height - 11" r="1" />
+      <polygon :fill="backgroundColor" :points="`
+        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
+      />
+      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
+      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
     </svg>
 
     <div class="border-box-content">
@@ -20,13 +28,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox2',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-2'
+      ref: 'border-box-2',
+
+      defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox3/src/main.css

@@ -12,7 +12,6 @@
 }
 .dv-border-box-3 .dv-border-svg-container polyline {
   fill: none;
-  stroke: #2862b7;
 }
 .dv-border-box-3 .dv-bb3-line1 {
   stroke-width: 3;

lib/components/borderBox3/src/main.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="dv-border-box-3" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
+      `" />
+
       <polyline class="dv-bb3-line1"
-        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+        :stroke="mergedColor[0]"
+        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
+        :stroke="mergedColor[1]"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
+        :stroke="mergedColor[1]"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
+        :stroke="mergedColor[1]"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
+      />
     </svg>
 
     <div class="border-box-content">
@@ -20,13 +32,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox3',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-3'
+      ref: 'border-box-3',
+
+      defaultColor: ['#2862b7', '#2862b7'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox4/src/main.css

@@ -16,12 +16,6 @@
 .dv-border-box-4 .dv-border-svg-container polyline {
   fill: none;
 }
-.dv-border-box-4 .sred {
-  stroke: red;
-}
-.dv-border-box-4 .sblue {
-  stroke: rgba(0, 0, 255, 0.8);
-}
 .dv-border-box-4 .sw1 {
   stroke-width: 1;
 }
@@ -30,48 +24,38 @@
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-1 {
-  stroke: red;
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-2 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-3 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-4 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-5 {
-  stroke: red;
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-6 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-7 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-8 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-9 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
   stroke-dasharray: 100 250;
 }
 .dv-border-box-4 .dv-bb4-line-10 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
   stroke-dasharray: 80 270;
 }

lib/components/borderBox4/src/main.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
     <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
-        10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
-      <polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
-        14, ${height - 100}`" />
-      <polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
-      <polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
-      <polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
-      <polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
-      <polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
-      <polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
-      <polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
-      <polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
+      <polygon :fill="backgroundColor" :points="`
+        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
+      `" />
+
+      <polyline class="dv-bb4-line-1"
+        :stroke="mergedColor[0]"
+        :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
+          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
+          14, ${height - 100}`"
+      />
+
+      <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
+      <polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
+      <polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
+      <polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
+      <polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
+      <polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
+      <polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
+      <polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
     </svg>
 
     <div class="border-box-content">
@@ -24,19 +36,54 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox4',
   mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-4'
-    }
-  },
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
+  },
+  data () {
+    return {
+      ref: 'border-box-4',
+
+      defaultColor: ['red', 'rgba(0,0,255,0.8)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox5/src/main.css

@@ -16,22 +16,17 @@
 .dv-border-box-5 .dv-svg-container polyline {
   fill: none;
 }
-.dv-border-box-5 .dv-bb5-line-1 {
-  stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
-}
+.dv-border-box-5 .dv-bb5-line-1,
 .dv-border-box-5 .dv-bb5-line-2 {
-  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 1;
 }
 .dv-border-box-5 .dv-bb5-line-3,
 .dv-border-box-5 .dv-bb5-line-6 {
   stroke-width: 5;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .dv-bb5-line-4,
 .dv-border-box-5 .dv-bb5-line-5 {
   stroke-width: 2;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .border-box-content {
   position: relative;

lib/components/borderBox5/src/main.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
     <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
-        ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
-      <polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
-        ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
-      <polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
-      <polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
-      <polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
-      <polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
+      <polyline
+        class="dv-bb5-line-1"
+        :stroke="mergedColor[0]"
+        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
+          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
+      />
+      <polyline
+        class="dv-bb5-line-2"
+        :stroke="mergedColor[1]"
+        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
+          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
+      />
+      <polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
+      <polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
+      <polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
+      <polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
     </svg>
 
     <div class="border-box-content">
@@ -20,19 +32,54 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox5',
   mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-5'
-    }
-  },
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
+  },
+  data () {
+    return {
+      ref: 'border-box-5',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox6/src/main.css

@@ -10,13 +10,9 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-svg-container circle {
-  fill: gray;
-}
 .dv-border-box-6 .dv-svg-container polyline {
   fill: none;
   stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
 }
 .dv-border-box-6 .border-box-content {
   position: relative;

lib/components/borderBox6/src/main.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
     <svg class="dv-svg-container" :width="width" :height="height">
-      <circle cx="5" cy="5" r="2"/>
-      <circle :cx="width - 5" cy="5" r="2" />
-      <circle :cx="width - 5" :cy="height - 5" r="2" />
-      <circle cx="5" :cy="height - 5" r="2" />
-      <polyline :points="`10, 4 ${width - 10}, 4`" />
-      <polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
-      <polyline :points="`5, 70 5, ${height - 70}`" />
-      <polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
-      <polyline :points="`3, 10, 3, 50`" />
-      <polyline :points="`7, 30 7, 80`" />
-      <polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
-      <polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
-      <polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
-      <polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
-      <polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
-      <polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
+      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
+      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
+      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
+      <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
+      <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
+      <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
+      <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
     </svg>
 
     <div class="border-box-content">
@@ -28,13 +32,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize.js'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox6',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-6'
+      ref: 'border-box-6',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox7/src/main.css

@@ -2,8 +2,6 @@
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
-  border: 1px solid rgba(128, 128, 128, 0.3);
 }
 .dv-border-box-7 .dv-svg-container {
   position: absolute;
@@ -17,11 +15,9 @@
   stroke-linecap: round;
 }
 .dv-border-box-7 .dv-bb7-line-width-2 {
-  stroke: rgba(128, 128, 128, 0.3);
   stroke-width: 2;
 }
 .dv-border-box-7 .dv-bb7-line-width-5 {
-  stroke: rgba(128, 128, 128, 0.5);
   stroke-width: 5;
 }
 .dv-border-box-7 .border-box-content {

lib/components/borderBox7/src/main.vue

@@ -1,15 +1,20 @@
-<template>
-  <div class="dv-border-box-7" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
-      <polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
-      <polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
 
-      <polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
-      <polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
+<template>
+  <div
+    class="dv-border-box-7"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
+    :ref="ref"
+  >
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
+
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
     </svg>
 
     <div class="border-box-content">
@@ -21,13 +26,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox7',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-7'
+      ref: 'border-box-7',
+
+      defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox8/src/main.vue

@@ -4,7 +4,7 @@
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -24,8 +24,8 @@
         <mask :id="mask">
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
-              dur="3s"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :dur="`${dur}s`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -33,14 +33,16 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
       <use
-        stroke="#235fa7"
+        :stroke="mergedColor[0]"
         stroke-width="1"
         :xlink:href="`#${path}`"
       />
 
       <use
-        stroke="#4fd2dd"
+        :stroke="mergedColor[1]"
         stroke-width="3"
         :xlink:href="`#${path}`"
         :mask="`url(#${mask})`"
@@ -49,7 +51,7 @@
           attributeName="stroke-dasharray"
           :from="`0, ${length}`"
           :to="`${length}, 0`"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -63,17 +65,44 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`,
+
+      defaultColor: ['#235fa7', '#4fd2dd'],
+
+      mergedColor: []
     }
   },
   computed: {
@@ -81,7 +110,33 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox9/src/main.vue

@@ -3,8 +3,40 @@
     <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#11eefd" />
-          <stop offset="100%" stop-color="#0078d2" />
+          <animate
+            attributeName="x1"
+            values="0%;100%;0%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <animate
+            attributeName="x2"
+            values="100%;0%;100%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <stop offset="0%" :stop-color="mergedColor[0]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" :stop-color="mergedColor[1]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
         </linearGradient>
 
         <mask :id="maskId">
@@ -73,6 +105,15 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
       <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
     </svg>
 
@@ -84,18 +125,56 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`,
+
+      defaultColor: ['#11eefd', '#0078d2'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/capsuleChart/src/main.css

@@ -31,19 +31,27 @@
   margin: 5px 0px;
   border-radius: 5px;
 }
-.dv-capsule-chart .capsule-item div {
+.dv-capsule-chart .capsule-item .capsule-item-column {
+  position: relative;
   height: 8px;
   margin-top: 1px;
   border-radius: 5px;
   transition: all 0.3s;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
+  font-size: 12px;
+  transform: translateX(100%);
 }
 .dv-capsule-chart .unit-label {
   height: 20px;
   font-size: 12px;
+  position: relative;
   display: flex;
-  flex-direction: row;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 }
 .dv-capsule-chart .unit-text {
   text-align: right;

lib/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <div class="capsule-container">
-        <div
-          class="capsule-item"
-          v-for="(capsule, index) in capsuleLength"
-          :key="index"
-        >
-          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            class="capsule-item-column"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <div
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}</div>
+          </div>
         </div>
 
         <div class="unit-label">
-          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -38,7 +45,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,42 +61,61 @@ export default {
          * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
          * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
          */
-        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
         /**
          * @description Chart unit
          * @type {String}
          * @default unit = ''
          */
-        unit: ''
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
     }
   },
   watch: {
-    config () {
+    config() {
       const { calcData } = this
 
       calcData()
     }
   },
   methods: {
-    calcData () {
+    calcData() {
       const { mergeConfig, calcCapsuleLengthAndLabelData } = this
 
       mergeConfig()
 
       calcCapsuleLengthAndLabelData()
     },
-    mergeConfig () {
+    mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    calcCapsuleLengthAndLabelData () {
+    calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
 
       if (!data.length) return
@@ -98,14 +124,24 @@ export default {
 
       const maxValue = Math.max(...capsuleValue)
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
 
       const oneFifth = maxValue / 5
 
-      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
     }
   },
-  mounted () {
+  mounted() {
     const { calcData } = this
 
     calcData()

lib/components/charts/src/main.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
@@ -19,10 +21,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
-      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${timestamp}`,
+      ref: `charts-container-${id}`,
+      chartRef: `chart-${id}`,
 
       chart: null
     }

lib/components/decoration1/src/main.vue

@@ -8,7 +8,7 @@
         <rect
           v-if="Math.random() > 0.6"
           :key="i"
-          fill="#fff"
+          :fill="mergedColor[0]"
           :x="point[0] - halfPointSideLength"
           :y="point[1] - halfPointSideLength"
           :width="pointSideLength"
@@ -17,7 +17,7 @@
           <animate
             v-if="Math.random() > 0.6"
             attributeName="fill"
-            values="#fff;transparent"
+            :values="`${mergedColor[0]};transparent`"
             dur="1s"
             :begin="Math.random() * 2"
             repeatCount="indefinite"
@@ -27,7 +27,7 @@
 
       <rect
         v-if="rects[0]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[0][0] - pointSideLength"
         :y="rects[0][1] - pointSideLength"
         :width="pointSideLength * 2"
@@ -61,7 +61,7 @@
 
       <rect
         v-if="rects[1]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[1][0] - 40"
         :y="rects[1][1] - pointSideLength"
         :width="40"
@@ -87,9 +87,19 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration1',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const pointSideLength = 2.5
 
@@ -108,7 +118,18 @@ export default {
 
       points: [],
 
-      rects: []
+      rects: [],
+
+      defaultColor: ['#fff', '#0de7c2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -160,7 +181,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>

lib/components/decoration10/src/main.vue

@@ -2,13 +2,13 @@
   <div class="dv-decoration-10" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="rgba(0, 194, 255, 0.3)"
+        :stroke="mergedColor[1]"
         stroke-width="2"
         :points="`0, ${height / 2} ${width}, ${height / 2}`"
       />
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -32,7 +32,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.6}`"
@@ -55,7 +55,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -77,65 +77,65 @@
         />
       </polyline>
 
-      <circle cx="2" :cy="height / 2" r="2" fill="#03709f">
+      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId1"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`0s;${animationId7}.end`"
           dur="0.3s"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId3"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId2}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId5"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId4}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId7"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId6}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
@@ -147,23 +147,57 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${timestamp}`
+      animationId1: `d10ani1${id}`,
+      animationId2: `d10ani2${id}`,
+      animationId3: `d10ani3${id}`,
+      animationId4: `d10ani4${id}`,
+      animationId5: `d10ani5${id}`,
+      animationId6: `d10ani6${id}`,
+      animationId7: `d10ani7${id}`,
+
+      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration11/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration11.name, Decoration11)
+}

lib/components/decoration11/src/main.css

@@ -0,0 +1,16 @@
+.dv-decoration-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.dv-decoration-11 .decoration-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

lib/components/decoration11/src/main.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="dv-decoration-11" :ref="ref">
+    <svg :width="width" :height="height">
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 10, 25 4, 55 4 60 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
+        :stroke="mergedColor[0]"
+        :points="`
+          20 10, 5 ${height / 2} 20 ${height - 10}
+          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
+        `"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
+      />
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      ref: 'decoration-11',
+
+      defaultColor: ['#1a98fc', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>

lib/components/decoration2/src/main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dv-decoration-2" :ref="ref">
     <svg :width="`${width}px`" :height="`${height}px`">
-      <rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
+      <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
         <animate
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
@@ -14,7 +14,7 @@
         />
       </rect>
 
-      <rect :x="x" :y="y" width="1" height="1" fill="#fff">
+      <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
         <animate
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
@@ -33,10 +33,18 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration2',
   mixins: [autoResize],
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
@@ -50,10 +58,19 @@ export default {
       y: 0,
 
       w: 0,
-      h: 0
+      h: 0,
+
+      defaultColor: ['#3faacb', '#fff'],
+
+      mergedColor: []
     }
   },
   watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    },
     reverse () {
       const { calcSVGData } = this
 
@@ -85,7 +102,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>

lib/components/decoration3/src/main.vue

@@ -7,7 +7,7 @@
       >
         <rect
           :key="i"
-          fill="#7acaec"
+          :fill="mergedColor[0]"
           :x="point[0] - halfPointSideLength"
           :y="point[1] - halfPointSideLength"
           :width="pointSideLength"
@@ -16,7 +16,7 @@
           <animate
             v-if="Math.random() > 0.6"
             attributeName="fill"
-            values="#7acaec;transparent"
+            :values="`${mergedColor.join(';')}`"
             :dur="Math.random() + 1 + 's'"
             :begin="Math.random() * 2"
             repeatCount="indefinite"
@@ -30,9 +30,19 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration3',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const pointSideLength = 7
 
@@ -49,7 +59,18 @@ export default {
       pointSideLength,
       halfPointSideLength: pointSideLength / 2,
 
-      points: []
+      points: [],
+
+      defaultColor: ['#7acaec', 'transparent'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -91,7 +112,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>

lib/components/decoration4/src/main.css

@@ -7,20 +7,22 @@
   display: flex;
   overflow: hidden;
   position: absolute;
+  flex: 1;
 }
 .dv-decoration-4 .normal {
-  height: 0% !important;
   animation: ani-height 3s ease-in-out infinite;
   left: 50%;
   margin-left: -2px;
 }
 .dv-decoration-4 .reverse {
-  width: 0% !important;
   animation: ani-width 3s ease-in-out infinite;
   top: 50%;
   margin-top: -2px;
 }
 @keyframes ani-height {
+  0% {
+    height: 0%;
+  }
   70% {
     height: 100%;
   }
@@ -29,6 +31,9 @@
   }
 }
 @keyframes ani-width {
+  0% {
+    width: 0%;
+  }
   70% {
     width: 100%;
   }

lib/components/decoration4/src/main.vue

@@ -6,12 +6,12 @@
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[0]"
           :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
         />
         <polyline
           class="bold-line"
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[1]"
           stroke-width="3"
           stroke-dasharray="20, 80"
           stroke-dashoffset="-30"
@@ -25,14 +25,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration4',
   mixins: [autoResize],
-  props: ['reverse'],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
-      ref: 'decoration-4'
+      ref: 'decoration-4',
+
+      defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/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>

lib/components/decoration6/src/main.vue

@@ -6,7 +6,7 @@
       >
         <rect
           :key="i"
-          fill="#7acaec"
+          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
           :x="point[0] - halfRectWidth"
           :y="point[1] - heights[i] / 2"
           :width="rectWidth"
@@ -43,9 +43,19 @@ import autoResize from '../../../mixin/autoResize'
 
 import { randomExtend } from '../../../util'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration6',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const rectWidth = 7
 
@@ -65,7 +75,18 @@ export default {
       points: [],
       heights: [],
       minHeights: [],
-      randoms: []
+      randoms: [],
+
+      defaultColor: ['#7acaec', '#7acaec'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -116,7 +137,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>

lib/components/decoration7/src/main.vue

@@ -4,13 +4,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="10, 0 19, 10 10, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="2, 0 11, 10 2, 20"
       />
     </svg>
@@ -19,13 +19,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="11, 0 2, 10 11, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="19, 0 10, 10 19, 20"
       />
     </svg>
@@ -33,7 +33,43 @@
 </template>
 
 <script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
-  name: 'DvDecoration7'
+  name: 'DvDecoration7',
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultColor: ['#1dc1f5', '#1dc1f5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
 }
 </script>

lib/components/decoration8/src/main.vue

@@ -2,21 +2,21 @@
   <div class="dv-decoration-8" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[1]"
         fill="transparent"
         stroke-width="3"
         :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
@@ -28,10 +28,18 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration8',
   mixins: [autoResize],
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
@@ -39,7 +47,18 @@ export default {
   },
   data () {
     return {
-      ref: 'decoration-8'
+      ref: 'decoration-8',
+
+      defaultColor: ['#3f96a5', '#3f96a5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -49,7 +68,17 @@ export default {
       if (!reverse) return pos
 
       return width - pos
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration9/src/main.vue

@@ -10,7 +10,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.5)"
+        :stroke="mergedColor[1]"
         stroke-width="10"
         stroke-dasharray="80, 100, 30, 100"
       >
@@ -18,7 +18,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -28,7 +28,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.8)"
+        :stroke="mergedColor[0]"
         stroke-width="6"
         stroke-dasharray="50, 66, 100, 66"
       >
@@ -36,7 +36,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;-360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -46,7 +46,7 @@
         cy="50"
         r="38"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -55,15 +55,15 @@
         v-for="(foo, i) in new Array(20).fill(0)"
         :key="i"
         :xlink:href="`#${polygonId}`"
-        stroke="rgba(3, 166, 224, 0.6)"
-        :fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
+        :stroke="mergedColor[1]"
+        :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
       >
         <animateTransform
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
-          :begin="`${i * 0.15}s`"
+          :dur="`${dur}s`"
+          :begin="`${i * dur / 20}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -73,7 +73,7 @@
         cy="50"
         r="26"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -85,20 +85,48 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
 
 export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${id}`,
 
       svgWH: [100, 100],
 
-      svgScale: [1, 1]
+      svgScale: [1, 1],
+
+      defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -118,7 +146,18 @@ export default {
       const { calcScale } = this
 
       calcScale()
-    }
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/digitalFlop/src/main.vue

@@ -53,6 +53,12 @@ export default {
          * @example textAlign = 'center' | 'left' | 'right'
          */
         textAlign: 'center',
+        /**
+         * @description rowGap
+         * @type {Number}
+         @default rowGap = 0
+         */
+        rowGap: 0,
         /**
          * @description Text style configuration
          * @type {Object} {CRender Class Style}
@@ -61,6 +67,11 @@ export default {
           fontSize: 30,
           fill: '#3de7c9'
         },
+        /**
+         * @description Number formatter
+         * @type {Null|Function}
+         */
+        formatter: undefined,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -124,7 +135,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -137,7 +148,9 @@ export default {
         number,
         content,
         toFixed,
-        position
+        position,
+        rowGap,
+        formatter
       }
     },
     getStyle () {
@@ -151,6 +164,8 @@ export default {
     update () {
       const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
 
+      graph.animationEnd()
+
       mergeConfig()
 
       if (!graph) return
@@ -165,8 +180,6 @@ export default {
       graph.animationCurve = animationCurve
       graph.animationFrame = animationFrame
 
-      graph.animationEnd()
-
       graph.animation('style', style, true)
       graph.animation('shape', shape)
     },

lib/components/flylineChart/src/main.vue

@@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
@@ -171,14 +171,14 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      maskId: `flyline-mask-id-${id}`,
+      maskCircleId: `mask-circle-id-${id}`,
+      gradientId: `gradient-id-${id}`,
+      gradient2Id: `gradient2-id-${id}`,
 
       defaultConfig: {
         /**

lib/components/flylineChartEnhanced/index.js

@@ -0,0 +1,6 @@
+import './src/main.css'
+import FlylineChartEnhanced from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
+}

lib/components/flylineChartEnhanced/src/main.css

@@ -0,0 +1,9 @@
+.dv-flyline-chart-enhanced {
+  display: flex;
+  flex-direction: column;
+  background-size: 100% 100%;
+}
+.dv-flyline-chart-enhanced text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}

lib/components/flylineChartEnhanced/src/main.vue

@@ -0,0 +1,566 @@
+<template>
+  <div
+    class="dv-flyline-chart-enhanced"
+    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
+    :ref="ref"
+    @click="consoleClickPos"
+  >
+    <svg v-if="flylines.length" :width="width" :height="height">
+      <defs>
+        <radialGradient
+          :id="flylineGradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop
+            offset="0%" stop-color="#fff"
+            stop-opacity="1"
+          />
+          <stop
+            offset="100%" stop-color="#fff"
+            stop-opacity="0"
+          />
+        </radialGradient>
+
+        <radialGradient
+          :id="haloGradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop
+            offset="0%" stop-color="#fff"
+            stop-opacity="0"
+          />
+          <stop
+            offset="100%" stop-color="#fff"
+            stop-opacity="1"
+          />
+        </radialGradient>
+      </defs>
+
+      <!-- points -->
+      <g v-for="point in flylinePoints" :key="point.key + Math.random()">
+        <defs>
+          <circle
+            v-if="point.halo.show"
+            :id="`halo${unique}${point.key}`"
+            :cx="point.coordinate[0]"
+            :cy="point.coordinate[1]"
+          >
+            <animate
+              attributeName="r"
+              :values="`1;${point.halo.radius}`"
+              :dur="`${point.halo.time}s`"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              :dur="`${point.halo.time}s`"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </defs>
+
+        <!-- halo gradient mask -->
+        <mask :id="`mask${unique}${point.key}`">
+          <use
+            v-if="point.halo.show"
+            :xlink:href="`#halo${unique}${point.key}`"
+            :fill="`url(#${haloGradientId})`"
+          />
+        </mask>
+
+        <!-- point halo -->
+        <use
+          v-if="point.halo.show"
+          :xlink:href="`#halo${unique}${point.key}`"
+          :fill="point.halo.color"
+          :mask="`url(#mask${unique}${point.key})`"
+        />
+
+        <!-- point icon -->
+        <image
+          v-if="point.icon.show"
+          :xlink:href="point.icon.src"
+          :width="point.icon.width"
+          :height="point.icon.height"
+          :x="point.icon.x"
+          :y="point.icon.y"
+        />
+
+        <!-- point text -->
+        <text
+          v-if="point.text.show"
+          :style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
+          :fill="point.text.color"
+          :x="point.text.x"
+          :y="point.text.y"
+        >
+          {{ point.name }}
+        </text>
+      </g>
+
+      <!-- flylines -->
+      <g v-for="(line, i) in flylines" :key="line.key + Math.random()">
+        <defs>
+          <path
+            :id="line.key"
+            :ref="line.key"
+            :d="line.d"
+            fill="transparent"
+          />
+        </defs>
+
+        <!-- orbit line -->
+        <use
+          :xlink:href="`#${line.key}`"
+          :stroke-width="line.width"
+          :stroke="line.orbitColor"
+        />
+
+        <!-- fly line gradient mask -->
+        <mask :id="`mask${unique}${line.key}`">
+          <circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
+            <animateMotion
+              :dur="line.time"
+              :path="line.d"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+
+        <!-- fly line -->
+        <use
+          v-if="flylineLengths[i]"
+          :xlink:href="`#${line.key}`"
+          :stroke-width="line.width"
+          :stroke="line.color"
+          :mask="`url(#mask${unique}${line.key})`"
+        >
+          <animate
+            attributeName="stroke-dasharray"
+            :from="`0, ${flylineLengths[i]}`"
+            :to="`${flylineLengths[i]}, 0`"
+            :dur="line.time"
+            repeatCount="indefinite"
+          />
+        </use>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'
+
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvFlylineChartEnhanced',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    dev: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'dv-flyline-chart-enhanced',
+      unique: Math.random(),
+      flylineGradientId: `flyline-gradient-id-${id}`,
+      haloGradientId: `halo-gradient-id-${id}`,
+      /**
+       * @description Type Declaration
+       * 
+       * interface Halo {
+       *    show?: boolean
+       *    duration?: [number, number]
+       *    color?: string
+       *    radius?: number
+       * }
+       * 
+       * interface Text {
+       *    show?: boolean
+       *    offset?: [number, number]
+       *    color?: string
+       *    fontSize?: number
+       * }
+       * 
+       * interface Icon {
+       *    show?: boolean
+       *    src?: string
+       *    width?: number
+       *    height?: number
+       * }
+       * 
+       * interface Point {
+       *    name: string
+       *    coordinate: [number, number]
+       *    halo?: Halo
+       *    text?: Text
+       *    icon?: Icon
+       * }
+       * 
+       * interface Line {
+       *    width?: number
+       *    color?: string
+       *    orbitColor?: string
+       *    duration?: [number, number]
+       *    radius?: string
+       * }
+       * 
+       * interface Flyline extends Line {
+       *    source: string
+       *    target: string
+       * }
+       * 
+       * interface FlylineWithPath extends Flyline {
+       *    d: string
+       *    path: [[number, number], [number, number], [number, number]]
+       *    key: string
+       * }
+       */
+      defaultConfig: {
+        /**
+         * @description Flyline chart points
+         * @type {Point[]}
+         * @default points = []
+         */
+        points: [],
+        /**
+         * @description Lines
+         * @type {Flyline[]}
+         * @default lines = []
+         */
+        lines: [],
+        /**
+         * @description Global halo configuration
+         * @type {Halo}
+         */
+        halo: {
+          /**
+           * @description Whether to show halo
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Halo animation duration (1s = 10)
+           * @type {[number, number]}
+           */
+          duration: [20, 30],
+          /**
+           * @description Halo color
+           * @type {String}
+           * @default color = '#fb7293'
+           */
+          color: '#fb7293',
+          /**
+           * @description Halo radius
+           * @type {Number}
+           * @default radius = 120
+           */
+          radius: 120
+        },
+        /**
+         * @description Global text configuration
+         * @type {Text}
+         */
+        text: {
+          /**
+           * @description Whether to show text
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Text offset
+           * @type {[number, number]}
+           * @default offset = [0, 15]
+           */
+          offset: [0, 15],
+          /**
+           * @description Text color
+           * @type {String}
+           * @default color = '#ffdb5c'
+           */
+          color: '#ffdb5c',
+          /**
+           * @description Text font size
+           * @type {Number}
+           * @default fontSize = 12
+           */
+          fontSize: 12
+        },
+        /**
+         * @description Global icon configuration
+         * @type {Icon}
+         */
+        icon: {
+          /**
+           * @description Whether to show icon
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Icon src
+           * @type {String}
+           * @default src = ''
+           */
+          src: '',
+          /**
+           * @description Icon width
+           * @type {Number}
+           * @default width = 15
+           */
+          width: 15,
+          /**
+           * @description Icon height
+           * @type {Number}
+           * @default width = 15
+           */
+          height: 15
+        },
+        /**
+         * @description Global line configuration
+         * @type {Line}
+         */
+        line: {
+          /**
+           * @description Line width
+           * @type {Number}
+           * @default width = 1
+           */
+          width: 1,
+          /**
+           * @description Flyline color
+           * @type {String}
+           * @default color = '#ffde93'
+           */
+          color: '#ffde93',
+          /**
+           * @description Orbit color
+           * @type {String}
+           * @default orbitColor = 'rgba(103, 224, 227, .2)'
+           */
+          orbitColor: 'rgba(103, 224, 227, .2)',
+          /**
+           * @description Flyline animation duration
+           * @type {[number, number]}
+           * @default duration = [20, 30]
+           */
+          duration: [20, 30],
+          /**
+           * @description Flyline radius
+           * @type {Number}
+           * @default radius = 100
+           */
+          radius: 100
+        },
+        /**
+         * @description Back ground image url
+         * @type {String}
+         * @default bgImgSrc = ''
+         */
+        bgImgSrc: '',
+        /**
+         * @description K value
+         * @type {Number}
+         * @default k = -0.5
+         * @example k = -1 ~ 1
+         */
+        k: -0.5,
+        /**
+         * @description Flyline curvature
+         * @type {Number}
+         * @default curvature = 5
+         */
+        curvature: 5,
+        /**
+         * @description Relative points position
+         * @type {Boolean}
+         * @default relative = true
+         */
+        relative: true
+      },
+      /**
+       * @description Fly line data
+       * @type {FlylineWithPath[]}
+       * @default flylines = []
+       */
+      flylines: [],
+      /**
+       * @description Fly line lengths
+       * @type {Number[]}
+       * @default flylineLengths = []
+       */
+      flylineLengths: [],
+      /**
+       * @description Fly line points
+       * @default flylinePoints = []
+       */
+      flylinePoints: [],
+
+      mergedConfig: null
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { calcData } = this
+
+      calcData()
+    },
+    async calcData () {
+      const { mergeConfig, calcflylinePoints, calcLinePaths } = this
+
+      mergeConfig()
+
+      calcflylinePoints()
+
+      calcLinePaths()
+
+      const { calcLineLengths } = this
+
+      await calcLineLengths()
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+
+      const { points, lines, halo, text, icon, line } = mergedConfig
+
+      mergedConfig.points = points.map(item => {
+        item.halo = deepMerge(deepClone(halo, true), item.halo || {})
+        item.text = deepMerge(deepClone(text, true), item.text || {})
+        item.icon = deepMerge(deepClone(icon, true), item.icon || {})
+
+        return item
+      })
+
+      mergedConfig.lines = lines.map(item => {
+        return deepMerge(deepClone(line, true), item)
+      })
+
+      this.mergedConfig = mergedConfig
+    },
+    calcflylinePoints () {
+      const { mergedConfig, width, height } = this
+
+      const { relative, points } = mergedConfig
+
+      this.flylinePoints = points.map((item, i) => {
+        const { coordinate: [x, y], halo, icon, text } = item
+
+        if (relative) item.coordinate = [x * width, y * height]
+
+        item.halo.time = randomExtend(...halo.duration) / 10
+
+        const { width: iw, height: ih } = icon
+        item.icon.x = item.coordinate[0] - iw / 2
+        item.icon.y = item.coordinate[1] - ih / 2
+
+        const [ox, oy] = text.offset
+        item.text.x = item.coordinate[0] + ox
+        item.text.y = item.coordinate[1] + oy
+
+        item.key = `${item.coordinate.toString()}${i}`
+
+        return item
+      })
+    },
+    calcLinePaths () {
+      const { getPath, mergedConfig } = this
+
+      const { points, lines } = mergedConfig
+
+      this.flylines = lines.map(item => {
+        const { source, target, duration } = item
+
+        const sourcePoint = points.find(({ name }) => name === source).coordinate
+        const targetPoint = points.find(({ name }) => name === target).coordinate
+
+        const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
+        const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
+        const key = `path${path.toString()}`
+        const time = randomExtend(...duration) / 10
+
+        return { ...item, path, key, d, time }
+      })
+    },
+    getPath (start, end) {
+      const { getControlPoint } = this
+
+      const controlPoint = getControlPoint(start, end)
+
+      return [start, controlPoint, end]
+    },
+    getControlPoint ([sx, sy], [ex, ey]) {
+      const { getKLinePointByx, mergedConfig } = this
+
+      const { curvature, k } = mergedConfig
+
+      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
+
+      const distance = getPointDistance([sx, sy], [ex, ey])
+
+      const targetLength = distance / curvature
+      const disDived = targetLength / 2
+
+      let [dx, dy] = [mx, my]
+
+      do {
+        dx += disDived
+        dy = getKLinePointByx(k, [mx, my], dx)[1]
+      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)
+
+      return [dx, dy]
+    },
+    getKLinePointByx (k, [lx, ly], x) {
+      const y = ly - k * lx + k * x
+
+      return [x, y]
+    },
+    async calcLineLengths () {
+      const { $nextTick, flylines, $refs } = this
+
+      await $nextTick()
+
+      this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
+    },
+    consoleClickPos ({ offsetX, offsetY }) {
+      const { width, height, dev } = this
+
+      if (!dev) return
+
+      const relativeX = (offsetX / width).toFixed(2)
+      const relativeY = (offsetY / height).toFixed(2)
+
+      console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
+    }
+  }
+}
+</script>

lib/components/percentPond/src/main.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@@ -57,10 +59,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
+      gradientId2: `percent-pond-gradientId2-${id}`,
 
       width: 0,
       height: 0,
@@ -234,10 +236,10 @@ export default {
 
       await $nextTick()
 
-      const dom = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond']
 
-      this.width = dom.clientWidth
-      this.height = dom.clientHeight
+      this.width = clientWidth
+      this.height = clientHeight
     },
     mergeConfig () {
       const { config, defaultConfig } = this

lib/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,11 +33,13 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
-          @click="emitEvent(ri, ci, row, ceil)"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
         />
 
       </div>
@@ -134,13 +136,26 @@ export default {
          * @default index = false
          */
         index: false,
+        /**
+         * @description index Header
+         * @type {String}
+         * @default indexHeader = '#'
+         */
+        indexHeader: '#',
         /**
          * @description Carousel type
          * @type {String}
          * @default carousel = 'single'
          * @example carousel = 'single' | 'page'
          */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Pause scroll when mouse hovered
+         * @type {Boolean}
+         * @default hoverPause = true
+         * @example hoverPause = true | false
+         */
+        hoverPause: true
       },
 
       mergedConfig: null,
@@ -161,7 +176,11 @@ export default {
 
       animationIndex: 0,
 
-      animationHandler: ''
+      animationHandler: '',
+
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -170,10 +189,24 @@ export default {
 
       stopAnimation()
 
+      this.animationIndex = 0
+
       calcData()
     }
   },
   methods: {
+    handleHover(enter, ri, ci, row, ceil){
+      const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+      if (!mergedConfig.hoverPause) return
+
+      if (enter) {
+        stopAnimation()
+      } else {
+        animation(true)
+      }
+    },
     afterAutoResizeMixinInit () {
       const { calcData } = this
 
@@ -215,7 +248,7 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     calcHeaderData () {
-      let { header, index } = this.mergedConfig
+      let { header, index, indexHeader} = this.mergedConfig
 
       if (!header.length) {
         this.header = []
@@ -225,7 +258,7 @@ export default {
 
       header = [...header]
 
-      if (index) header.unshift('#')
+      if (index) header.unshift(indexHeader)
 
       this.header = header
     },
@@ -304,7 +337,15 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
-      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
 
@@ -312,17 +353,21 @@ export default {
 
       if (rowNum >= rowLength) return
 
-      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
 
       const animationNum = carousel === 'single' ? 1 : rowNum
 
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
 
       this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
 
@@ -335,21 +380,36 @@ export default {
       this.animationHandler = setTimeout(animation, waitTime - 300)
     },
     stopAnimation () {
-      const { animationHandler } = this
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
 
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
     },
-    emitEvent (ri, ci, row, ceil) {
+    emitEvent (type, ri, ci, row, ceil) {
       const { ceils, rowIndex } = row
 
-      this.$emit('click', {
+      this.$emit(type, {
         row: ceils,
         ceil,
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

lib/components/scrollRankingBoard/src/main.vue

@@ -8,8 +8,8 @@
     >
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
-        <div class="info-name">{{ item.name }}</div>
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="info-name" v-html="item.name" />
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -76,7 +76,19 @@ export default {
          * @default unit = ''
          * @example unit = 'ton'
          */
-        unit: ''
+        unit: '',
+        /**
+         * @description Auto sort by value
+         * @type {Boolean}
+         * @default sort = true
+         */
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -89,7 +101,9 @@ export default {
 
       animationIndex: 0,
 
-      animationHandler: ''
+      animationHandler: '',
+
+      updater: 0
     }
   },
   watch: {
@@ -135,19 +149,29 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     calcRowsData () {
-      let { data, rowNum } = this.mergedConfig
+      let { data, rowNum, sort } = this.mergedConfig
 
-      data.sort(({ value: a }, { value: b }) => {
+      sort && data.sort(({ value: a }, { value: b }) => {
         if (a > b) return -1
         if (a < b) return 1
         if (a === b) return 0
       })
 
       const value = data.map(({ value }) => value)
+      
+      const min = Math.min(...value) || 0
+
+      // abs of min
+      const minAbs = Math.abs(min)
 
       const max = Math.max(...value) || 0
 
-      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
+      // abs of max
+      const maxAbs = Math.abs(max)
+
+      const total = max + minAbs
+
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
 
       const rowLength = data.length
 
@@ -172,7 +196,7 @@ export default {
       if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
     },
     async animation (start = false) {
-      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
 
@@ -180,17 +204,21 @@ export default {
 
       if (rowNum >= rowLength) return
 
-      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
 
       const animationNum = carousel === 'single' ? 1 : rowNum
 
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
 
       this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
 
@@ -203,12 +231,14 @@ export default {
       this.animationHandler = setTimeout(animation, waitTime - 300)
     },
     stopAnimation () {
-      const { animationHandler } = this
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
 
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

lib/components/waterLevelPond/src/main.vue

@@ -40,6 +40,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@@ -53,9 +55,9 @@ export default {
     default: () => ({})
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${id}`,
 
       defaultConfig: {
         /**

lib/index.js

@@ -4,6 +4,9 @@
 export { default as activeRingChart } from './components/activeRingChart/index'
 export { default as borderBox1 } from './components/borderBox1/index'
 export { default as borderBox10 } from './components/borderBox10/index'
+export { default as borderBox11 } from './components/borderBox11/index'
+export { default as borderBox12 } from './components/borderBox12/index'
+export { default as borderBox13 } from './components/borderBox13/index'
 export { default as borderBox2 } from './components/borderBox2/index'
 export { default as borderBox3 } from './components/borderBox3/index'
 export { default as borderBox4 } from './components/borderBox4/index'
@@ -17,6 +20,7 @@ export { default as charts } from './components/charts/index'
 export { default as conicalColumnChart } from './components/conicalColumnChart/index'
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
+export { default as decoration11 } from './components/decoration11/index'
 export { default as decoration2 } from './components/decoration2/index'
 export { default as decoration3 } from './components/decoration3/index'
 export { default as decoration4 } from './components/decoration4/index'
@@ -27,6 +31,7 @@ export { default as decoration8 } from './components/decoration8/index'
 export { default as decoration9 } from './components/decoration9/index'
 export { default as digitalFlop } from './components/digitalFlop/index'
 export { default as flylineChart } from './components/flylineChart/index'
+export { default as flylineChartEnhanced } from './components/flylineChartEnhanced/index'
 export { default as fullScreenContainer } from './components/fullScreenContainer/index'
 export { default as loading } from './components/loading/index'
 export { default as percentPond } from './components/percentPond/index'
@@ -50,6 +55,9 @@ import borderBox7 from './components/borderBox7/index'
 import borderBox8 from './components/borderBox8/index'
 import borderBox9 from './components/borderBox9/index'
 import borderBox10 from './components/borderBox10/index'
+import borderBox11 from './components/borderBox11/index'
+import borderBox12 from './components/borderBox12/index'
+import borderBox13 from './components/borderBox13/index'
 
 // decoration
 import decoration1 from './components/decoration1/index'
@@ -62,6 +70,7 @@ import decoration7 from './components/decoration7/index'
 import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
+import decoration11 from './components/decoration11/index'
 
 // charts
 import charts from './components/charts/index'
@@ -71,6 +80,7 @@ import capsuleChart from './components/capsuleChart'
 import waterLevelPond from './components/waterLevelPond/index'
 import percentPond from './components/percentPond/index'
 import flylineChart from './components/flylineChart'
+import flylineChartEnhanced from './components/flylineChartEnhanced'
 import conicalColumnChart from './components/conicalColumnChart'
 import digitalFlop from './components/digitalFlop'
 import scrollBoard from './components/scrollBoard/index'
@@ -94,6 +104,9 @@ export default function (Vue) {
   Vue.use(borderBox8)
   Vue.use(borderBox9)
   Vue.use(borderBox10)
+  Vue.use(borderBox11)
+  Vue.use(borderBox12)
+  Vue.use(borderBox13)
 
   // decoration
   Vue.use(decoration1)
@@ -106,6 +119,7 @@ export default function (Vue) {
   Vue.use(decoration8)
   Vue.use(decoration9)
   Vue.use(decoration10)
+  Vue.use(decoration11)
 
   // charts
   Vue.use(charts)
@@ -115,6 +129,7 @@ export default function (Vue) {
   Vue.use(waterLevelPond)
   Vue.use(percentPond)
   Vue.use(flylineChart)
+  Vue.use(flylineChartEnhanced)
   Vue.use(conicalColumnChart)
   Vue.use(digitalFlop)
   Vue.use(scrollBoard)

lib/util/index.js

@@ -37,3 +37,11 @@ export function getPointDistance (pointOne, pointTwo) {
 
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function uuid (hasHyphen) {
+  return (hasHyphen ? 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx' : 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx').replace(/[xy]/g, function (c) {
+		const r = Math.random() * 16 | 0
+		const v = c == 'x' ? r : (r & 0x3 | 0x8)
+		return v.toString(16)
+  })
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.4.7",
+  "version": "2.9.9",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",

src/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -78,6 +78,11 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
+        /**
+         * @description Digital flop toFixed
+         * @type {Number}
+         */
+        digitalFlopToFixed: 0,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -89,7 +94,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -102,33 +113,47 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseInt(value[activeIndex] / sum * 100) || 0
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
-        style: digitalFlopStyle
+        content: showOriginValue ? '{nt}' : '{nt}%',
+        number: [displayValue],
+        style: digitalFlopStyle,
+        toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -137,7 +162,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -150,7 +175,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -159,17 +184,20 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -178,7 +206,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -200,7 +228,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -211,14 +239,15 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -251,12 +280,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

src/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -8,36 +19,36 @@
       :class="`${item} border`"
     >
       <polygon
-        fill="#4fd2dd"
+        :fill="mergedColor[0]"
         points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;#4fd2dd"
+          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#235fa7"
+        :fill="mergedColor[1]"
         points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
       >
         <animate
           attributeName="fill"
-          values="#235fa7;#4fd2dd;#235fa7"
+          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#4fd2dd"
+        :fill="mergedColor[0]"
         points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
       >
         <animate
           attributeName="fill"
-          values="#4fd2dd;#235fa7;transparent"
+          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -52,12 +63,54 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox1',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      ref: 'border-box-1',
+
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+
+      defaultColor: ['#4fd2dd', '#235fa7'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

src/components/borderBox10/src/main.vue

@@ -1,14 +1,21 @@
 <template>
-  <div class="dv-border-box-10">
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
       :key="item"
       v-for="item in border"
-      :class="`${item} border`"
+      :class="`${item} dv-border-svg-container`"
     >
       <polygon
-        fill="#d3e1f8"
+        :fill="mergedColor[1]"
         points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
       />
     </svg>
@@ -20,12 +27,54 @@
 </template>
 
 <script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox10',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      ref: 'border-box-10',
+
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],
+
+      defaultColor: ['#1d48c4', '#d3e1f8'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -35,10 +84,9 @@ export default {
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 25px 3px #1d48c4;
   border-radius: 6px;
 
-  .border {
+  .dv-border-svg-container {
     position: absolute;
     display: block;
   }

src/components/borderBox11/index.js

@@ -0,0 +1,5 @@
+import BorderBox11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox11.name, BorderBox11)
+}

src/components/borderBox11/src/main.vue

@@ -0,0 +1,307 @@
+<template>
+  <div class="dv-border-box-11" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `"
+      />
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <text
+        class="dv-border-box-11-title"
+        :x="`${width / 2}`"
+        y="32"
+        fill="#fff"
+        font-size="18"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        {{ title }}
+      </text>
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `"
+      />
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    titleWidth: {
+      type: Number,
+      default: 250
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${id}`,
+
+      defaultColor: ['#8aaafb', '#1f33a2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+
+    & > polyline {
+      fill: none;
+      stroke-width: 1;
+    }
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/borderBox12/index.js

@@ -0,0 +1,5 @@
+import BorderBox12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox12.name, BorderBox12)
+}

src/components/borderBox12/src/main.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="dv-border-box-12" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
+          <feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
+            <animate
+              attributeName="flood-color"
+              :values="`
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+                ${fade(mergedColor[1] || defaultColor[1], 30)};
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+              `"
+              dur="3s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </feFlood>
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        v-if="width && height"
+        :fill="backgroundColor"
+        stroke-width="2"
+        :stroke="mergedColor[0]"
+        :d="`
+          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
+          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
+          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
+          Q 5 5 15 5
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
+          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
+          L ${width - 5} ${height - 20}
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M 20 ${height - 5} L 15 ${height - 5}
+          Q 5 ${height - 5} 5 ${height - 15}
+          L 5 ${height - 20}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'border-box-12',
+      filterId: `borderr-box-12-filterId-${id}`,
+
+      defaultColor: ['#2e6099', '#7ce7fd'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/borderBox13/index.js

@@ -0,0 +1,5 @@
+import BorderBox13 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox13.name, BorderBox13)
+}

src/components/borderBox13/src/main.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="dv-border-box-13" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <path
+        :fill="backgroundColor"
+        :stroke="mergedColor[0]"
+        :d="`
+          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+          L ${width - 20} 10 L ${width - 5} 25
+          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L 5 ${height - 20} L 5 20
+        `"
+      />
+
+      <path
+        fill="transparent"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-dasharray="10, 5"
+        :stroke="mergedColor[0]"
+        :d="`M 16 9 L 61 9`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox13',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-13',
+
+      defaultColor: ['#6586ec', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
+
+<style lang="less">
+.dv-border-box-13 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/borderBox2/src/main.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
-      <polyline class="dv-bb2-line1"
-        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
-      <polyline class="dv-bb2-line2"
-        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
-      <circle cx="11" cy="11" r="1" />
-      <circle :cx="width - 11" cy="11" r="1" />
-      <circle :cx="width - 11" :cy="height - 11" r="1" />
-      <circle cx="11" :cy="height - 11" r="1" />
+      <polygon :fill="backgroundColor" :points="`
+        7, 7 ${width - 7}, 7 ${width - 7}, ${height - 7} 7, ${height - 7}
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
+      />
+      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
+      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
     </svg>
 
     <div class="border-box-content">
@@ -20,13 +28,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox2',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-2'
+      ref: 'border-box-2',
+
+      defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -44,22 +89,10 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
     }
-
-    circle {
-      fill: #fff;
-    }
-  }
-
-  .dv-bb2-line1 {
-    stroke: #fff;
-  }
-
-  .dv-bb2-line2 {
-    stroke: fade(#fff, 60);
   }
 
   .border-box-content {

src/components/borderBox3/src/main.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="dv-border-box-3" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        23, 23 ${width - 24}, 23 ${width - 24}, ${height - 24} 23, ${height - 24}
+      `" />
+
       <polyline class="dv-bb3-line1"
-        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+        :stroke="mergedColor[0]"
+        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
+        :stroke="mergedColor[1]"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
+        :stroke="mergedColor[1]"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
+      />
       <polyline class="dv-bb3-line2"
-        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
+        :stroke="mergedColor[1]"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
+      />
     </svg>
 
     <div class="border-box-content">
@@ -20,13 +32,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox3',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-3'
+      ref: 'border-box-3',
+
+      defaultColor: ['#2862b7', '#2862b7'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -44,9 +93,8 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
-      stroke: #2862b7;
     }
   }
 

src/components/borderBox4/src/main.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
     <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
-        10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
-      <polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
-        14, ${height - 100}`" />
-      <polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
-      <polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
-      <polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
-      <polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
-      <polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
-      <polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
-      <polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
-      <polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
+      <polygon :fill="backgroundColor" :points="`
+        ${width - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+        16, 42 16, ${height - 32} 41, ${height - 7} ${width - 15}, ${height - 7}
+      `" />
+
+      <polyline class="dv-bb4-line-1"
+        :stroke="mergedColor[0]"
+        :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
+          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
+          14, ${height - 100}`"
+      />
+
+      <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
+      <polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
+      <polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
+      <polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
+      <polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
+      <polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
+      <polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
+      <polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
     </svg>
 
     <div class="border-box-content">
@@ -24,19 +36,54 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox4',
   mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-4'
-    }
-  },
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
+  },
+  data () {
+    return {
+      ref: 'border-box-4',
+
+      defaultColor: ['red', 'rgba(0,0,255,0.8)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -58,19 +105,11 @@ export default {
     top: 0px;
     left: 0px;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }
 
-  .sred {
-    stroke: red;
-  }
-
-  .sblue {
-    stroke: fade(blue, 80);
-  }
-
   .sw1 {
     stroke-width: 1;
   }
@@ -81,53 +120,43 @@ export default {
   }
 
   .dv-bb4-line-1 {
-    .sred;
     .sw1;
   }
 
   .dv-bb4-line-2 {
-    .sblue;
     .sw1;
   }
 
   .dv-bb4-line-3 {
-    .sred;
     .sw3;
   }
 
   .dv-bb4-line-4 {
-    .sred;
     .sw3;
   }
 
   .dv-bb4-line-5 {
-    .sred;
     .sw1;
   }
 
   .dv-bb4-line-6 {
-    .sblue;
     .sw1;
   }
 
   .dv-bb4-line-7 {
-    .sblue;
     .sw1;
   }
 
   .dv-bb4-line-8 {
-    .sblue;
     .sw3;
   }
 
   .dv-bb4-line-9 {
-    .sred;
     .sw3;
     stroke-dasharray: 100 250;
   }
 
   .dv-bb4-line-10 {
-    .sblue;
     .sw1;
     stroke-dasharray: 80 270;
   }

src/components/borderBox5/src/main.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
-        ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
-      <polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
-        ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
-      <polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
-      <polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
-      <polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
-      <polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
+    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
+      <polyline
+        class="dv-bb5-line-1"
+        :stroke="mergedColor[0]"
+        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
+          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
+      />
+      <polyline
+        class="dv-bb5-line-2"
+        :stroke="mergedColor[1]"
+        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
+          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
+      />
+      <polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
+      <polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
+      <polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
+      <polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
     </svg>
 
     <div class="border-box-content">
@@ -20,19 +32,54 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox5',
   mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-5'
-    }
-  },
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
     }
+  },
+  data () {
+    return {
+      ref: 'border-box-5',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -47,35 +94,28 @@ export default {
     transform: rotate(180deg);
   }
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
     }
   }
 
-  .dv-bb5-line-1 {
+  .dv-bb5-line-1, .dv-bb5-line-2 {
     stroke-width: 1;
-    stroke: fade(#fff, 35);
-  }
-
-  .dv-bb5-line-2 {
-    stroke: fade(#fff, 20);
   }
 
   .dv-bb5-line-3, .dv-bb5-line-6 {
     stroke-width: 5;
-    stroke: fade(#fff, 15);
   }
 
   .dv-bb5-line-4, .dv-bb5-line-5 {
     stroke-width: 2;
-    stroke: fade(#fff, 15);
   }
 
   .border-box-content {

src/components/borderBox6/src/main.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
-      <circle cx="5" cy="5" r="2"/>
-      <circle :cx="width - 5" cy="5" r="2" />
-      <circle :cx="width - 5" :cy="height - 5" r="2" />
-      <circle cx="5" :cy="height - 5" r="2" />
-      <polyline :points="`10, 4 ${width - 10}, 4`" />
-      <polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
-      <polyline :points="`5, 70 5, ${height - 70}`" />
-      <polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
-      <polyline :points="`3, 10, 3, 50`" />
-      <polyline :points="`7, 30 7, 80`" />
-      <polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
-      <polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
-      <polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
-      <polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
-      <polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
-      <polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
+      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
+      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
+      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
+      <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
+      <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
+      <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
+      <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
     </svg>
 
     <div class="border-box-content">
@@ -28,13 +32,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize.js'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox6',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-6'
+      ref: 'border-box-6',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -45,21 +86,16 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    circle {
-      fill: gray;
-    }
-
-    polyline {
+    & > polyline {
       fill: none;
       stroke-width: 1;
-      stroke: fade(#fff, 35);
     }
   }
 

src/components/borderBox7/src/main.vue

@@ -1,15 +1,20 @@
-<template>
-  <div class="dv-border-box-7" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
-      <polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
-      <polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
 
-      <polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
-      <polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
+<template>
+  <div
+    class="dv-border-box-7"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
+    :ref="ref"
+  >
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
+
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
     </svg>
 
     <div class="border-box-content">
@@ -21,47 +26,78 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvBorderBox7',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
     return {
-      ref: 'border-box-7'
+      ref: 'border-box-7',
+
+      defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
 
 <style lang="less">
 .dv-border-box-7 {
-  @color: fade(gray, 30);
-
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 40px fade(@color, 30);
-  border: 1px solid @color;
 
-  .dv-svg-container {
+  .dv-border-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    polyline {
+    & > polyline {
       fill: none;
       stroke-linecap: round;
     }
   }
 
   .dv-bb7-line-width-2 {
-    stroke: @color;
     stroke-width: 2;
   }
 
   .dv-bb7-line-width-5 {
-    stroke: fade(gray, 50);
     stroke-width: 5;
   }
 

src/components/borderBox8/src/main.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -24,8 +24,8 @@
         <mask :id="mask">
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
-              dur="3s"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :dur="`${dur}s`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -33,14 +33,16 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
       <use
-        stroke="#235fa7"
+        :stroke="mergedColor[0]"
         stroke-width="1"
         :xlink:href="`#${path}`"
       />
 
       <use
-        stroke="#4fd2dd"
+        :stroke="mergedColor[1]"
         stroke-width="3"
         :xlink:href="`#${path}`"
         :mask="`url(#${mask})`"
@@ -49,7 +51,7 @@
           attributeName="stroke-dasharray"
           :from="`0, ${length}`"
           :to="`${length}, 0`"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -63,17 +65,44 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`,
+
+      defaultColor: ['#235fa7', '#4fd2dd'],
+
+      mergedColor: []
     }
   },
   computed: {
@@ -81,7 +110,33 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -92,7 +147,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/borderBox9/src/main.vue

@@ -1,10 +1,42 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#11eefd" />
-          <stop offset="100%" stop-color="#0078d2" />
+          <animate
+            attributeName="x1"
+            values="0%;100%;0%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <animate
+            attributeName="x2"
+            values="100%;0%;100%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <stop offset="0%" :stop-color="mergedColor[0]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" :stop-color="mergedColor[1]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
         </linearGradient>
 
         <mask :id="maskId">
@@ -73,6 +105,15 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
       <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
     </svg>
 
@@ -84,18 +125,56 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`,
+
+      defaultColor: ['#11eefd', '#0078d2'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -106,7 +185,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  svg {
+  .dv-border-svg-container {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/capsuleChart/src/main.vue

@@ -7,16 +7,23 @@
       </div>
 
       <div class="capsule-container">
-        <div
-          class="capsule-item"
-          v-for="(capsule, index) in capsuleLength"
-          :key="index"
-        >
-          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            class="capsule-item-column"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <div
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}</div>
+          </div>
         </div>
 
         <div class="unit-label">
-          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}</div>
         </div>
       </div>
 
@@ -38,7 +45,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -54,42 +61,61 @@ export default {
          * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
          * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
          */
-        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
         /**
          * @description Chart unit
          * @type {String}
          * @default unit = ''
          */
-        unit: ''
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
       },
 
       mergedConfig: null,
 
       capsuleLength: [],
-      labelData: []
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
     }
   },
   watch: {
-    config () {
+    config() {
       const { calcData } = this
 
       calcData()
     }
   },
   methods: {
-    calcData () {
+    calcData() {
       const { mergeConfig, calcCapsuleLengthAndLabelData } = this
 
       mergeConfig()
 
       calcCapsuleLengthAndLabelData()
     },
-    mergeConfig () {
+    mergeConfig() {
       let { config, defaultConfig } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    calcCapsuleLengthAndLabelData () {
+    calcCapsuleLengthAndLabelData() {
       const { data } = this.mergedConfig
 
       if (!data.length) return
@@ -98,14 +124,24 @@ export default {
 
       const maxValue = Math.max(...capsuleValue)
 
-      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
 
       const oneFifth = maxValue / 5
 
-      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
     }
   },
-  mounted () {
+  mounted() {
     const { calcData } = this
 
     calcData()
@@ -150,21 +186,30 @@ export default {
     margin: 5px 0px;
     border-radius: 5px;
 
-    div {
+    .capsule-item-column {
+      position: relative;
       height: 8px;
       margin-top: 1px;
       border-radius: 5px;
       transition: all 0.3s;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+
+      .capsule-item-value {
+        font-size: 12px;
+        transform: translateX(100%);
+      }
     }
   }
 
   .unit-label {
     height: 20px;
     font-size: 12px;
+    position: relative;
     display: flex;
-    flex-direction: row;
-    align-items: center;
     justify-content: space-between;
+    align-items: center;
   }
 
   .unit-text {

src/components/charts/src/main.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
@@ -19,10 +21,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
-      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${timestamp}`,
+      ref: `charts-container-${id}`,
+      chartRef: `chart-${id}`,
 
       chart: null
     }

src/components/decoration1/src/main.vue

@@ -8,7 +8,7 @@
         <rect
           v-if="Math.random() > 0.6"
           :key="i"
-          fill="#fff"
+          :fill="mergedColor[0]"
           :x="point[0] - halfPointSideLength"
           :y="point[1] - halfPointSideLength"
           :width="pointSideLength"
@@ -17,7 +17,7 @@
           <animate
             v-if="Math.random() > 0.6"
             attributeName="fill"
-            values="#fff;transparent"
+            :values="`${mergedColor[0]};transparent`"
             dur="1s"
             :begin="Math.random() * 2"
             repeatCount="indefinite"
@@ -27,7 +27,7 @@
 
       <rect
         v-if="rects[0]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[0][0] - pointSideLength"
         :y="rects[0][1] - pointSideLength"
         :width="pointSideLength * 2"
@@ -61,7 +61,7 @@
 
       <rect
         v-if="rects[1]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[1][0] - 40"
         :y="rects[1][1] - pointSideLength"
         :width="40"
@@ -87,9 +87,19 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration1',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const pointSideLength = 2.5
 
@@ -108,7 +118,18 @@ export default {
 
       points: [],
 
-      rects: []
+      rects: [],
+
+      defaultColor: ['#fff', '#0de7c2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -160,7 +181,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>

src/components/decoration10/src/main.vue

@@ -2,13 +2,13 @@
   <div class="dv-decoration-10" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="rgba(0, 194, 255, 0.3)"
+        :stroke="mergedColor[1]"
         stroke-width="2"
         :points="`0, ${height / 2} ${width}, ${height / 2}`"
       />
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -32,7 +32,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.6}`"
@@ -55,7 +55,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -77,65 +77,65 @@
         />
       </polyline>
 
-      <circle cx="2" :cy="height / 2" r="2" fill="#03709f">
+      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId1"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`0s;${animationId7}.end`"
           dur="0.3s"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId3"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId2}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId5"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId4}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId7"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId6}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
@@ -147,23 +147,57 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${timestamp}`
+      animationId1: `d10ani1${id}`,
+      animationId2: `d10ani2${id}`,
+      animationId3: `d10ani3${id}`,
+      animationId4: `d10ani4${id}`,
+      animationId5: `d10ani5${id}`,
+      animationId6: `d10ani6${id}`,
+      animationId7: `d10ani7${id}`,
+
+      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

src/components/decoration11/index.js

@@ -0,0 +1,5 @@
+import Decoration11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration11.name, Decoration11)
+}

src/components/decoration11/src/main.vue

@@ -0,0 +1,124 @@
+<template>
+  <div class="dv-decoration-11" :ref="ref">
+    <svg :width="width" :height="height">
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 10, 25 4, 55 4 60 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
+        :stroke="mergedColor[0]"
+        :points="`
+          20 10, 5 ${height / 2} 20 ${height - 10}
+          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
+        `"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
+      />
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      ref: 'decoration-11',
+
+      defaultColor: ['#1a98fc', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
+
+<style lang="less">
+.dv-decoration-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  .decoration-content {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

src/components/decoration2/src/main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dv-decoration-2" :ref="ref">
     <svg :width="`${width}px`" :height="`${height}px`">
-      <rect :x="x" :y="y" :width="w" :height="h" fill="#3faacb">
+      <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
         <animate
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
@@ -14,7 +14,7 @@
         />
       </rect>
 
-      <rect :x="x" :y="y" width="1" height="1" fill="#fff">
+      <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
         <animate
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
@@ -33,10 +33,18 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration2',
   mixins: [autoResize],
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
@@ -50,10 +58,19 @@ export default {
       y: 0,
 
       w: 0,
-      h: 0
+      h: 0,
+
+      defaultColor: ['#3faacb', '#fff'],
+
+      mergedColor: []
     }
   },
   watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    },
     reverse () {
       const { calcSVGData } = this
 
@@ -85,7 +102,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>

src/components/decoration3/src/main.vue

@@ -7,7 +7,7 @@
       >
         <rect
           :key="i"
-          fill="#7acaec"
+          :fill="mergedColor[0]"
           :x="point[0] - halfPointSideLength"
           :y="point[1] - halfPointSideLength"
           :width="pointSideLength"
@@ -16,7 +16,7 @@
           <animate
             v-if="Math.random() > 0.6"
             attributeName="fill"
-            values="#7acaec;transparent"
+            :values="`${mergedColor.join(';')}`"
             :dur="Math.random() + 1 + 's'"
             :begin="Math.random() * 2"
             repeatCount="indefinite"
@@ -30,9 +30,19 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration3',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const pointSideLength = 7
 
@@ -49,7 +59,18 @@ export default {
       pointSideLength,
       halfPointSideLength: pointSideLength / 2,
 
-      points: []
+      points: [],
+
+      defaultColor: ['#7acaec', 'transparent'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -91,7 +112,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>

src/components/decoration4/src/main.vue

@@ -6,12 +6,12 @@
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[0]"
           :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
         />
         <polyline
           class="bold-line"
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[1]"
           stroke-width="3"
           stroke-dasharray="20, 80"
           stroke-dashoffset="-30"
@@ -25,14 +25,50 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration4',
   mixins: [autoResize],
-  props: ['reverse'],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
   data () {
     return {
-      ref: 'decoration-4'
+      ref: 'decoration-4',
+
+      defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 255, 0.3)'],
+
+      mergedColor: []
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>
@@ -47,23 +83,26 @@ export default {
     display: flex;
     overflow: hidden;
     position: absolute;
+    flex: 1;
   }
 
   .normal {
-    height: 0% !important;
     animation: ani-height 3s ease-in-out infinite;
     left: 50%;
     margin-left: -2px;
   }
 
   .reverse {
-    width: 0% !important;
     animation: ani-width 3s ease-in-out infinite;
     top: 50%;
     margin-top: -2px;
   }
 
   @keyframes ani-height {
+    0% {
+      height: 0%;
+    }
+
     70% {
       height: 100%;
     }
@@ -74,6 +113,10 @@ export default {
   }
 
   @keyframes ani-width {
+    0% {
+      width: 0%;
+    }
+    
     70% {
       width: 100%;
     }

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>

src/components/decoration6/src/main.vue

@@ -6,7 +6,7 @@
       >
         <rect
           :key="i"
-          fill="#7acaec"
+          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
           :x="point[0] - halfRectWidth"
           :y="point[1] - heights[i] / 2"
           :width="rectWidth"
@@ -43,9 +43,19 @@ import autoResize from '../../../mixin/autoResize'
 
 import { randomExtend } from '../../../util'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration6',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
   data () {
     const rectWidth = 7
 
@@ -65,7 +75,18 @@ export default {
       points: [],
       heights: [],
       minHeights: [],
-      randoms: []
+      randoms: [],
+
+      defaultColor: ['#7acaec', '#7acaec'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -116,7 +137,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>

src/components/decoration7/src/main.vue

@@ -4,13 +4,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="10, 0 19, 10 10, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="2, 0 11, 10 2, 20"
       />
     </svg>
@@ -19,13 +19,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="11, 0 2, 10 11, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="19, 0 10, 10 19, 20"
       />
     </svg>
@@ -33,8 +33,44 @@
 </template>
 
 <script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
-  name: 'DvDecoration7'
+  name: 'DvDecoration7',
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultColor: ['#1dc1f5', '#1dc1f5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
 }
 </script>
 

src/components/decoration8/src/main.vue

@@ -2,21 +2,21 @@
   <div class="dv-decoration-8" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[1]"
         fill="transparent"
         stroke-width="3"
         :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
@@ -28,10 +28,18 @@
 <script>
 import autoResize from '../../../mixin/autoResize'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration8',
   mixins: [autoResize],
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
@@ -39,7 +47,18 @@ export default {
   },
   data () {
     return {
-      ref: 'decoration-8'
+      ref: 'decoration-8',
+
+      defaultColor: ['#3f96a5', '#3f96a5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -49,7 +68,17 @@ export default {
       if (!reverse) return pos
 
       return width - pos
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

src/components/decoration9/src/main.vue

@@ -10,7 +10,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.5)"
+        :stroke="mergedColor[1]"
         stroke-width="10"
         stroke-dasharray="80, 100, 30, 100"
       >
@@ -18,7 +18,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -28,7 +28,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.8)"
+        :stroke="mergedColor[0]"
         stroke-width="6"
         stroke-dasharray="50, 66, 100, 66"
       >
@@ -36,7 +36,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;-360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -46,7 +46,7 @@
         cy="50"
         r="38"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -55,15 +55,15 @@
         v-for="(foo, i) in new Array(20).fill(0)"
         :key="i"
         :xlink:href="`#${polygonId}`"
-        stroke="rgba(3, 166, 224, 0.6)"
-        :fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
+        :stroke="mergedColor[1]"
+        :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
       >
         <animateTransform
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
-          :begin="`${i * 0.15}s`"
+          :dur="`${dur}s`"
+          :begin="`${i * dur / 20}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -73,7 +73,7 @@
         cy="50"
         r="26"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -85,20 +85,48 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
 
 export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    }
+  },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${id}`,
 
       svgWH: [100, 100],
 
-      svgScale: [1, 1]
+      svgScale: [1, 1],
+
+      defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -118,7 +146,18 @@ export default {
       const { calcScale } = this
 
       calcScale()
-    }
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

src/components/digitalFlop/src/main.vue

@@ -53,6 +53,12 @@ export default {
          * @example textAlign = 'center' | 'left' | 'right'
          */
         textAlign: 'center',
+        /**
+         * @description rowGap
+         * @type {Number}
+         @default rowGap = 0
+         */
+        rowGap: 0,
         /**
          * @description Text style configuration
          * @type {Object} {CRender Class Style}
@@ -61,6 +67,11 @@ export default {
           fontSize: 30,
           fill: '#3de7c9'
         },
+        /**
+         * @description Number formatter
+         * @type {Null|Function}
+         */
+        formatter: undefined,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -124,7 +135,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -137,7 +148,9 @@ export default {
         number,
         content,
         toFixed,
-        position
+        position,
+        rowGap,
+        formatter
       }
     },
     getStyle () {
@@ -151,6 +164,8 @@ export default {
     update () {
       const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
 
+      graph.animationEnd()
+
       mergeConfig()
 
       if (!graph) return
@@ -165,8 +180,6 @@ export default {
       graph.animationCurve = animationCurve
       graph.animationFrame = animationFrame
 
-      graph.animationEnd()
-
       graph.animation('style', style, true)
       graph.animation('shape', shape)
     },

src/components/flylineChart/src/main.vue

@@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
@@ -171,14 +171,14 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      maskId: `flyline-mask-id-${id}`,
+      maskCircleId: `mask-circle-id-${id}`,
+      gradientId: `gradient-id-${id}`,
+      gradient2Id: `gradient2-id-${id}`,
 
       defaultConfig: {
         /**

src/components/flylineChartEnhanced/index.js

@@ -0,0 +1,5 @@
+import FlylineChartEnhanced from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
+}

src/components/flylineChartEnhanced/src/main.vue

@@ -0,0 +1,579 @@
+<template>
+  <div
+    class="dv-flyline-chart-enhanced"
+    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgSrc : ''})`"
+    :ref="ref"
+    @click="consoleClickPos"
+  >
+    <svg v-if="flylines.length" :width="width" :height="height">
+      <defs>
+        <radialGradient
+          :id="flylineGradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop
+            offset="0%" stop-color="#fff"
+            stop-opacity="1"
+          />
+          <stop
+            offset="100%" stop-color="#fff"
+            stop-opacity="0"
+          />
+        </radialGradient>
+
+        <radialGradient
+          :id="haloGradientId"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop
+            offset="0%" stop-color="#fff"
+            stop-opacity="0"
+          />
+          <stop
+            offset="100%" stop-color="#fff"
+            stop-opacity="1"
+          />
+        </radialGradient>
+      </defs>
+
+      <!-- points -->
+      <g v-for="point in flylinePoints" :key="point.key + Math.random()">
+        <defs>
+          <circle
+            v-if="point.halo.show"
+            :id="`halo${unique}${point.key}`"
+            :cx="point.coordinate[0]"
+            :cy="point.coordinate[1]"
+          >
+            <animate
+              attributeName="r"
+              :values="`1;${point.halo.radius}`"
+              :dur="`${point.halo.time}s`"
+              repeatCount="indefinite"
+            />
+            <animate
+              attributeName="opacity"
+              values="1;0"
+              :dur="`${point.halo.time}s`"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </defs>
+
+        <!-- halo gradient mask -->
+        <mask :id="`mask${unique}${point.key}`">
+          <use
+            v-if="point.halo.show"
+            :xlink:href="`#halo${unique}${point.key}`"
+            :fill="`url(#${haloGradientId})`"
+          />
+        </mask>
+
+        <!-- point halo -->
+        <use
+          v-if="point.halo.show"
+          :xlink:href="`#halo${unique}${point.key}`"
+          :fill="point.halo.color"
+          :mask="`url(#mask${unique}${point.key})`"
+        />
+
+        <!-- point icon -->
+        <image
+          v-if="point.icon.show"
+          :xlink:href="point.icon.src"
+          :width="point.icon.width"
+          :height="point.icon.height"
+          :x="point.icon.x"
+          :y="point.icon.y"
+        />
+
+        <!-- point text -->
+        <text
+          v-if="point.text.show"
+          :style="`fontSize:${point.text.fontSize}px;color:${point.text.color}`"
+          :fill="point.text.color"
+          :x="point.text.x"
+          :y="point.text.y"
+        >
+          {{ point.name }}
+        </text>
+      </g>
+
+      <!-- flylines -->
+      <g v-for="(line, i) in flylines" :key="line.key + Math.random()">
+        <defs>
+          <path
+            :id="line.key"
+            :ref="line.key"
+            :d="line.d"
+            fill="transparent"
+          />
+        </defs>
+
+        <!-- orbit line -->
+        <use
+          :xlink:href="`#${line.key}`"
+          :stroke-width="line.width"
+          :stroke="line.orbitColor"
+        />
+
+        <!-- fly line gradient mask -->
+        <mask :id="`mask${unique}${line.key}`">
+          <circle cx="0" cy="0" :r="line.radius" :fill="`url(#${flylineGradientId})`">
+            <animateMotion
+              :dur="line.time"
+              :path="line.d"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+
+        <!-- fly line -->
+        <use
+          v-if="flylineLengths[i]"
+          :xlink:href="`#${line.key}`"
+          :stroke-width="line.width"
+          :stroke="line.color"
+          :mask="`url(#mask${unique}${line.key})`"
+        >
+          <animate
+            attributeName="stroke-dasharray"
+            :from="`0, ${flylineLengths[i]}`"
+            :to="`${flylineLengths[i]}, 0`"
+            :dur="line.time"
+            repeatCount="indefinite"
+          />
+        </use>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'
+
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvFlylineChartEnhanced',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    dev: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const id = uuid()
+    return {
+      ref: 'dv-flyline-chart-enhanced',
+      unique: Math.random(),
+      flylineGradientId: `flyline-gradient-id-${id}`,
+      haloGradientId: `halo-gradient-id-${id}`,
+      /**
+       * @description Type Declaration
+       * 
+       * interface Halo {
+       *    show?: boolean
+       *    duration?: [number, number]
+       *    color?: string
+       *    radius?: number
+       * }
+       * 
+       * interface Text {
+       *    show?: boolean
+       *    offset?: [number, number]
+       *    color?: string
+       *    fontSize?: number
+       * }
+       * 
+       * interface Icon {
+       *    show?: boolean
+       *    src?: string
+       *    width?: number
+       *    height?: number
+       * }
+       * 
+       * interface Point {
+       *    name: string
+       *    coordinate: [number, number]
+       *    halo?: Halo
+       *    text?: Text
+       *    icon?: Icon
+       * }
+       * 
+       * interface Line {
+       *    width?: number
+       *    color?: string
+       *    orbitColor?: string
+       *    duration?: [number, number]
+       *    radius?: string
+       * }
+       * 
+       * interface Flyline extends Line {
+       *    source: string
+       *    target: string
+       * }
+       * 
+       * interface FlylineWithPath extends Flyline {
+       *    d: string
+       *    path: [[number, number], [number, number], [number, number]]
+       *    key: string
+       * }
+       */
+      defaultConfig: {
+        /**
+         * @description Flyline chart points
+         * @type {Point[]}
+         * @default points = []
+         */
+        points: [],
+        /**
+         * @description Lines
+         * @type {Flyline[]}
+         * @default lines = []
+         */
+        lines: [],
+        /**
+         * @description Global halo configuration
+         * @type {Halo}
+         */
+        halo: {
+          /**
+           * @description Whether to show halo
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Halo animation duration (1s = 10)
+           * @type {[number, number]}
+           */
+          duration: [20, 30],
+          /**
+           * @description Halo color
+           * @type {String}
+           * @default color = '#fb7293'
+           */
+          color: '#fb7293',
+          /**
+           * @description Halo radius
+           * @type {Number}
+           * @default radius = 120
+           */
+          radius: 120
+        },
+        /**
+         * @description Global text configuration
+         * @type {Text}
+         */
+        text: {
+          /**
+           * @description Whether to show text
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Text offset
+           * @type {[number, number]}
+           * @default offset = [0, 15]
+           */
+          offset: [0, 15],
+          /**
+           * @description Text color
+           * @type {String}
+           * @default color = '#ffdb5c'
+           */
+          color: '#ffdb5c',
+          /**
+           * @description Text font size
+           * @type {Number}
+           * @default fontSize = 12
+           */
+          fontSize: 12
+        },
+        /**
+         * @description Global icon configuration
+         * @type {Icon}
+         */
+        icon: {
+          /**
+           * @description Whether to show icon
+           * @type {Boolean}
+           * @default show = false
+           */
+          show: false,
+          /**
+           * @description Icon src
+           * @type {String}
+           * @default src = ''
+           */
+          src: '',
+          /**
+           * @description Icon width
+           * @type {Number}
+           * @default width = 15
+           */
+          width: 15,
+          /**
+           * @description Icon height
+           * @type {Number}
+           * @default width = 15
+           */
+          height: 15
+        },
+        /**
+         * @description Global line configuration
+         * @type {Line}
+         */
+        line: {
+          /**
+           * @description Line width
+           * @type {Number}
+           * @default width = 1
+           */
+          width: 1,
+          /**
+           * @description Flyline color
+           * @type {String}
+           * @default color = '#ffde93'
+           */
+          color: '#ffde93',
+          /**
+           * @description Orbit color
+           * @type {String}
+           * @default orbitColor = 'rgba(103, 224, 227, .2)'
+           */
+          orbitColor: 'rgba(103, 224, 227, .2)',
+          /**
+           * @description Flyline animation duration
+           * @type {[number, number]}
+           * @default duration = [20, 30]
+           */
+          duration: [20, 30],
+          /**
+           * @description Flyline radius
+           * @type {Number}
+           * @default radius = 100
+           */
+          radius: 100
+        },
+        /**
+         * @description Back ground image url
+         * @type {String}
+         * @default bgImgSrc = ''
+         */
+        bgImgSrc: '',
+        /**
+         * @description K value
+         * @type {Number}
+         * @default k = -0.5
+         * @example k = -1 ~ 1
+         */
+        k: -0.5,
+        /**
+         * @description Flyline curvature
+         * @type {Number}
+         * @default curvature = 5
+         */
+        curvature: 5,
+        /**
+         * @description Relative points position
+         * @type {Boolean}
+         * @default relative = true
+         */
+        relative: true
+      },
+      /**
+       * @description Fly line data
+       * @type {FlylineWithPath[]}
+       * @default flylines = []
+       */
+      flylines: [],
+      /**
+       * @description Fly line lengths
+       * @type {Number[]}
+       * @default flylineLengths = []
+       */
+      flylineLengths: [],
+      /**
+       * @description Fly line points
+       * @default flylinePoints = []
+       */
+      flylinePoints: [],
+
+      mergedConfig: null
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { calcData } = this
+
+      calcData()
+    },
+    async calcData () {
+      const { mergeConfig, calcflylinePoints, calcLinePaths } = this
+
+      mergeConfig()
+
+      calcflylinePoints()
+
+      calcLinePaths()
+
+      const { calcLineLengths } = this
+
+      await calcLineLengths()
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+
+      const { points, lines, halo, text, icon, line } = mergedConfig
+
+      mergedConfig.points = points.map(item => {
+        item.halo = deepMerge(deepClone(halo, true), item.halo || {})
+        item.text = deepMerge(deepClone(text, true), item.text || {})
+        item.icon = deepMerge(deepClone(icon, true), item.icon || {})
+
+        return item
+      })
+
+      mergedConfig.lines = lines.map(item => {
+        return deepMerge(deepClone(line, true), item)
+      })
+
+      this.mergedConfig = mergedConfig
+    },
+    calcflylinePoints () {
+      const { mergedConfig, width, height } = this
+
+      const { relative, points } = mergedConfig
+
+      this.flylinePoints = points.map((item, i) => {
+        const { coordinate: [x, y], halo, icon, text } = item
+
+        if (relative) item.coordinate = [x * width, y * height]
+
+        item.halo.time = randomExtend(...halo.duration) / 10
+
+        const { width: iw, height: ih } = icon
+        item.icon.x = item.coordinate[0] - iw / 2
+        item.icon.y = item.coordinate[1] - ih / 2
+
+        const [ox, oy] = text.offset
+        item.text.x = item.coordinate[0] + ox
+        item.text.y = item.coordinate[1] + oy
+
+        item.key = `${item.coordinate.toString()}${i}`
+
+        return item
+      })
+    },
+    calcLinePaths () {
+      const { getPath, mergedConfig } = this
+
+      const { points, lines } = mergedConfig
+
+      this.flylines = lines.map(item => {
+        const { source, target, duration } = item
+
+        const sourcePoint = points.find(({ name }) => name === source).coordinate
+        const targetPoint = points.find(({ name }) => name === target).coordinate
+
+        const path = getPath(sourcePoint, targetPoint).map(item => item.map(v => parseFloat(v.toFixed(10))))
+        const d = `M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`
+        const key = `path${path.toString()}`
+        const time = randomExtend(...duration) / 10
+
+        return { ...item, path, key, d, time }
+      })
+    },
+    getPath (start, end) {
+      const { getControlPoint } = this
+
+      const controlPoint = getControlPoint(start, end)
+
+      return [start, controlPoint, end]
+    },
+    getControlPoint ([sx, sy], [ex, ey]) {
+      const { getKLinePointByx, mergedConfig } = this
+
+      const { curvature, k } = mergedConfig
+
+      const [mx, my] = [(sx + ex) / 2, (sy + ey) / 2]
+
+      const distance = getPointDistance([sx, sy], [ex, ey])
+
+      const targetLength = distance / curvature
+      const disDived = targetLength / 2
+
+      let [dx, dy] = [mx, my]
+
+      do {
+        dx += disDived
+        dy = getKLinePointByx(k, [mx, my], dx)[1]
+      } while (getPointDistance([mx, my], [dx, dy]) < targetLength)
+
+      return [dx, dy]
+    },
+    getKLinePointByx (k, [lx, ly], x) {
+      const y = ly - k * lx + k * x
+
+      return [x, y]
+    },
+    async calcLineLengths () {
+      const { $nextTick, flylines, $refs } = this
+
+      await $nextTick()
+
+      this.flylineLengths = flylines.map(({ key }) => $refs[key][0].getTotalLength())
+    },
+    consoleClickPos ({ offsetX, offsetY }) {
+      const { width, height, dev } = this
+
+      if (!dev) return
+
+      const relativeX = (offsetX / width).toFixed(2)
+      const relativeY = (offsetY / height).toFixed(2)
+
+      console.warn(`dv-flyline-chart-enhanced DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.dv-flyline-chart-enhanced {
+  display: flex;
+  flex-direction: column;
+  background-size: 100% 100%;
+
+  text {
+    text-anchor: middle;
+    dominant-baseline: middle;
+  }
+}
+</style>

src/components/percentPond/src/main.vue

@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@@ -57,10 +59,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const id = uuid()
     return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
+      gradientId2: `percent-pond-gradientId2-${id}`,
 
       width: 0,
       height: 0,
@@ -234,10 +236,10 @@ export default {
 
       await $nextTick()
 
-      const dom = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond']
 
-      this.width = dom.clientWidth
-      this.height = dom.clientHeight
+      this.width = clientWidth
+      this.height = clientHeight
     },
     mergeConfig () {
       const { config, defaultConfig } = this

src/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,11 +33,13 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
-          @click="emitEvent(ri, ci, row, ceil)"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
         />
 
       </div>
@@ -134,13 +136,26 @@ export default {
          * @default index = false
          */
         index: false,
+        /**
+         * @description index Header
+         * @type {String}
+         * @default indexHeader = '#'
+         */
+        indexHeader: '#',
         /**
          * @description Carousel type
          * @type {String}
          * @default carousel = 'single'
          * @example carousel = 'single' | 'page'
          */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Pause scroll when mouse hovered
+         * @type {Boolean}
+         * @default hoverPause = true
+         * @example hoverPause = true | false
+         */
+        hoverPause: true
       },
 
       mergedConfig: null,
@@ -161,7 +176,11 @@ export default {
 
       animationIndex: 0,
 
-      animationHandler: ''
+      animationHandler: '',
+
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -170,10 +189,24 @@ export default {
 
       stopAnimation()
 
+      this.animationIndex = 0
+
       calcData()
     }
   },
   methods: {
+    handleHover(enter, ri, ci, row, ceil){
+      const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+      if (!mergedConfig.hoverPause) return
+
+      if (enter) {
+        stopAnimation()
+      } else {
+        animation(true)
+      }
+    },
     afterAutoResizeMixinInit () {
       const { calcData } = this
 
@@ -215,7 +248,7 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     calcHeaderData () {
-      let { header, index } = this.mergedConfig
+      let { header, index, indexHeader} = this.mergedConfig
 
       if (!header.length) {
         this.header = []
@@ -225,7 +258,7 @@ export default {
 
       header = [...header]
 
-      if (index) header.unshift('#')
+      if (index) header.unshift(indexHeader)
 
       this.header = header
     },
@@ -304,7 +337,15 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
-      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
 
@@ -312,17 +353,21 @@ export default {
 
       if (rowNum >= rowLength) return
 
-      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
 
       const animationNum = carousel === 'single' ? 1 : rowNum
 
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
 
       this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
 
@@ -335,21 +380,36 @@ export default {
       this.animationHandler = setTimeout(animation, waitTime - 300)
     },
     stopAnimation () {
-      const { animationHandler } = this
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
 
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
     },
-    emitEvent (ri, ci, row, ceil) {
+    emitEvent (type, ri, ci, row, ceil) {
       const { ceils, rowIndex } = row
 
-      this.$emit('click', {
+      this.$emit(type, {
         row: ceils,
         ceil,
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {