update version to 2.9.9

update change log
Add exception prompt
2020-08-25 18:26:21 +08:00 · 2020-08-25 18:26:10 +08:00 · 2020-08-25 18:23:14 +08:00 · 2020-08-25 16:55:49 +08:00 · 2020-08-25 16:55:10 +08:00 · 2020-08-25 16:54:47 +08:00
69 changed files with 4149 additions and 709 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,128 @@
+# 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
@@ -33,7 +158,7 @@

 # 2.4.7-alpha (2019-10-24)

-### perfect
+### Perfect

 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.
--- a/README.md
+++ b/README.md
@@ -49,7 +49,6 @@ Vue.use(borderBox1)

 ### TODO

-* **飞线图**添加多中心点及反向飞线功能
 * **地图组件**
 * **TS**重构组件库底层依赖

--- a/README_EN.md
+++ b/README_EN.md
@@ -59,7 +59,6 @@ React version of the component library and feedback[Questionnaire](https://www.w

 ### TODO

-* **flylineChart**Add multi-center point and reverse fly line function.
 * **Map Component**
 * Refactor underlying dependencies using **TS**.

--- a/dist/datav.map.vue.js
+++ b/dist/datav.map.vue.js
--- a/dist/datav.min.vue.js
+++ b/dist/datav.min.vue.js
--- a/lib/components/activeRingChart/src/main.vue
+++ b/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)
--- a/lib/components/borderBox1/src/main.vue
+++ b/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"
@@ -52,20 +63,29 @@
 </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 {
+      ref: 'border-box-1',
+
      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#4fd2dd', '#235fa7'],
--- a/lib/components/borderBox10/src/main.vue
+++ b/lib/components/borderBox10/src/main.vue
@@ -1,5 +1,12 @@
 <template>
-  <div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <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"
@@ -20,20 +27,29 @@
 </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 {
+      ref: 'border-box-10',
+
      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#1d48c4', '#d3e1f8'],
--- a/lib/components/borderBox11/src/main.vue
+++ b/lib/components/borderBox11/src/main.vue
@@ -14,6 +14,13 @@
        </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})`"
@@ -209,6 +216,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -231,13 +239,17 @@ export default {
    title: {
      type: String,
      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-11',
-      filterId: `borderr-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

--- a/lib/components/borderBox12/src/main.vue
+++ b/lib/components/borderBox12/src/main.vue
@@ -28,7 +28,7 @@

      <path
        v-if="width && height"
-        fill="transparent"
+        :fill="backgroundColor"
        stroke-width="2"
        :stroke="mergedColor[0]"
        :d="`
@@ -92,6 +92,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -106,13 +107,17 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = +new Date()
+    const id = uuid()
    return {
      ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

--- a/lib/components/borderBox13/src/main.vue
+++ b/lib/components/borderBox13/src/main.vue
@@ -2,7 +2,7 @@
  <div class="dv-border-box-13" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <path
-        fill="transparent"
+        :fill="backgroundColor"
        :stroke="mergedColor[0]"
        :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,10 +54,13 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = +new Date()
    return {
      ref: 'border-box-13',

--- a/lib/components/borderBox2/src/main.vue
+++ b/lib/components/borderBox2/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-2" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <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`"
@@ -35,6 +39,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox3/src/main.vue
+++ b/lib/components/borderBox3/src/main.vue
@@ -1,6 +1,10 @@
 <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"
        :stroke="mergedColor[0]"
        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
@@ -39,6 +43,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox4/src/main.vue
+++ b/lib/components/borderBox4/src/main.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="dv-border-box-4" :ref="ref">
    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <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}
@@ -46,6 +51,10 @@ export default {
    reverse: {
      type: Boolean,
      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox5/src/main.vue
+++ b/lib/components/borderBox5/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-5" :ref="ref">
    <svg :class="`dv-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]"
@@ -43,6 +47,10 @@ export default {
    reverse: {
      type: Boolean,
      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox6/src/main.vue
+++ b/lib/components/borderBox6/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-6" :ref="ref">
    <svg class="dv-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" />
@@ -39,6 +43,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox7/src/main.vue
+++ b/lib/components/borderBox7/src/main.vue
@@ -2,7 +2,7 @@
 <template>
  <div
    class="dv-border-box-7"
-    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
+    :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">
@@ -37,6 +37,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
--- a/lib/components/borderBox8/src/main.vue
+++ b/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
@@ -25,7 +25,7 @@
          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
            <animateMotion
              :dur="`${dur}s`"
-              :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`"
+              :path="pathD"
              rotate="auto"
              repeatCount="indefinite"
            />
@@ -33,6 +33,8 @@
        </mask>
      </defs>

+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
      <use
        :stroke="mergedColor[0]"
        stroke-width="1"
@@ -63,6 +65,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -79,15 +82,23 @@ export 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'],

@@ -99,6 +110,13 @@ 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: {
--- a/lib/components/borderBox9/src/main.vue
+++ b/lib/components/borderBox9/src/main.vue
@@ -105,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>

@@ -116,6 +125,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -128,15 +138,19 @@ export default {
    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'],

--- a/lib/components/capsuleChart/src/main.css
+++ b/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;
--- a/lib/components/capsuleChart/src/main.vue
+++ b/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()
--- a/lib/components/charts/src/main.vue
+++ b/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
    }
--- a/lib/components/decoration10/src/main.vue
+++ b/lib/components/decoration10/src/main.vue
@@ -147,6 +147,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -162,17 +163,17 @@ export 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)'],

--- a/lib/components/decoration11/src/main.vue
+++ b/lib/components/decoration11/src/main.vue
@@ -72,7 +72,6 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
    return {
      ref: 'decoration-11',

--- a/lib/components/decoration4/src/main.css
+++ b/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%;
  }
--- a/lib/components/decoration9/src/main.vue
+++ b/lib/components/decoration9/src/main.vue
@@ -85,6 +85,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -106,11 +107,11 @@ export default {
    }
  },
  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],

--- a/lib/components/digitalFlop/src/main.vue
+++ b/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 () {
--- a/lib/components/flylineChart/src/main.vue
+++ b/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: {
        /**
--- a/lib/components/flylineChartEnhanced/index.js
+++ b/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)
+}
--- a/lib/components/flylineChartEnhanced/src/main.css
+++ b/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;
+}
--- a/lib/components/flylineChartEnhanced/src/main.vue
+++ b/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>
--- a/lib/components/percentPond/src/main.vue
+++ b/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
--- a/lib/components/scrollBoard/src/main.vue
+++ b/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>
@@ -146,7 +148,14 @@ export default {
         * @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,
@@ -169,7 +178,9 @@ export default {

      animationHandler: '',

-      updater: 0
+      updater: 0,
+
+      needCalc: false
    }
  },
  watch: {
@@ -178,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

@@ -312,6 +337,14 @@ export default {
      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
+      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
@@ -330,7 +363,7 @@ export default {
      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))
@@ -355,15 +388,28 @@ export default {

      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 () {
--- a/lib/components/scrollRankingBoard/src/main.vue
+++ b/lib/components/scrollRankingBoard/src/main.vue
@@ -9,7 +9,7 @@
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
         * @type {Boolean}
         * @default sort = true
         */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
      },

      mergedConfig: null,
@@ -152,10 +158,20 @@ export default {
      })

      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

@@ -198,7 +214,7 @@ export default {
      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))
@@ -222,7 +238,7 @@ export default {
      if (!animationHandler) return

      clearTimeout(animationHandler)
-    }
+    },
  },
  destroyed () {
    const { stopAnimation } = this
--- a/lib/components/waterLevelPond/src/main.vue
+++ b/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: {
        /**
--- a/lib/index.js
+++ b/lib/index.js
@@ -31,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'
@@ -79,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'
@@ -127,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)
--- a/lib/util/index.js
+++ b/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)
+  })
+}
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@jiaminghi/data-view",
-  "version": "2.6.0",
+  "version": "2.9.9",
  "author": "JiaMing <743192023@qq.com>",
  "description": "Vue Large screen data display component library",
  "main": "lib/index.js",
--- a/src/components/activeRingChart/src/main.vue
+++ b/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)
--- a/src/components/borderBox1/src/main.vue
+++ b/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"
@@ -52,20 +63,29 @@
 </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 {
+      ref: 'border-box-1',
+
      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#4fd2dd', '#235fa7'],
--- a/src/components/borderBox10/src/main.vue
+++ b/src/components/borderBox10/src/main.vue
@@ -1,11 +1,18 @@
 <template>
-  <div class="dv-border-box-10" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <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="mergedColor[1]"
@@ -20,20 +27,29 @@
 </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 {
+      ref: 'border-box-10',
+
      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom'],

      defaultColor: ['#1d48c4', '#d3e1f8'],
@@ -70,7 +86,7 @@ export default {
  height: 100%;
  border-radius: 6px;

-  .border {
+  .dv-border-svg-container {
    position: absolute;
    display: block;
  }
--- a/src/components/borderBox11/src/main.vue
+++ b/src/components/borderBox11/src/main.vue
@@ -14,6 +14,13 @@
        </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})`"
@@ -209,6 +216,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -231,13 +239,17 @@ export default {
    title: {
      type: String,
      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = Date.now()
+    const id = uuid()
    return {
      ref: 'border-box-11',
-      filterId: `borderr-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${id}`,

      defaultColor: ['#8aaafb', '#1f33a2'],

@@ -280,7 +292,7 @@ export default {
    top: 0px;
    left: 0px;

-    polyline {
+    & > polyline {
      fill: none;
      stroke-width: 1;
    }
--- a/src/components/borderBox12/src/main.vue
+++ b/src/components/borderBox12/src/main.vue
@@ -28,7 +28,7 @@

      <path
        v-if="width && height"
-        fill="transparent"
+        :fill="backgroundColor"
        stroke-width="2"
        :stroke="mergedColor[0]"
        :d="`
@@ -92,6 +92,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -106,13 +107,17 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = +new Date()
+    const id = uuid()
    return {
      ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${id}`,

      defaultColor: ['#2e6099', '#7ce7fd'],

--- a/src/components/borderBox13/src/main.vue
+++ b/src/components/borderBox13/src/main.vue
@@ -2,7 +2,7 @@
  <div class="dv-border-box-13" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
      <path
-        fill="transparent"
+        :fill="backgroundColor"
        :stroke="mergedColor[0]"
        :d="`
          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,10 +54,13 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
-    const timestamp = +new Date()
    return {
      ref: 'border-box-13',

--- a/src/components/borderBox2/src/main.vue
+++ b/src/components/borderBox2/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-2" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <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`"
@@ -35,6 +39,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -81,7 +89,7 @@ export default {
    top: 0px;
    left: 0px;

-    polyline {
+    & > polyline {
      fill: none;
      stroke-width: 1;
    }
--- a/src/components/borderBox3/src/main.vue
+++ b/src/components/borderBox3/src/main.vue
@@ -1,6 +1,10 @@
 <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"
        :stroke="mergedColor[0]"
        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`"
@@ -39,6 +43,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -85,7 +93,7 @@ export default {
    top: 0px;
    left: 0px;

-    polyline {
+    & > polyline {
      fill: none;
    }
  }
--- a/src/components/borderBox4/src/main.vue
+++ b/src/components/borderBox4/src/main.vue
@@ -1,6 +1,11 @@
 <template>
  <div class="dv-border-box-4" :ref="ref">
    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <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}
@@ -46,6 +51,10 @@ export default {
    reverse: {
      type: Boolean,
      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -96,7 +105,7 @@ export default {
    top: 0px;
    left: 0px;

-    polyline {
+    & > polyline {
      fill: none;
    }
  }
--- a/src/components/borderBox5/src/main.vue
+++ b/src/components/borderBox5/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <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]"
@@ -43,6 +47,10 @@ export default {
    reverse: {
      type: Boolean,
      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -86,14 +94,14 @@ 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;
    }
  }
--- a/src/components/borderBox6/src/main.vue
+++ b/src/components/borderBox6/src/main.vue
@@ -1,6 +1,10 @@
 <template>
  <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <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" />
@@ -39,6 +43,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -78,14 +86,14 @@ export default {
  width: 100%;
  height: 100%;

-  .dv-svg-container {
+  .dv-border-svg-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

-    polyline {
+    & > polyline {
      fill: none;
      stroke-width: 1;
    }
--- a/src/components/borderBox7/src/main.vue
+++ b/src/components/borderBox7/src/main.vue
@@ -2,10 +2,10 @@
 <template>
  <div
    class="dv-border-box-7"
-    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
+    :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">
+    <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}`" />
@@ -37,6 +37,10 @@ export default {
    color: {
      type: Array,
      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
    }
  },
  data () {
@@ -76,14 +80,14 @@ export default {
  width: 100%;
  height: 100%;

-  .dv-svg-container {
+  .dv-border-svg-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;

-    polyline {
+    & > polyline {
      fill: none;
      stroke-linecap: round;
    }
--- a/src/components/borderBox8/src/main.vue
+++ b/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
@@ -25,7 +25,7 @@
          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
            <animateMotion
              :dur="`${dur}s`"
-              :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`"
+              :path="pathD"
              rotate="auto"
              repeatCount="indefinite"
            />
@@ -33,6 +33,8 @@
        </mask>
      </defs>

+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
      <use
        :stroke="mergedColor[0]"
        stroke-width="1"
@@ -63,6 +65,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -79,15 +82,23 @@ export 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'],

@@ -99,6 +110,13 @@ 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: {
@@ -129,7 +147,7 @@ export default {
  width: 100%;
  height: 100%;

-  svg {
+  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
--- a/src/components/borderBox9/src/main.vue
+++ b/src/components/borderBox9/src/main.vue
@@ -1,6 +1,6 @@
 <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%">
          <animate
@@ -105,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>

@@ -116,6 +125,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -128,15 +138,19 @@ export default {
    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'],

@@ -171,7 +185,7 @@ export default {
  width: 100%;
  height: 100%;

-  svg {
+  .dv-border-svg-container {
    position: absolute;
    width: 100%;
    height: 100%;
--- a/src/components/capsuleChart/src/main.vue
+++ b/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 {
--- a/src/components/charts/src/main.vue
+++ b/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
    }
--- a/src/components/decoration10/src/main.vue
+++ b/src/components/decoration10/src/main.vue
@@ -147,6 +147,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -162,17 +163,17 @@ export 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)'],

--- a/src/components/decoration11/src/main.vue
+++ b/src/components/decoration11/src/main.vue
@@ -72,7 +72,6 @@ export default {
    }
  },
  data () {
-    const timestamp = Date.now()
    return {
      ref: 'decoration-11',

--- a/src/components/decoration4/src/main.vue
+++ b/src/components/decoration4/src/main.vue
@@ -83,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%;
    }
@@ -110,6 +113,10 @@ export default {
  }

  @keyframes ani-width {
+    0% {
+      width: 0%;
+    }
+    
    70% {
      width: 100%;
    }
--- a/src/components/decoration9/src/main.vue
+++ b/src/components/decoration9/src/main.vue
@@ -85,6 +85,7 @@

 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'

 import { deepMerge } from '@jiaminghi/charts/lib/util/index'

@@ -106,11 +107,11 @@ export default {
    }
  },
  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],

--- a/src/components/digitalFlop/src/main.vue
+++ b/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 () {
--- a/src/components/flylineChart/src/main.vue
+++ b/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: {
        /**
--- a/src/components/flylineChartEnhanced/index.js
+++ b/src/components/flylineChartEnhanced/index.js
@@ -0,0 +1,5 @@
+import FlylineChartEnhanced from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FlylineChartEnhanced.name, FlylineChartEnhanced)
+}
--- a/src/components/flylineChartEnhanced/src/main.vue
+++ b/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>
--- a/src/components/percentPond/src/main.vue
+++ b/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
--- a/src/components/scrollBoard/src/main.vue
+++ b/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>
@@ -146,7 +148,14 @@ export default {
         * @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,
@@ -169,7 +178,9 @@ export default {

      animationHandler: '',

-      updater: 0
+      updater: 0,
+
+      needCalc: false
    }
  },
  watch: {
@@ -178,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

@@ -312,6 +337,14 @@ export default {
      this.aligns = deepMerge(aligns, align)
    },
    async animation (start = false) {
+      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
@@ -330,7 +363,7 @@ export default {
      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))
@@ -355,15 +388,28 @@ export default {

      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 () {
--- a/src/components/scrollRankingBoard/src/main.vue
+++ b/src/components/scrollRankingBoard/src/main.vue
@@ -9,7 +9,7 @@
      <div class="ranking-info">
        <div class="rank">No.{{ item.ranking }}</div>
        <div class="info-name" v-html="item.name" />
-        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
      </div>

      <div class="ranking-column">
@@ -82,7 +82,13 @@ export default {
         * @type {Boolean}
         * @default sort = true
         */
-        sort: true
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
      },

      mergedConfig: null,
@@ -152,10 +158,20 @@ export default {
      })

      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

@@ -198,7 +214,7 @@ export default {
      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))
@@ -222,7 +238,7 @@ export default {
      if (!animationHandler) return

      clearTimeout(animationHandler)
-    }
+    },
  },
  destroyed () {
    const { stopAnimation } = this
--- a/src/components/waterLevelPond/src/main.vue
+++ b/src/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: {
        /**
--- a/src/index.js
+++ b/src/index.js
@@ -40,6 +40,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'
@@ -88,6 +89,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)
--- a/src/mixin/autoResize.js
+++ b/src/mixin/autoResize.js
@@ -32,8 +32,14 @@ export default {
        $nextTick(e => {
          const dom = this.dom = $refs[ref]

-          this.width = dom.clientWidth
-          this.height = dom.clientHeight
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }

          if (typeof onResize === 'function' && resize) onResize()

@@ -56,6 +62,8 @@ export default {
    unbindDomResizeCallback () {
      let { domObserver, debounceInitWHFun } = this

+      if (!domObserver) return
+
      domObserver.disconnect()
      domObserver.takeRecords()
      domObserver = null
--- a/src/util/index.js
+++ b/src/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)
+  })
+}
Author	SHA1	Message	Date
jiaming743	3b4d6faf35	update version to 2.9.9	2020-08-25 18:26:21 +08:00
jiaming743	58e538b0bd	update change log	2020-08-25 18:26:10 +08:00
jiaming743	c8fb3596ee	Add exception prompt	2020-08-25 18:23:14 +08:00
jiaming743	1db9bd4b6b	Canonical class name	2020-08-25 16:55:49 +08:00
jiaming743	d8899785a7	Merge branch 'pr/126'	2020-08-25 16:55:10 +08:00
jiaming743	918653c9d9	Canonical class name	2020-08-25 16:54:47 +08:00
jiaming743	751eb2f29b	srollRankingBoard: Add value formatter	2020-08-20 19:58:40 +08:00
jiaming743	30a343307e	update version to 2.9.8	2020-08-20 19:58:14 +08:00
jiaming743	6630bc1e84	update change log	2020-08-20 19:58:05 +08:00
jiaming743	687ccfaab8	uodate change log	2020-08-19 19:30:32 +08:00
jiaming743	1082be1251	update dist and lib	2020-08-19 19:26:05 +08:00
jiaming743	e67b4d5403	Optimize the update effect of updateRows.	2020-08-19 19:25:25 +08:00
jiaming743	1c7e03bff8	update change log	2020-08-19 19:25:20 +08:00
jiaming743	c5ff0cd474	update version to 2.9.7	2020-08-19 19:25:14 +08:00
liang_qixing	051cb8f8de	:bug:fix在dv-border-box-8下的dv-decoration定位问题	2020-08-17 14:52:33 +08:00
jiaming743	1e76c1c0ec	update dist and lib	2020-08-05 14:21:31 +08:00
jiaming743	731d89fb1a	update version to 2.9.6	2020-08-05 14:20:33 +08:00
jiaming743	dd512c05dc	update change log	2020-08-05 14:20:27 +08:00
jiaming743	be97afe8a9	fix: Carousel is abnormal when carousel is page	2020-08-05 14:19:23 +08:00
jiaming743	16013c0aa3	update dist	2020-08-05 10:03:59 +08:00
jiaming743	c3211c358e	Merge branch 'master' of https://github.com/DataV-Team/Datav	2020-08-05 10:03:19 +08:00
jiaming743	536ded2964	update dist and lib	2020-08-05 09:59:49 +08:00
jiaming743	32b9757e0f	Optmization: Reduce redundant node rendering	2020-08-05 09:59:20 +08:00
jiaming743	60247e548c	update change log	2020-08-05 09:59:04 +08:00
jiaming743	58d27bc6b1	update version to 2.9.5	2020-08-05 09:58:58 +08:00
jiaming743	e0bd76032a	update dist and lib	2020-07-03 17:40:19 +08:00
jiaming743	6139b5d9b7	update version to 2.9.4	2020-07-03 17:39:37 +08:00
jiaming743	c32d396f90	update change log	2020-07-03 17:39:12 +08:00
jiaming743	feada8a462	Optimize key value	2020-07-03 17:37:36 +08:00
jiaming743	9318431c88	update dist and lib	2020-07-02 11:15:51 +08:00
jiaming743	abba9ad931	update version to 2.9.3	2020-07-02 11:15:47 +08:00
jiaming743	2b06940ac7	update change log	2020-07-02 11:05:47 +08:00
jiaming743	026d9139c4	Optimize uuid	2020-07-02 11:00:19 +08:00
jiaming743	9b84417f01	update dist and lib	2020-06-16 14:49:59 +08:00
jiaming743	86da84af2e	update version to 2.9.2	2020-06-16 14:49:32 +08:00
jiaming743	1ea106fd83	update change log	2020-06-16 14:49:11 +08:00
jiaming743	7491b34711	bug fixes: reset animationIndex when config upate	2020-06-16 14:48:16 +08:00
jiaming743	a2875684ce	update dist and lib	2020-06-16 14:34:36 +08:00
jiaming743	f581aee5c3	update changelog	2020-06-16 14:34:30 +08:00
jiaming743	3f5148cea3	update version to 2.9.1	2020-06-16 14:27:11 +08:00
jiaming743	e270fadcd2	update change log	2020-06-16 14:26:55 +08:00
jiaming743	beaef5c59a	optmization	2020-06-16 14:24:02 +08:00
jiaming743	b17399416a	Merge branch 'pr/101'	2020-06-16 14:19:34 +08:00
jiaming743	5f3fdfc798	add number formatter	2020-06-16 14:06:12 +08:00
costa	e7c237cbac	ativeRingChart: optimize method calcRowsData	2020-06-12 15:08:00 +08:00
jiaming743	3d3de766e3	update dist and lib	2020-06-10 09:50:30 +08:00
jiaming743	330815d90a	update version to 2.9.0	2020-06-10 09:50:24 +08:00
jiaming743	4f6fc240d2	update change log	2020-06-10 09:50:10 +08:00
jiaming743	1d0f369509	optmization	2020-06-10 09:45:21 +08:00
gaoy	ea058a90c3	feature / 新增轮播表的鼠标悬停配置 hoverPause	2020-06-09 11:15:23 +08:00
jiaming743	934e3f314a	Merge branch 'master' of https://github.com/DataV-Team/Datav	2020-05-25 17:03:44 +08:00
jiaming743	eea32d7e39	merge branch pr/83	2020-05-25 17:02:57 +08:00
jiaming743	7dd7baebba	merge branch pr/83	2020-05-25 17:02:05 +08:00
jiaming743	4a7fdf0c1c	Merge branch 'pr/83'	2020-05-25 17:01:06 +08:00
jiaming743	53991795a0	update dist and lib	2020-05-25 16:42:14 +08:00
jiaming743	dde29fa61a	update version to 2.8.4	2020-05-25 15:59:20 +08:00
jiaming743	c82b979432	update change log	2020-05-25 15:59:10 +08:00
jiaming743	e938b66dc0	update dist and lib	2020-05-25 15:57:26 +08:00
jiaming743	71a9be2a13	Use uuid to produce unique id	2020-05-25 15:57:19 +08:00
jiahao	f0432e4c42	update uuid	2020-05-16 15:20:06 +08:00
jiahao	65f5b529bf	fix id errors	2020-05-15 13:22:05 +08:00
jiaming743	054854480a	update dist	2020-05-06 15:07:19 +08:00
jiaming743	6ce83e1fd8	update dist and lib	2020-05-06 14:15:15 +08:00
jiaming743	8e5f279b6e	update version to 2.8.3	2020-05-06 14:15:02 +08:00
jiaming743	22afc8e787	update change log	2020-05-06 14:14:52 +08:00
jiaming743	eb78915c93	add showValue configuration	2020-05-06 14:13:49 +08:00
jiaming743	22c88c4ea5	add showOriginValue configuration	2020-05-06 14:13:34 +08:00
jiaming743	c98ca00179	Merge branch 'pr/76' into dev	2020-05-06 13:47:47 +08:00
jiaming743	c257ca6d9c	update dist and lib	2020-05-06 13:20:20 +08:00
jiaming743	ce4cf0d342	add reverse configuration	2020-05-06 13:20:15 +08:00
jiaming743	7df0c0247a	update version to 2.8.2	2020-05-06 13:20:04 +08:00
jiaming743	df2369dfe4	update change log	2020-05-06 13:19:55 +08:00
jiaming743	db52e8cdc0	update change log	2020-05-03 20:26:37 +08:00
jiaming743	f8e438b0c4	update version to 2.8.1	2020-05-03 20:26:33 +08:00
jiaming743	1a13bc08c5	update dist and lib	2020-05-03 20:15:35 +08:00
jiaming743	ba90fb2faa	add rowGap configuration	2020-05-03 20:15:28 +08:00
costa	7799ef3dae	capsule-item > div add position prop	2020-04-30 13:38:11 +08:00
jiaming743	33456176f7	update dist	2020-04-28 18:41:09 +08:00
costa	dd37ba167a	format code	2020-04-28 16:43:44 +08:00
costa	fdd1e243a7	active-ring-chart add showOriginalValue	2020-04-28 16:15:12 +08:00
costa	57b6c726eb	1.add showVal prop; 2.optimize unit-label child style;	2020-04-27 18:19:20 +08:00
jiaming743	be410da013	update dist and lib	2020-04-25 16:46:33 +08:00
jiaming743	d4206f066c	update version to 2.8.0	2020-04-25 16:46:27 +08:00
jiaming743	73a5084c0e	update change log	2020-04-25 16:46:17 +08:00
jiaming743	9a039b3f10	Improve compatibility	2020-04-25 16:42:41 +08:00
jiaming743	5ee1d408b6	add backgroudColor config	2020-04-25 16:42:04 +08:00
JM	419fa0c3a9	update dist and lib	2020-04-15 14:03:45 +08:00
JM	d2bb06a36c	update version to 2.7.4	2020-04-15 14:03:37 +08:00
JM	94824f32d8	update change log	2020-04-15 14:03:27 +08:00
wzx	b99410ef94	Bug Fixes:#59 修复胶囊图数值错误	2020-04-07 17:54:33 +08:00
JM	4b69668327	update dist and lib	2020-01-16 10:23:42 +08:00
JM	d15bcf34cb	update version to 2.7.3	2020-01-16 10:23:15 +08:00
JM	43a04efb62	update changelog	2020-01-16 10:23:06 +08:00
JM	81b8bef8e1	Bug Fixes: parseInt precision lost	2020-01-16 10:21:58 +08:00
JM	6467bd516f	remove useless character	2020-01-12 17:38:53 +08:00
JM	62c5998938	update version to 2.7.2	2020-01-10 14:30:09 +08:00
JM	247221729f	update dist and lib	2020-01-10 14:29:37 +08:00
JM	c48aa8ee84	update change log	2020-01-10 14:29:28 +08:00
JM	b18962855c	add digitalFlopToFixed configuration	2020-01-10 14:28:22 +08:00
JM	ae3345bd95	update change log	2020-01-08 19:05:14 +08:00
JM	dceb761e8c	update dist and lib	2020-01-08 19:04:36 +08:00
JM	bd178192f1	update version to 2.7.1	2020-01-08 19:03:46 +08:00
JM	8c47ae03db	update change log	2020-01-08 19:03:39 +08:00
JM	cc14ac7670	Bug Fixes: exception when relative is false	2020-01-08 19:02:32 +08:00
JM	b6c8134fa6	update readme	2020-01-05 22:19:43 +08:00
JM	8f87b3cab1	new component: flylineChartEnhanced	2020-01-05 22:19:04 +08:00
JM	005ae41e29	update dist and lib	2020-01-05 22:18:00 +08:00
JM	7e9cca32ad	update version to 2.7.0	2020-01-05 22:17:34 +08:00
JM	31d94f3cfd	update change log	2020-01-05 22:17:20 +08:00