CHANGELOG.md

@@ -1,139 +1,3 @@
-# 2.10.0-alpha (2020-09-09)
-
-### New
-
-- **decoration12:** New decoration(Radar scan).
-
-### Optmization
-
-- **decoration** add `dur` configuration.
-- **activeRingChart** add `digitalFlopUnit` configuration.
-
-# 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
@@ -169,7 +33,7 @@
 
 # 2.4.7-alpha (2019-10-24)
 
-### Perfect
+### perfect
 
 - **charts:** Optimize memory leaks.
 - **digitalFlop:** Optimize memory leaks.

README.md

@@ -49,6 +49,7 @@ Vue.use(borderBox1)
 
 ### TODO
 
+* **飞线图**添加多中心点及反向飞线功能
 * **地图组件**
 * **TS**重构组件库底层依赖
 

README_EN.md

@@ -59,6 +59,7 @@ 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**.
 

lib/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data() {
+  data () {
     return {
       defaultConfig: {
         /**
@@ -78,16 +78,6 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
-        /**
-         * @description Digital flop toFixed
-         * @type {Number}
-         */
-        digitalFlopToFixed: 0,
-        /**
-         * @description Digital flop unit
-         * @type {String}
-         */
-        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -99,13 +89,7 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50,
+        animationFrame: 50
-        /**
-         * @description showOriginValue
-         * @type {Boolean}
-         * @default showOriginValue = false
-         */
-        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -118,48 +102,33 @@ export default {
     }
   },
   computed: {
-    digitalFlop() {
+    digitalFlop () {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const {
+      const { digitalFlopStyle, data } = mergedConfig
-        digitalFlopStyle,
-        digitalFlopToFixed,
-        data,
-        showOriginValue,
-        digitalFlopUnit
-      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      let displayValue
+      const sum = value.reduce((all, v) => all + v, 0)
 
-      if (showOriginValue) {
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
-        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: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
+        content: '{nt}%',
-        number: [displayValue],
+        number: [percent],
-        style: digitalFlopStyle,
+        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 ''
@@ -168,7 +137,7 @@ export default {
     }
   },
   watch: {
-    config() {
+    config () {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -181,7 +150,7 @@ export default {
     }
   },
   methods: {
-    init() {
+    init () {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -190,20 +159,17 @@ 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(
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-        deepClone(defaultConfig, true),
-        config || {}
-      )
     },
-    setRingOption() {
+    setRingOption () {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -212,7 +178,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption() {
+    getRingOption () {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -234,7 +200,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius(active = false) {
+    getRealRadius (active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -245,15 +211,14 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number')
+      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
-        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()
@@ -286,12 +251,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted() {
+  mounted () {
     const { init } = this
 
     init()
   },
-  beforeDestroy() {
+  beforeDestroy () {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

lib/components/borderBox1/src/main.vue

@@ -1,16 +1,5 @@
 <template>
-  <div class="dv-border-box-1" :ref="ref">
+  <div class="dv-border-box-1">
-    <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"
@@ -63,29 +52,20 @@
 </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'],

lib/components/borderBox10/src/main.css

@@ -4,7 +4,7 @@
   height: 100%;
   border-radius: 6px;
 }
-.dv-border-box-10 .dv-border-svg-container {
+.dv-border-box-10 .border {
   position: absolute;
   display: block;
 }

lib/components/borderBox10/src/main.vue

@@ -1,18 +1,11 @@
 <template>
-  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <div class="dv-border-box-10" :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} dv-border-svg-container`"
+      :class="`${item} border`"
     >
       <polygon
         :fill="mergedColor[1]"
@@ -27,29 +20,20 @@
 </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'],

lib/components/borderBox11/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-11 .dv-border-svg-container > polyline {
+.dv-border-box-11 .dv-border-svg-container polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox11/src/main.vue

@@ -14,13 +14,6 @@
         </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})`"
@@ -216,7 +209,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -239,17 +231,13 @@ export default {
     title: {
       type: String,
       default: ''
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${id}`,
+      filterId: `borderr-box-11-filterId-${timestamp}`,
 
       defaultColor: ['#8aaafb', '#1f33a2'],
 

lib/components/borderBox12/src/main.vue

@@ -28,7 +28,7 @@
 
       <path
         v-if="width && height"
-        :fill="backgroundColor"
+        fill="transparent"
         stroke-width="2"
         :stroke="mergedColor[0]"
         :d="`
@@ -92,7 +92,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -107,17 +106,13 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = +new Date()
     return {
       ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${id}`,
+      filterId: `borderr-box-12-filterId-${timestamp}`,
 
       defaultColor: ['#2e6099', '#7ce7fd'],
 

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="backgroundColor"
+        fill="transparent"
         :stroke="mergedColor[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,13 +54,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
+    const timestamp = +new Date()
     return {
       ref: 'border-box-13',
 

lib/components/borderBox2/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-2 .dv-border-svg-container > polyline {
+.dv-border-box-2 .dv-border-svg-container polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox2/src/main.vue

@@ -1,10 +1,6 @@
 <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`"
@@ -39,10 +35,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox3/src/main.css

@@ -10,7 +10,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-3 .dv-border-svg-container > polyline {
+.dv-border-box-3 .dv-border-svg-container polyline {
   fill: none;
 }
 .dv-border-box-3 .dv-bb3-line1 {

lib/components/borderBox3/src/main.vue

@@ -1,10 +1,6 @@
 <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`"
@@ -43,10 +39,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox4/src/main.css

@@ -13,7 +13,7 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-4 .dv-border-svg-container > polyline {
+.dv-border-box-4 .dv-border-svg-container polyline {
   fill: none;
 }
 .dv-border-box-4 .sw1 {

lib/components/borderBox4/src/main.vue

@@ -1,11 +1,6 @@
 <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}
@@ -51,10 +46,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox5/src/main.css

@@ -6,14 +6,14 @@
 .dv-border-box-5 .dv-reverse {
   transform: rotate(180deg);
 }
-.dv-border-box-5 .dv-border-svg-container {
+.dv-border-box-5 .dv-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-5 .dv-border-svg-container > polyline {
+.dv-border-box-5 .dv-svg-container polyline {
   fill: none;
 }
 .dv-border-box-5 .dv-bb5-line-1,

lib/components/borderBox5/src/main.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <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]"
@@ -47,10 +43,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox6/src/main.css

@@ -3,14 +3,14 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-border-svg-container {
+.dv-border-box-6 .dv-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-border-svg-container > polyline {
+.dv-border-box-6 .dv-svg-container polyline {
   fill: none;
   stroke-width: 1;
 }

lib/components/borderBox6/src/main.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <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" />
@@ -43,10 +39,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox7/src/main.css

@@ -3,14 +3,14 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-7 .dv-border-svg-container {
+.dv-border-box-7 .dv-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-7 .dv-border-svg-container > polyline {
+.dv-border-box-7 .dv-svg-container polyline {
   fill: none;
   stroke-linecap: round;
 }

lib/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]}; background-color: ${backgroundColor}`"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
     :ref="ref"
   >
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@@ -37,10 +37,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {

lib/components/borderBox8/src/main.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-8 .dv-border-svg-container {
+.dv-border-box-8 svg {
   position: absolute;
   width: 100%;
   height: 100%;

lib/components/borderBox8/src/main.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
-          :d="pathD"
+          :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`"
           fill="transparent"
         />
         <radialGradient
@@ -25,7 +25,7 @@
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
               :dur="`${dur}s`"
-              :path="pathD"
+              :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`"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -33,8 +33,6 @@
         </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"
@@ -65,7 +63,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -82,23 +79,15 @@ export default {
     dur: {
       type: Number,
       default: 3
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
-    },
-    reverse: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${id}`,
+      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${id}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${id}`,
+      mask: `border-box-8-mask-${timestamp}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 
@@ -110,13 +99,6 @@ 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: {

lib/components/borderBox9/src/main.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-9 .dv-border-svg-container {
+.dv-border-box-9 svg {
   position: absolute;
   width: 100%;
   height: 100%;

lib/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
           <animate
@@ -105,15 +105,6 @@
         </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>
 
@@ -125,7 +116,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -138,19 +128,15 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${id}`,
+      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${id}`,
+      maskId: `border-box-9-mask-${timestamp}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 

lib/components/capsuleChart/src/main.css

@@ -31,27 +31,19 @@
   margin: 5px 0px;
   border-radius: 5px;
 }
-.dv-capsule-chart .capsule-item .capsule-item-column {
+.dv-capsule-chart .capsule-item div {
-  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;
-  justify-content: space-between;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
 }
 .dv-capsule-chart .unit-text {
   text-align: right;

lib/components/capsuleChart/src/main.vue

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

lib/components/charts/src/main.vue

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

lib/components/decoration10/src/main.vue

@@ -147,7 +147,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -163,17 +162,17 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${id}`,
+      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${id}`,
+      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${id}`,
+      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${id}`,
+      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${id}`,
+      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${id}`,
+      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${id}`,
+      animationId7: `d10ani7${timestamp}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

lib/components/decoration11/src/main.vue

@@ -72,6 +72,7 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-11',
 

lib/components/decoration12/index.js

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

lib/components/decoration12/src/main.css

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

lib/components/decoration12/src/main.vue

@@ -1,284 +0,0 @@
-<template>
-  <div class="dv-decoration-12" :ref="ref">
-    <svg :width="width" :height="height">
-      <defs>
-        <g :id="gId">
-          <path
-            :stroke="pathColor[i]"
-            :stroke-width="width / 2"
-            fill="transparent"
-            v-for="(d, i) in pathD"
-            :key="d"
-            :d="d"
-          />
-        </g>
-
-        <radialGradient
-          :id="gradientId"
-          cx="50%" cy="50%" r="50%"
-        >
-          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
-          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
-        </radialGradient>
-      </defs>
-
-      <circle
-        v-for="r in circleR"
-        :key="r"
-        :r="r"
-        :cx="x"
-        :cy="y"
-        :stroke="mergedColor[1]"
-        :stroke-width="0.5"
-        fill="transparent"
-      />
-
-      <circle
-        r="1"
-        :cx="x"
-        :cy="y"
-        stroke="transparent"
-        :fill="`url(#${gradientId})`"
-      >
-        <animate
-          attributeName="r"
-          :values="`1;${width / 2}`"
-          :dur="`${haloDur}s`"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="opacity"
-          values="1;0"
-          :dur="`${haloDur}s`"
-          repeatCount="indefinite"
-        />
-      </circle>
-
-      <circle
-        r="2"
-        :cx="x"
-        :cy="y"
-        :fill="mergedColor[1]"
-      />
-
-      <g v-if="showSplitLine">
-        <polyline
-          v-for="p in splitLinePoints"
-          :key="p"
-          :points="p"
-          :stroke="mergedColor[1]"
-          :stroke-width="0.5"
-          opacity="0.5"
-        />
-      </g>
-
-      <path
-        v-for="d in arcD"
-        :key="d"
-        :d="d"
-        :stroke="mergedColor[1]"
-        stroke-width="2"
-        fill="transparent"
-      />
-
-      <use :xlink:href="`#${gId}`">
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          :values="`0, ${x} ${y};360, ${x} ${y}`"
-          :dur="`${scanDur}s`"
-          repeatCount="indefinite"
-        />
-      </use>
-    </svg>
-
-    <div class="decoration-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
-
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
-
-import { fade } from '@jiaminghi/color'
-
-export default {
-  name: 'DvDecoration12',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    },
-    /**
-     * @description Scan animation dur
-     */
-    scanDur: {
-      type: Number,
-      default: 3
-    },
-    /**
-     * @description Halo animation dur
-     */
-    haloDur: {
-      type: Number,
-      default: 2
-    }
-  },
-  data () {
-    const id = uuid()
-    return {
-      ref: 'decoration-12',
-      gId: `decoration-12-g-${id}`,
-      gradientId: `decoration-12-gradient-${id}`,
-
-      defaultColor: ['#2783ce', '#2cf7fe'],
-
-      mergedColor: [],
-
-      pathD: [],
-
-      pathColor: [],
-
-      circleR: [],
-
-      splitLinePoints: [],
-
-      arcD: [],
-
-      segment: 30,
-
-      sectorAngle: Math.PI / 3,
-
-      ringNum: 3,
-
-      ringWidth: 1,
-
-      showSplitLine: true
-    }
-  },
-  watch: {
-    color () {
-      const { mergeColor } = this
-
-      mergeColor()
-    }
-  },
-  computed: {
-    x () {
-      const { width } = this
-
-      return width / 2
-    },
-    y () {
-      const { height } = this
-
-      return height / 2
-    }
-  },
-  methods: {
-    init () {
-      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
-
-      mergeColor()
-
-      calcPathD()
-
-      calcPathColor()
-
-      calcCircleR()
-
-      calcSplitLinePoints()
-
-      calcArcD()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    },
-    calcPathD () {
-      const { x, y, width, segment, sectorAngle } = this
-
-      const startAngle = -Math.PI / 2
-      const angleGap = sectorAngle / segment
-      const r = width / 4
-      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
-
-      this.pathD = new Array(segment)
-        .fill('')
-        .map((_, i) => {
-          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
-          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
-          lastEndPoints = endPoints
-
-          return d
-        })
-    },
-    calcPathColor () {
-      const { mergedColor: [color], segment } = this
-
-      const colorGap = 100 / (segment - 1)
-
-      this.pathColor = new Array(segment)
-        .fill(color)
-        .map((_, i) => fade(color, 100 - i * colorGap))
-    },
-    calcCircleR () {
-      const { segment, ringNum, width, ringWidth } = this
-
-      const radiusGap = (width / 2 - ringWidth / 2) / ringNum
-
-      this.circleR = new Array(ringNum)
-        .fill(0)
-        .map((_, i) => radiusGap * (i + 1))
-    },
-    calcSplitLinePoints () {
-      const { x, y, width } = this
-
-      const angleGap = Math.PI / 6
-      const r = width / 2
-
-      this.splitLinePoints = new Array(6)
-        .fill('')
-        .map((_, i) => {
-          const startAngle = angleGap * (i + 1)
-          const endAngle = startAngle + Math.PI
-          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
-          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
-
-          return `${startPoint.join(',')} ${endPoint.join(',')}`
-        })
-    },
-    calcArcD () {
-      const { x, y, width } = this
-
-      const angleGap = Math.PI / 6
-      const r = width / 2 - 1
-
-      this.arcD = new Array(4)
-        .fill('')
-        .map((_, i) => {
-          const startAngle = angleGap * (3 * i + 1)
-          const endAngle = startAngle + angleGap
-          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
-          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
-
-          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
-        })
-    },
-    afterAutoResizeMixinInit () {
-      const { init } = this
-
-      init()
-    },
-    fade
-  }
-}
-</script>

lib/components/decoration2/src/main.vue

@@ -6,7 +6,7 @@
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
           :to="reverse ? height : width"
-          :dur="`${dur}s`"
+          dur="6s"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -19,7 +19,7 @@
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
           :to="reverse ? height : width"
-          :dur="`${dur}s`"
+          dur="6s"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -48,10 +48,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    dur: {
-      type: Number,
-      default: 6
     }
   },
   data () {

lib/components/decoration3/src/main.vue

@@ -2,11 +2,25 @@
   <div class="dv-decoration-3" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
 
-      <template v-for="(point, i) in points" :key="i">
+      <template
-        <rect :fill="mergedColor[0]" :x="point[0] - halfPointSideLength" :y="point[1] - halfPointSideLength"
+        v-for="(point, i) in points"
-          :width="pointSideLength" :height="pointSideLength">
+      >
-          <animate v-if="Math.random() > 0.6" attributeName="fill" :values="`${mergedColor.join(';')}`"
+        <rect
-            :dur="Math.random() + 1 + 's'" :begin="Math.random() * 2" repeatCount="indefinite" />
+          :key="i"
+          :fill="mergedColor[0]"
+          :x="point[0] - halfPointSideLength"
+          :y="point[1] - halfPointSideLength"
+          :width="pointSideLength"
+          :height="pointSideLength"
+        >
+          <animate
+            v-if="Math.random() > 0.6"
+            attributeName="fill"
+            :values="`${mergedColor.join(';')}`"
+            :dur="Math.random() + 1 + 's'"
+            :begin="Math.random() * 2"
+            repeatCount="indefinite"
+          />
         </rect>
       </template>
     </svg>
@@ -14,101 +28,101 @@
 </template>
 
 <script>
-  import autoResize from '../../../mixin/autoResize'
+import autoResize from '../../../mixin/autoResize'
 
-  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-  export default {
+export default {
-    name: 'DvDecoration3',
+  name: 'DvDecoration3',
-    mixins: [autoResize],
+  mixins: [autoResize],
-    props: {
+  props: {
-      color: {
+    color: {
-        type: Array,
+      type: Array,
-        default: () => ([])
+      default: () => ([])
-      }
+    }
-    },
+  },
-    data() {
+  data () {
-      const pointSideLength = 7
+    const pointSideLength = 7
 
-      return {
+    return {
-        ref: 'decoration-3',
+      ref: 'decoration-3',
 
-        svgWH: [300, 35],
+      svgWH: [300, 35],
 
-        svgScale: [1, 1],
+      svgScale: [1, 1],
 
-        rowNum: 2,
+      rowNum: 2,
-        rowPoints: 25,
+      rowPoints: 25,
 
-        pointSideLength,
+      pointSideLength,
-        halfPointSideLength: pointSideLength / 2,
+      halfPointSideLength: pointSideLength / 2,
 
-        points: [],
+      points: [],
 
-        defaultColor: ['#7acaec', 'transparent'],
+      defaultColor: ['#7acaec', 'transparent'],
 
-        mergedColor: []
+      mergedColor: []
-      }
+    }
-    },
+  },
-    watch: {
+  watch: {
-      color() {
+    color () {
-        const { mergeColor } = this
-
-        mergeColor()
-      }
-    },
-    methods: {
-      afterAutoResizeMixinInit() {
-        const { calcSVGData } = this
-
-        calcSVGData()
-      },
-      calcSVGData() {
-        const { calcPointsPosition, calcScale } = this
-
-        calcPointsPosition()
-
-        calcScale()
-      },
-      calcPointsPosition() {
-        const { svgWH, rowNum, rowPoints } = this
-
-        const [w, h] = svgWH
-
-        const horizontalGap = w / (rowPoints + 1)
-        const verticalGap = h / (rowNum + 1)
-
-        let points = new Array(rowNum).fill(0).map((foo, i) =>
-          new Array(rowPoints).fill(0).map((foo, j) => [
-            horizontalGap * (j + 1), verticalGap * (i + 1)
-          ]))
-
-        this.points = points.reduce((all, item) => [...all, ...item], [])
-      },
-      calcScale() {
-        const { width, height, svgWH } = this
-
-        const [w, h] = svgWH
-
-        this.svgScale = [width / w, height / h]
-      },
-      onResize() {
-        const { calcSVGData } = this
-
-        calcSVGData()
-      },
-      mergeColor() {
-        const { color, defaultColor } = this
-
-        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-      }
-    },
-    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcScale()
+    },
+    calcPointsPosition () {
+      const { svgWH, rowNum, rowPoints } = this
+
+      const [w, h] = svgWH
+
+      const horizontalGap = w / (rowPoints + 1)
+      const verticalGap = h / (rowNum + 1)
+
+      let points = new Array(rowNum).fill(0).map((foo, i) =>
+        new Array(rowPoints).fill(0).map((foo, j) => [
+          horizontalGap * (j + 1), verticalGap * (i + 1)
+        ]))
+
+      this.points = points.reduce((all, item) => [...all, ...item], [])
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
+}
 </script>

lib/components/decoration4/src/main.css

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

lib/components/decoration4/src/main.vue

@@ -2,7 +2,7 @@
   <div class="dv-decoration-4" :ref="ref">
     <div
       :class="`container ${reverse ? 'reverse' : 'normal'}`"
-      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
+      :style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
@@ -40,10 +40,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    dur: {
-      type: Number,
-      default: 3
     }
   },
   data () {

lib/components/decoration5/src/main.vue

@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          :dur="`${dur}s`"
+          dur="1.2s"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          :dur="`${dur}s`"
+          dur="1.2s"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -59,10 +59,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    dur: {
-      type: Number,
-      default: 1.2
     }
   },
   data () {

lib/components/decoration6/src/main.vue

@@ -1,16 +1,37 @@
 <template>
   <div class="dv-decoration-6" :ref="ref">
     <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
-      <template v-for="(point, i) in points" :key="i">
+      <template
-        <rect :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]" :x="point[0] - halfRectWidth"
+        v-for="(point, i) in points"
-          :y="point[1] - heights[i] / 2" :width="rectWidth" :height="heights[i]">
+      >
-          <animate attributeName="y"
+        <rect
+          :key="i"
+          :fill="mergedColor[Math.random() > 0.5 ? 0 : 1]"
+          :x="point[0] - halfRectWidth"
+          :y="point[1] - heights[i] / 2"
+          :width="rectWidth"
+          :height="heights[i]"
+        >
+          <animate
+            attributeName="y"
             :values="`${point[1] - minHeights[i] / 2};${point[1] - heights[i] / 2};${point[1] - minHeights[i] / 2}`"
-            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            :dur="`${randoms[i]}s`"
-            begin="0s" repeatCount="indefinite" />
+            keyTimes="0;0.5;1"
-          <animate attributeName="height" :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+            calcMode="spline"
-            :dur="`${randoms[i]}s`" keyTimes="0;0.5;1" calcMode="spline" keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
-            begin="0s" repeatCount="indefinite" />
+            begin="0s"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="height"
+            :values="`${minHeights[i]};${heights[i]};${minHeights[i]}`"
+            :dur="`${randoms[i]}s`"
+            keyTimes="0;0.5;1"
+            calcMode="spline"
+            keySplines="0.42,0,0.58,1;0.42,0,0.58,1"
+            begin="0s"
+            repeatCount="indefinite"
+          />
         </rect>
       </template>
     </svg>
@@ -18,115 +39,115 @@
 </template>
 
 <script>
-  import autoResize from '../../../mixin/autoResize'
+import autoResize from '../../../mixin/autoResize'
 
-  import { randomExtend } from '../../../util'
+import { randomExtend } from '../../../util'
 
-  import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
-  import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-  export default {
+export default {
-    name: 'DvDecoration6',
+  name: 'DvDecoration6',
-    mixins: [autoResize],
+  mixins: [autoResize],
-    props: {
+  props: {
-      color: {
+    color: {
-        type: Array,
+      type: Array,
-        default: () => ([])
+      default: () => ([])
-      }
+    }
-    },
+  },
-    data() {
+  data () {
-      const rectWidth = 7
+    const rectWidth = 7
 
-      return {
+    return {
-        ref: 'decoration-6',
+      ref: 'decoration-6',
 
-        svgWH: [300, 35],
+      svgWH: [300, 35],
 
-        svgScale: [1, 1],
+      svgScale: [1, 1],
 
-        rowNum: 1,
+      rowNum: 1,
-        rowPoints: 40,
+      rowPoints: 40,
 
-        rectWidth,
+      rectWidth,
-        halfRectWidth: rectWidth / 2,
+      halfRectWidth: rectWidth / 2,
 
-        points: [],
+      points: [],
-        heights: [],
+      heights: [],
-        minHeights: [],
+      minHeights: [],
-        randoms: [],
+      randoms: [],
 
-        defaultColor: ['#7acaec', '#7acaec'],
+      defaultColor: ['#7acaec', '#7acaec'],
 
-        mergedColor: []
+      mergedColor: []
-      }
+    }
-    },
+  },
-    watch: {
+  watch: {
-      color() {
+    color () {
-        const { mergeColor } = this
-
-        mergeColor()
-      }
-    },
-    methods: {
-      afterAutoResizeMixinInit() {
-        const { calcSVGData } = this
-
-        calcSVGData()
-      },
-      calcSVGData() {
-        const { calcPointsPosition, calcScale } = this
-
-        calcPointsPosition()
-
-        calcScale()
-      },
-      calcPointsPosition() {
-        const { svgWH, rowNum, rowPoints } = this
-
-        const [w, h] = svgWH
-
-        const horizontalGap = w / (rowPoints + 1)
-        const verticalGap = h / (rowNum + 1)
-
-        let points = new Array(rowNum).fill(0).map((foo, i) =>
-          new Array(rowPoints).fill(0).map((foo, j) => [
-            horizontalGap * (j + 1), verticalGap * (i + 1)
-          ]))
-
-        this.points = points.reduce((all, item) => [...all, ...item], [])
-        const heights = this.heights = new Array(rowNum * rowPoints)
-          .fill(0).map(foo =>
-            Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
-
-        this.minHeights = new Array(rowNum * rowPoints)
-          .fill(0).map((foo, i) => heights[i] * Math.random())
-
-        this.randoms = new Array(rowNum * rowPoints)
-          .fill(0).map(foo => Math.random() + 1.5)
-      },
-      calcScale() {
-        const { width, height, svgWH } = this
-
-        const [w, h] = svgWH
-
-        this.svgScale = [width / w, height / h]
-      },
-      onResize() {
-        const { calcSVGData } = this
-
-        calcSVGData()
-      },
-      mergeColor() {
-        const { color, defaultColor } = this
-
-        this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-      }
-    },
-    mounted() {
       const { mergeColor } = this
 
       mergeColor()
     }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcScale()
+    },
+    calcPointsPosition () {
+      const { svgWH, rowNum, rowPoints } = this
+
+      const [w, h] = svgWH
+
+      const horizontalGap = w / (rowPoints + 1)
+      const verticalGap = h / (rowNum + 1)
+
+      let points = new Array(rowNum).fill(0).map((foo, i) =>
+        new Array(rowPoints).fill(0).map((foo, j) => [
+          horizontalGap * (j + 1), verticalGap * (i + 1)
+        ]))
+
+      this.points = points.reduce((all, item) => [...all, ...item], [])
+      const heights = this.heights = new Array(rowNum * rowPoints)
+        .fill(0).map(foo =>
+          Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
+
+      this.minHeights = new Array(rowNum * rowPoints)
+        .fill(0).map((foo, i) => heights[i] * Math.random())
+
+      this.randoms = new Array(rowNum * rowPoints)
+        .fill(0).map(foo => Math.random() + 1.5)
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
+}
 </script>

lib/components/decoration9/src/main.vue

@@ -85,7 +85,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -107,11 +106,11 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${id}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

lib/components/digitalFlop/src/main.vue

@@ -53,12 +53,6 @@ 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}
@@ -67,11 +61,6 @@ export default {
           fontSize: 30,
           fill: '#3de7c9'
         },
-        /**
-         * @description Number formatter
-         * @type {Null|Function}
-         */
-        formatter: undefined,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -135,7 +124,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
+      const { number, content, toFixed, textAlign } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -148,9 +137,7 @@ export default {
         number,
         content,
         toFixed,
-        position,
+        position
-        rowGap,
-        formatter
       }
     },
     getStyle () {

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, uuid } from '../../../util/index'
+import { randomExtend, getPointDistance } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
@@ -171,14 +171,14 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${id}`,
+      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${id}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${id}`,
+      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${id}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

lib/components/flylineChartEnhanced/index.js

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

lib/components/flylineChartEnhanced/src/main.css

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

lib/components/flylineChartEnhanced/src/main.vue

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

lib/components/percentPond/src/main.vue

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

lib/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="`${headerItem}${i}`"
+        :key="headerItem + i"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="`${row.toString()}${row.scroll}`"
+        :key="row.toString() + row.scroll"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,13 +33,11 @@
         <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('click', ri, ci, row, ceil)"
+          @click="emitEvent(ri, ci, row, ceil)"
-          @mouseenter="handleHover(true, ri, ci, row, ceil)"
-          @mouseleave="handleHover(false)"
         />
 
       </div>
@@ -148,14 +146,7 @@ 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,
@@ -178,9 +169,7 @@ export default {
 
       animationHandler: '',
 
-      updater: 0,
+      updater: 0
-
-      needCalc: false
     }
   },
   watch: {
@@ -189,24 +178,10 @@ 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
 
@@ -337,14 +312,6 @@ 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
@@ -363,7 +330,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.rows = rows
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -388,28 +355,15 @@ export default {
 
       clearTimeout(animationHandler)
     },
-    emitEvent (type, ri, ci, row, ceil) {
+    emitEvent (ri, ci, row, ceil) {
       const { ceils, rowIndex } = row
 
-      this.$emit(type, {
+      this.$emit('click', {
         row: ceils,
         ceil,
         rowIndex,
         columnIndex: ci
       })
-    },
-    updateRows(rows, animationIndex) {
-      const { mergedConfig, animationHandler, animation } = this
-
-      this.mergedConfig = {
-        ...mergedConfig,
-        data: [...rows]
-      }
-
-      this.needCalc = true
-
-      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
-      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

lib/components/scrollRankingBoard/src/main.vue

@@ -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">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,13 +82,7 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true,
+        sort: true
-        /**
-         * @description Value formatter
-         * @type {Function}
-         * @default valueFormatter = null
-         */
-        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -158,20 +152,10 @@ 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
 
-      // abs of max
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
-      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
 
@@ -214,7 +198,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, rowNum + 1)
+      this.rows = rows
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -238,7 +222,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    },
+    }
   },
   destroyed () {
     const { stopAnimation } = this

lib/components/waterLevelPond/src/main.vue

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

lib/index.js

@@ -21,7 +21,6 @@ export { default as conicalColumnChart } from './components/conicalColumnChart/i
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
 export { default as decoration11 } from './components/decoration11/index'
-export { default as decoration12 } from './components/decoration12/index'
 export { default as decoration2 } from './components/decoration2/index'
 export { default as decoration3 } from './components/decoration3/index'
 export { default as decoration4 } from './components/decoration4/index'
@@ -32,7 +31,6 @@ 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'
@@ -72,7 +70,6 @@ import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
 import decoration11 from './components/decoration11/index'
-import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
@@ -82,7 +79,6 @@ 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'
@@ -122,7 +118,6 @@ export default function (Vue) {
   Vue.use(decoration9)
   Vue.use(decoration10)
   Vue.use(decoration11)
-  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)
@@ -132,7 +127,6 @@ export default function (Vue) {
   Vue.use(waterLevelPond)
   Vue.use(percentPond)
   Vue.use(flylineChart)
-  Vue.use(flylineChartEnhanced)
   Vue.use(conicalColumnChart)
   Vue.use(digitalFlop)
   Vue.use(scrollBoard)

lib/mixin/autoResize.js

@@ -29,17 +29,11 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(_ => {
+        $nextTick(e => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom ? dom.clientWidth : 0
+          this.width = dom.clientWidth
-          this.height = dom ? dom.clientHeight : 0
+          this.height = dom.clientHeight
-
-          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()
 
@@ -62,8 +56,6 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
-      if (!domObserver) return
-
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

lib/util/index.js

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

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "@ykxiao/demu-mes-data-v",
+  "name": "@jiaminghi/data-view",
-  "version": "1.0.1",
+  "version": "2.6.0",
-  "author": "Longlong <long@qq.com>",
+  "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://git.tool.dwoodauto.com/ykxiao/DemuMesDataV.git"
+    "url": "https://github.com/DataV-Team/DataV.git"
   },
   "scripts": {
     "build": "node build/index.js",

src/components/activeRingChart/src/main.vue

@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data() {
+  data () {
     return {
       defaultConfig: {
         /**
@@ -78,16 +78,6 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
-        /**
-         * @description Digital flop toFixed
-         * @type {Number}
-         */
-        digitalFlopToFixed: 0,
-        /**
-         * @description Digital flop unit
-         * @type {String}
-         */
-        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -99,13 +89,7 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50,
+        animationFrame: 50
-        /**
-         * @description showOriginValue
-         * @type {Boolean}
-         * @default showOriginValue = false
-         */
-        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -118,48 +102,33 @@ export default {
     }
   },
   computed: {
-    digitalFlop() {
+    digitalFlop () {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const {
+      const { digitalFlopStyle, data } = mergedConfig
-        digitalFlopStyle,
-        digitalFlopToFixed,
-        data,
-        showOriginValue,
-        digitalFlopUnit
-      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      let displayValue
+      const sum = value.reduce((all, v) => all + v, 0)
 
-      if (showOriginValue) {
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
-        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: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
+        content: '{nt}%',
-        number: [displayValue],
+        number: [percent],
-        style: digitalFlopStyle,
+        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 ''
@@ -168,7 +137,7 @@ export default {
     }
   },
   watch: {
-    config() {
+    config () {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -181,7 +150,7 @@ export default {
     }
   },
   methods: {
-    init() {
+    init () {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -190,20 +159,17 @@ 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(
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-        deepClone(defaultConfig, true),
-        config || {}
-      )
     },
-    setRingOption() {
+    setRingOption () {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
@@ -212,7 +178,7 @@ export default {
 
       ringAnimation()
     },
-    getRingOption() {
+    getRingOption () {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -234,7 +200,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius(active = false) {
+    getRealRadius (active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -245,15 +211,14 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number')
+      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
-        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()
@@ -286,12 +251,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted() {
+  mounted () {
     const { init } = this
 
     init()
   },
-  beforeDestroy() {
+  beforeDestroy () {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

src/components/borderBox1/src/main.vue

@@ -1,16 +1,5 @@
 <template>
-  <div class="dv-border-box-1" :ref="ref">
+  <div class="dv-border-box-1">
-    <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"
@@ -63,29 +52,20 @@
 </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'],

src/components/borderBox10/src/main.vue

@@ -1,18 +1,11 @@
 <template>
-  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+  <div class="dv-border-box-10" :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} dv-border-svg-container`"
+      :class="`${item} border`"
     >
       <polygon
         :fill="mergedColor[1]"
@@ -27,29 +20,20 @@
 </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'],
@@ -86,7 +70,7 @@ export default {
   height: 100%;
   border-radius: 6px;
 
-  .dv-border-svg-container {
+  .border {
     position: absolute;
     display: block;
   }

src/components/borderBox11/src/main.vue

@@ -14,13 +14,6 @@
         </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})`"
@@ -216,7 +209,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -239,17 +231,13 @@ export default {
     title: {
       type: String,
       default: ''
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${id}`,
+      filterId: `borderr-box-11-filterId-${timestamp}`,
 
       defaultColor: ['#8aaafb', '#1f33a2'],
 
@@ -292,7 +280,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    & > polyline {
+    polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox12/src/main.vue

@@ -28,7 +28,7 @@
 
       <path
         v-if="width && height"
-        :fill="backgroundColor"
+        fill="transparent"
         stroke-width="2"
         :stroke="mergedColor[0]"
         :d="`
@@ -92,7 +92,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -107,17 +106,13 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = +new Date()
     return {
       ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${id}`,
+      filterId: `borderr-box-12-filterId-${timestamp}`,
 
       defaultColor: ['#2e6099', '#7ce7fd'],
 

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="backgroundColor"
+        fill="transparent"
         :stroke="mergedColor[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -54,13 +54,10 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
+    const timestamp = +new Date()
     return {
       ref: 'border-box-13',
 

src/components/borderBox2/src/main.vue

@@ -1,10 +1,6 @@
 <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`"
@@ -39,10 +35,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -89,7 +81,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    & > polyline {
+    polyline {
       fill: none;
       stroke-width: 1;
     }

src/components/borderBox3/src/main.vue

@@ -1,10 +1,6 @@
 <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`"
@@ -43,10 +39,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -93,7 +85,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    & > polyline {
+    polyline {
       fill: none;
     }
   }

src/components/borderBox4/src/main.vue

@@ -1,11 +1,6 @@
 <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}
@@ -51,10 +46,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -105,7 +96,7 @@ export default {
     top: 0px;
     left: 0px;
 
-    & > polyline {
+    polyline {
       fill: none;
     }
   }

src/components/borderBox5/src/main.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+    <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]"
@@ -47,10 +43,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -94,14 +86,14 @@ export default {
     transform: rotate(180deg);
   }
 
-  .dv-border-svg-container {
+  .dv-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    & > polyline {
+    polyline {
       fill: none;
     }
   }

src/components/borderBox6/src/main.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <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" />
@@ -43,10 +39,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -86,14 +78,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-border-svg-container {
+  .dv-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    & > polyline {
+    polyline {
       fill: none;
       stroke-width: 1;
     }

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]}; background-color: ${backgroundColor}`"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}`"
     :ref="ref"
   >
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
       <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
@@ -37,10 +37,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
@@ -80,14 +76,14 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-border-svg-container {
+  .dv-svg-container {
     position: absolute;
     top: 0px;
     left: 0px;
     width: 100%;
     height: 100%;
 
-    & > polyline {
+    polyline {
       fill: none;
       stroke-linecap: round;
     }

src/components/borderBox8/src/main.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
-          :d="pathD"
+          :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`"
           fill="transparent"
         />
         <radialGradient
@@ -25,7 +25,7 @@
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
               :dur="`${dur}s`"
-              :path="pathD"
+              :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`"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -33,8 +33,6 @@
         </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"
@@ -65,7 +63,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -82,23 +79,15 @@ export default {
     dur: {
       type: Number,
       default: 3
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
-    },
-    reverse: {
-      type: Boolean,
-      default: false
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${id}`,
+      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${id}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${id}`,
+      mask: `border-box-8-mask-${timestamp}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 
@@ -110,13 +99,6 @@ 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: {
@@ -147,7 +129,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-border-svg-container {
+  svg {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/borderBox9/src/main.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-border-svg-container" :width="width" :height="height">
+    <svg class="dv-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
           <animate
@@ -105,15 +105,6 @@
         </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>
 
@@ -125,7 +116,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -138,19 +128,15 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    backgroundColor: {
-      type: String,
-      default: 'transparent'
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${id}`,
+      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${id}`,
+      maskId: `border-box-9-mask-${timestamp}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 
@@ -185,7 +171,7 @@ export default {
   width: 100%;
   height: 100%;
 
-  .dv-border-svg-container {
+  svg {
     position: absolute;
     width: 100%;
     height: 100%;

src/components/capsuleChart/src/main.vue

@@ -7,23 +7,16 @@
       </div>
 
       <div class="capsule-container">
-        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+        <div
-          <div
+          class="capsule-item"
-            class="capsule-item-column"
+          v-for="(capsule, index) in capsuleLength"
-            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          :key="index"
-          >
+        >
-            <div
+          <div :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
+          <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
-            v-for="(label, index) in labelData"
-            :key="label + index"
-          >{{ label }}</div>
         </div>
       </div>
 
@@ -45,7 +38,7 @@ export default {
       default: () => ({})
     }
   },
-  data() {
+  data () {
     return {
       defaultConfig: {
         /**
@@ -61,61 +54,42 @@ 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: [
+        colors: ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293'],
-          '#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: [],
-      capsuleValue: [],
+      labelData: []
-      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(
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
-        deepClone(defaultConfig, true),
-        config || {}
-      )
     },
-    calcCapsuleLengthAndLabelData() {
+    calcCapsuleLengthAndLabelData () {
       const { data } = this.mergedConfig
 
       if (!data.length) return
@@ -124,24 +98,14 @@ export default {
 
       const maxValue = Math.max(...capsuleValue)
 
-      this.capsuleValue = capsuleValue
+      this.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
-
-      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
 
       const oneFifth = maxValue / 5
 
-      const labelData = Array.from(
+      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
-        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()
@@ -186,30 +150,21 @@ export default {
     margin: 5px 0px;
     border-radius: 5px;
 
-    .capsule-item-column {
+    div {
-      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;
-    justify-content: space-between;
+    flex-direction: row;
     align-items: center;
+    justify-content: space-between;
   }
 
   .unit-text {

src/components/charts/src/main.vue

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

src/components/decoration10/src/main.vue

@@ -147,7 +147,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -163,17 +162,17 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${id}`,
+      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${id}`,
+      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${id}`,
+      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${id}`,
+      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${id}`,
+      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${id}`,
+      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${id}`,
+      animationId7: `d10ani7${timestamp}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 

src/components/decoration11/src/main.vue

@@ -72,6 +72,7 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-11',
 

src/components/decoration12/index.js

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

src/components/decoration12/src/main.vue

@@ -1,304 +0,0 @@
-<template>
-  <div class="dv-decoration-12" :ref="ref">
-    <svg :width="width" :height="height">
-      <defs>
-        <g :id="gId">
-          <path
-            :stroke="pathColor[i]"
-            :stroke-width="width / 2"
-            fill="transparent"
-            v-for="(d, i) in pathD"
-            :key="d"
-            :d="d"
-          />
-        </g>
-
-        <radialGradient
-          :id="gradientId"
-          cx="50%" cy="50%" r="50%"
-        >
-          <stop offset="0%" stop-color="transparent" stop-opacity="1" />
-          <stop offset="100%" :stop-color="fade(mergedColor[1] || defaultColor[1], 30)" stop-opacity="1" />
-        </radialGradient>
-      </defs>
-
-      <circle
-        v-for="r in circleR"
-        :key="r"
-        :r="r"
-        :cx="x"
-        :cy="y"
-        :stroke="mergedColor[1]"
-        :stroke-width="0.5"
-        fill="transparent"
-      />
-
-      <circle
-        r="1"
-        :cx="x"
-        :cy="y"
-        stroke="transparent"
-        :fill="`url(#${gradientId})`"
-      >
-        <animate
-          attributeName="r"
-          :values="`1;${width / 2}`"
-          :dur="`${haloDur}s`"
-          repeatCount="indefinite"
-        />
-        <animate
-          attributeName="opacity"
-          values="1;0"
-          :dur="`${haloDur}s`"
-          repeatCount="indefinite"
-        />
-      </circle>
-
-      <circle
-        r="2"
-        :cx="x"
-        :cy="y"
-        :fill="mergedColor[1]"
-      />
-
-      <g v-if="showSplitLine">
-        <polyline
-          v-for="p in splitLinePoints"
-          :key="p"
-          :points="p"
-          :stroke="mergedColor[1]"
-          :stroke-width="0.5"
-          opacity="0.5"
-        />
-      </g>
-
-      <path
-        v-for="d in arcD"
-        :key="d"
-        :d="d"
-        :stroke="mergedColor[1]"
-        stroke-width="2"
-        fill="transparent"
-      />
-
-      <use :xlink:href="`#${gId}`">
-        <animateTransform
-          attributeName="transform"
-          type="rotate"
-          :values="`0, ${x} ${y};360, ${x} ${y}`"
-          :dur="`${scanDur}s`"
-          repeatCount="indefinite"
-        />
-      </use>
-    </svg>
-
-    <div class="decoration-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
-
-import { deepMerge } from '@jiaminghi/charts/lib/util/index'
-
-import { deepClone, getCircleRadianPoint } from '@jiaminghi/c-render/lib/plugin/util'
-
-import { fade } from '@jiaminghi/color'
-
-export default {
-  name: 'DvDecoration12',
-  mixins: [autoResize],
-  props: {
-    color: {
-      type: Array,
-      default: () => ([])
-    },
-    /**
-     * @description Scan animation dur
-     */
-    scanDur: {
-      type: Number,
-      default: 3
-    },
-    /**
-     * @description Halo animation dur
-     */
-    haloDur: {
-      type: Number,
-      default: 2
-    }
-  },
-  data () {
-    const id = uuid()
-    return {
-      ref: 'decoration-12',
-      gId: `decoration-12-g-${id}`,
-      gradientId: `decoration-12-gradient-${id}`,
-
-      defaultColor: ['#2783ce', '#2cf7fe'],
-
-      mergedColor: [],
-
-      pathD: [],
-
-      pathColor: [],
-
-      circleR: [],
-
-      splitLinePoints: [],
-
-      arcD: [],
-
-      segment: 30,
-
-      sectorAngle: Math.PI / 3,
-
-      ringNum: 3,
-
-      ringWidth: 1,
-
-      showSplitLine: true
-    }
-  },
-  watch: {
-    color () {
-      const { mergeColor } = this
-
-      mergeColor()
-    }
-  },
-  computed: {
-    x () {
-      const { width } = this
-
-      return width / 2
-    },
-    y () {
-      const { height } = this
-
-      return height / 2
-    }
-  },
-  methods: {
-    init () {
-      const { mergeColor, calcPathD, calcPathColor, calcCircleR, calcSplitLinePoints, calcArcD } = this
-
-      mergeColor()
-
-      calcPathD()
-
-      calcPathColor()
-
-      calcCircleR()
-
-      calcSplitLinePoints()
-
-      calcArcD()
-    },
-    mergeColor () {
-      const { color, defaultColor } = this
-
-      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
-    },
-    calcPathD () {
-      const { x, y, width, segment, sectorAngle } = this
-
-      const startAngle = -Math.PI / 2
-      const angleGap = sectorAngle / segment
-      const r = width / 4
-      let lastEndPoints = getCircleRadianPoint(x, y, r, startAngle)
-
-      this.pathD = new Array(segment)
-        .fill('')
-        .map((_, i) => {
-          const endPoints = getCircleRadianPoint(x, y, r, startAngle - (i + 1) * angleGap).map(_ => _.toFixed(5))
-          const d = `M${lastEndPoints.join(',')} A${r}, ${r} 0 0 0 ${endPoints.join(',')}`
-          lastEndPoints = endPoints
-
-          return d
-        })
-    },
-    calcPathColor () {
-      const { mergedColor: [color], segment } = this
-
-      const colorGap = 100 / (segment - 1)
-
-      this.pathColor = new Array(segment)
-        .fill(color)
-        .map((_, i) => fade(color, 100 - i * colorGap))
-    },
-    calcCircleR () {
-      const { segment, ringNum, width, ringWidth } = this
-
-      const radiusGap = (width / 2 - ringWidth / 2) / ringNum
-
-      this.circleR = new Array(ringNum)
-        .fill(0)
-        .map((_, i) => radiusGap * (i + 1))
-    },
-    calcSplitLinePoints () {
-      const { x, y, width } = this
-
-      const angleGap = Math.PI / 6
-      const r = width / 2
-
-      this.splitLinePoints = new Array(6)
-        .fill('')
-        .map((_, i) => {
-          const startAngle = angleGap * (i + 1)
-          const endAngle = startAngle + Math.PI
-          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
-          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
-
-          return `${startPoint.join(',')} ${endPoint.join(',')}`
-        })
-    },
-    calcArcD () {
-      const { x, y, width } = this
-
-      const angleGap = Math.PI / 6
-      const r = width / 2 - 1
-
-      this.arcD = new Array(4)
-        .fill('')
-        .map((_, i) => {
-          const startAngle = angleGap * (3 * i + 1)
-          const endAngle = startAngle + angleGap
-          const startPoint = getCircleRadianPoint(x, y, r, startAngle)
-          const endPoint = getCircleRadianPoint(x, y, r, endAngle)
-
-          return `M${startPoint.join(',')} A${x}, ${y} 0 0 1 ${endPoint.join(',')}`
-        })
-    },
-    afterAutoResizeMixinInit () {
-      const { init } = this
-
-      init()
-    },
-    fade
-  }
-}
-</script>
-
-<style lang="less">
-.dv-decoration-12 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  display: flex;
-
-  .decoration-content {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-</style>

src/components/decoration2/src/main.vue

@@ -6,7 +6,7 @@
           :attributeName="reverse ? 'height' : 'width'"
           from="0"
           :to="reverse ? height : width"
-          :dur="`${dur}s`"
+          dur="6s"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -19,7 +19,7 @@
           :attributeName="reverse ? 'y' : 'x'"
           from="0"
           :to="reverse ? height : width"
-          :dur="`${dur}s`"
+          dur="6s"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -48,10 +48,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    dur: {
-      type: Number,
-      default: 6
     }
   },
   data () {

src/components/decoration4/src/main.vue

@@ -2,7 +2,7 @@
   <div class="dv-decoration-4" :ref="ref">
     <div
       :class="`container ${reverse ? 'reverse' : 'normal'}`"
-      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
+      :style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
@@ -40,10 +40,6 @@ export default {
     reverse: {
       type: Boolean,
       default: false
-    },
-    dur: {
-      type: Number,
-      default: 3
     }
   },
   data () {
@@ -87,26 +83,23 @@ export default {
     display: flex;
     overflow: hidden;
     position: absolute;
-    flex: 1;
   }
 
   .normal {
-    animation: ani-height ease-in-out infinite;
+    height: 0% !important;
+    animation: ani-height 3s ease-in-out infinite;
     left: 50%;
     margin-left: -2px;
   }
 
   .reverse {
-    animation: ani-width ease-in-out infinite;
+    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%;
     }
@@ -117,10 +110,6 @@ export default {
   }
 
   @keyframes ani-width {
-    0% {
-      width: 0%;
-    }
-    
     70% {
       width: 100%;
     }

src/components/decoration5/src/main.vue

@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          :dur="`${dur}s`"
+          dur="1.2s"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          :dur="`${dur}s`"
+          dur="1.2s"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -59,10 +59,6 @@ export default {
     color: {
       type: Array,
       default: () => ([])
-    },
-    dur: {
-      type: Number,
-      default: 1.2
     }
   },
   data () {

src/components/decoration9/src/main.vue

@@ -85,7 +85,6 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
-import { uuid } from '../../../util/index'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -107,11 +106,11 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${id}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

src/components/digitalFlop/src/main.vue

@@ -53,12 +53,6 @@ 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}
@@ -67,11 +61,6 @@ export default {
           fontSize: 30,
           fill: '#3de7c9'
         },
-        /**
-         * @description Number formatter
-         * @type {Null|Function}
-         */
-        formatter: undefined,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -135,7 +124,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
+      const { number, content, toFixed, textAlign } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -148,9 +137,7 @@ export default {
         number,
         content,
         toFixed,
-        position,
+        position
-        rowGap,
-        formatter
       }
     },
     getStyle () {

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, uuid } from '../../../util/index'
+import { randomExtend, getPointDistance } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
@@ -171,14 +171,14 @@ export default {
     }
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${id}`,
+      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${id}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${id}`,
+      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${id}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

src/components/flylineChartEnhanced/index.js

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

src/components/flylineChartEnhanced/src/main.vue

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

src/components/percentPond/src/main.vue

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

src/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="`${headerItem}${i}`"
+        :key="headerItem + i"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="`${row.toString()}${row.scroll}`"
+        :key="row.toString() + row.scroll"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,13 +33,11 @@
         <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('click', ri, ci, row, ceil)"
+          @click="emitEvent(ri, ci, row, ceil)"
-          @mouseenter="handleHover(true, ri, ci, row, ceil)"
-          @mouseleave="handleHover(false)"
         />
 
       </div>
@@ -148,14 +146,7 @@ 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,
@@ -178,9 +169,7 @@ export default {
 
       animationHandler: '',
 
-      updater: 0,
+      updater: 0
-
-      needCalc: false
     }
   },
   watch: {
@@ -189,24 +178,10 @@ 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
 
@@ -337,14 +312,6 @@ 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
@@ -363,7 +330,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
+      this.rows = rows
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -388,28 +355,15 @@ export default {
 
       clearTimeout(animationHandler)
     },
-    emitEvent (type, ri, ci, row, ceil) {
+    emitEvent (ri, ci, row, ceil) {
       const { ceils, rowIndex } = row
 
-      this.$emit(type, {
+      this.$emit('click', {
         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 () {

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">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
+        <div class="ranking-value">{{ item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -82,13 +82,7 @@ export default {
          * @type {Boolean}
          * @default sort = true
          */
-        sort: true,
+        sort: true
-        /**
-         * @description Value formatter
-         * @type {Function}
-         * @default valueFormatter = null
-         */
-        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -158,20 +152,10 @@ 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
 
-      // abs of max
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
-      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
 
@@ -214,7 +198,7 @@ export default {
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows.slice(0, rowNum + 1)
+      this.rows = rows
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
@@ -238,7 +222,7 @@ export default {
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    },
+    }
   },
   destroyed () {
     const { stopAnimation } = this

src/components/waterLevelPond/src/main.vue

@@ -10,6 +10,7 @@
       </defs>
 
       <text
+        v-if="renderer"
         :stroke="`url(#${gradientId})`"
         :fill="`url(#${gradientId})`"
         :x="renderer.area[0] / 2 + 8"
@@ -39,8 +40,6 @@
 </template>
 
 <script>
-import { uuid } from '../../../util/index'
-
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@@ -54,9 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
-    const id = uuid()
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${id}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**

src/index.js

@@ -31,7 +31,6 @@ import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
 import decoration11 from './components/decoration11/index'
-import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
@@ -41,7 +40,6 @@ 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'
@@ -81,7 +79,6 @@ export default function (Vue) {
   Vue.use(decoration9)
   Vue.use(decoration10)
   Vue.use(decoration11)
-  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)
@@ -91,7 +88,6 @@ 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)

src/mixin/autoResize.js

@@ -29,17 +29,11 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(_ => {
+        $nextTick(e => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom ? dom.clientWidth : 0
+          this.width = dom.clientWidth
-          this.height = dom ? dom.clientHeight : 0
+          this.height = dom.clientHeight
-
-          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()
 
@@ -62,8 +56,6 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
-      if (!domObserver) return
-
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

src/util/index.js

@@ -37,11 +37,3 @@ 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)
-  })
-}