diff --git a/docs/DataV/components/borderBox11/src/main.vue b/docs/DataV/components/borderBox11/src/main.vue
index dfa2901..6fd62f9 100644
--- a/docs/DataV/components/borderBox11/src/main.vue
+++ b/docs/DataV/components/borderBox11/src/main.vue
@@ -223,6 +223,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import { fade } from '@jiaminghi/color'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvBorderBox11',
   mixins: [autoResize],
@@ -245,10 +247,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'border-box-11',
-      filterId: `border-box-11-filterId-${timestamp}`,
+      filterId: `border-box-11-filterId-${uuid}`,
 
       defaultColor: ['#8aaafb', '#1f33a2'],
 
diff --git a/docs/DataV/components/borderBox12/src/main.vue b/docs/DataV/components/borderBox12/src/main.vue
index 1b8de85..23c131d 100644
--- a/docs/DataV/components/borderBox12/src/main.vue
+++ b/docs/DataV/components/borderBox12/src/main.vue
@@ -99,6 +99,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import { fade } from '@jiaminghi/color'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvBorderBox12',
   mixins: [autoResize],
@@ -113,10 +115,10 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    const uuid = getUuid();
     return {
       ref: 'border-box-12',
-      filterId: `borderr-box-12-filterId-${timestamp}`,
+      filterId: `borderr-box-12-filterId-${uuid}`,
 
       defaultColor: ['#2e6099', '#7ce7fd'],
 
diff --git a/docs/DataV/components/borderBox13/src/main.vue b/docs/DataV/components/borderBox13/src/main.vue
index 524020f..0c7d1fd 100644
--- a/docs/DataV/components/borderBox13/src/main.vue
+++ b/docs/DataV/components/borderBox13/src/main.vue
@@ -47,6 +47,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvBorderBox13',
   mixins: [autoResize],
@@ -61,7 +63,7 @@ export default {
     }
   },
   data () {
-    const timestamp = +new Date()
+    const uuid = getUuid();
     return {
       ref: 'border-box-13',
 
diff --git a/docs/DataV/components/borderBox8/src/main.vue b/docs/DataV/components/borderBox8/src/main.vue
index 968ae0d..c76c1c2 100644
--- a/docs/DataV/components/borderBox8/src/main.vue
+++ b/docs/DataV/components/borderBox8/src/main.vue
@@ -70,6 +70,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
@@ -92,12 +94,12 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${timestamp}`,
-      gradient: `border-box-8-gradient-${timestamp}`,
-      mask: `border-box-8-mask-${timestamp}`,
+      path: `border-box-8-path-${uuid}`,
+      gradient: `border-box-8-gradient-${uuid}`,
+      mask: `border-box-8-mask-${uuid}`,
 
       defaultColor: ['#235fa7', '#4fd2dd'],
 
diff --git a/docs/DataV/components/borderBox9/src/main.vue b/docs/DataV/components/borderBox9/src/main.vue
index e6400f3..9178d9c 100644
--- a/docs/DataV/components/borderBox9/src/main.vue
+++ b/docs/DataV/components/borderBox9/src/main.vue
@@ -130,6 +130,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
@@ -144,12 +146,12 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${timestamp}`,
-      maskId: `border-box-9-mask-${timestamp}`,
+      gradientId: `border-box-9-gradient-${uuid}`,
+      maskId: `border-box-9-mask-${uuid}`,
 
       defaultColor: ['#11eefd', '#0078d2'],
 
diff --git a/docs/DataV/components/charts/src/main.vue b/docs/DataV/components/charts/src/main.vue
index 2d742ef..e5f6d35 100644
--- a/docs/DataV/components/charts/src/main.vue
+++ b/docs/DataV/components/charts/src/main.vue
@@ -9,6 +9,8 @@ import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvCharts',
   mixins: [autoResize],
@@ -19,10 +21,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
-      ref: `charts-container-${timestamp}`,
-      chartRef: `chart-${timestamp}`,
+      ref: `charts-container-${uuid}`,
+      chartRef: `chart-${uuid}`,
 
       chart: null
     }
diff --git a/docs/DataV/components/decoration10/src/main.vue b/docs/DataV/components/decoration10/src/main.vue
index 9918732..e09c0a6 100644
--- a/docs/DataV/components/decoration10/src/main.vue
+++ b/docs/DataV/components/decoration10/src/main.vue
@@ -152,6 +152,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
@@ -162,17 +164,17 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${timestamp}`,
-      animationId2: `d10ani2${timestamp}`,
-      animationId3: `d10ani3${timestamp}`,
-      animationId4: `d10ani4${timestamp}`,
-      animationId5: `d10ani5${timestamp}`,
-      animationId6: `d10ani6${timestamp}`,
-      animationId7: `d10ani7${timestamp}`,
+      animationId1: `d10ani1${uuid}`,
+      animationId2: `d10ani2${uuid}`,
+      animationId3: `d10ani3${uuid}`,
+      animationId4: `d10ani4${uuid}`,
+      animationId5: `d10ani5${uuid}`,
+      animationId6: `d10ani6${uuid}`,
+      animationId7: `d10ani7${uuid}`,
 
       defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
 
diff --git a/docs/DataV/components/decoration11/src/main.vue b/docs/DataV/components/decoration11/src/main.vue
index 70ce50f..2ad8adb 100644
--- a/docs/DataV/components/decoration11/src/main.vue
+++ b/docs/DataV/components/decoration11/src/main.vue
@@ -62,6 +62,9 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import { fade } from '@jiaminghi/color'
 
+import { getUuid } from '../../../util'
+
+
 export default {
   name: 'DvDecoration11',
   mixins: [autoResize],
@@ -72,7 +75,7 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'decoration-11',
 
diff --git a/docs/DataV/components/decoration9/src/main.vue b/docs/DataV/components/decoration9/src/main.vue
index 8728951..5e4e81b 100644
--- a/docs/DataV/components/decoration9/src/main.vue
+++ b/docs/DataV/components/decoration9/src/main.vue
@@ -92,6 +92,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import { fade } from '@jiaminghi/color'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
@@ -106,11 +108,11 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${timestamp}`,
+      polygonId: `decoration-9-polygon-${uuid}`,
 
       svgWH: [100, 100],
 
diff --git a/docs/DataV/components/flylineChart/src/main.vue b/docs/DataV/components/flylineChart/src/main.vue
index 7ac0a74..5341fb6 100644
--- a/docs/DataV/components/flylineChart/src/main.vue
+++ b/docs/DataV/components/flylineChart/src/main.vue
@@ -157,6 +157,8 @@ import { randomExtend, getPointDistance } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvFlylineChart',
   mixins: [autoResize],
@@ -171,14 +173,14 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${timestamp}`,
-      maskCircleId: `mask-circle-id-${timestamp}`,
-      gradientId: `gradient-id-${timestamp}`,
-      gradient2Id: `gradient2-id-${timestamp}`,
+      maskId: `flyline-mask-id-${uuid}`,
+      maskCircleId: `mask-circle-id-${uuid}`,
+      gradientId: `gradient-id-${uuid}`,
+      gradient2Id: `gradient2-id-${uuid}`,
 
       defaultConfig: {
         /**
diff --git a/docs/DataV/components/flylineChartEnhanced/src/main.vue b/docs/DataV/components/flylineChartEnhanced/src/main.vue
index 5aed57f..e2a87c9 100644
--- a/docs/DataV/components/flylineChartEnhanced/src/main.vue
+++ b/docs/DataV/components/flylineChartEnhanced/src/main.vue
@@ -159,6 +159,8 @@ import { randomExtend, getPointDistance } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvFlylineChartEnhanced',
   mixins: [autoResize],
@@ -173,12 +175,12 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
       ref: 'dv-flyline-chart-enhanced',
       unique: Math.random(),
-      flylineGradientId: `flyline-gradient-id-${timestamp}`,
-      haloGradientId: `halo-gradient-id-${timestamp}`,
+      flylineGradientId: `flyline-gradient-id-${uuid}`,
+      haloGradientId: `halo-gradient-id-${uuid}`,
       /**
        * @description Type Declaration
        * 
diff --git a/docs/DataV/components/percentPond/src/main.vue b/docs/DataV/components/percentPond/src/main.vue
index df9e143..81d9a2d 100644
--- a/docs/DataV/components/percentPond/src/main.vue
+++ b/docs/DataV/components/percentPond/src/main.vue
@@ -48,6 +48,8 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvPercentPond',
   props: {
@@ -57,10 +59,10 @@ export default {
     }
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
-      gradientId1: `percent-pond-gradientId1-${timestamp}`,
-      gradientId2: `percent-pond-gradientId2-${timestamp}`,
+      gradientId1: `percent-pond-gradientId1-${uuid}`,
+      gradientId2: `percent-pond-gradientId2-${uuid}`,
 
       width: 0,
       height: 0,
diff --git a/docs/DataV/components/waterLevelPond/src/main.vue b/docs/DataV/components/waterLevelPond/src/main.vue
index 5a7e316..0766dc4 100644
--- a/docs/DataV/components/waterLevelPond/src/main.vue
+++ b/docs/DataV/components/waterLevelPond/src/main.vue
@@ -46,6 +46,8 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 import CRender from '@jiaminghi/c-render'
 
+import { getUuid } from '../../../util'
+
 export default {
   name: 'DvWaterLevelPond',
   props: {
@@ -53,9 +55,9 @@ export default {
     default: () => ({})
   },
   data () {
-    const timestamp = Date.now()
+    const uuid = getUuid();
     return {
-      gradientId: `water-level-pond-${timestamp}`,
+      gradientId: `water-level-pond-${uuid}`,
 
       defaultConfig: {
         /**
diff --git a/docs/DataV/util/index.js b/docs/DataV/util/index.js
index 984e935..9e72ba4 100644
--- a/docs/DataV/util/index.js
+++ b/docs/DataV/util/index.js
@@ -37,3 +37,13 @@ export function getPointDistance (pointOne, pointTwo) {
 
   return Math.sqrt(minusX * minusX + minusY * minusY)
 }
+
+export function getUuid() {
+  let d = new Date().getTime();
+    const uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
+      var r = (d + Math.random()*16)%16 | 0;
+      d = Math.floor(d/16);
+      return (c=='x' ? r : (r&0x7|0x8)).toString(16);
+   });
+  return uuid;
+}
\ No newline at end of file