update dist and lib folder

🐛 修改组件 ID 时间戳的生成方式

.gitignore

@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 package-lock.json
+/deploy/config.js
 
 # local env files
 .env.local

CHANGELOG.md

@@ -1,3 +1,22 @@
+# 2.4.7-alpha (2019-10-24)
+
+### perfect
+
+- **charts:** Optimize memory leaks.
+- **digitalFlop:** Optimize memory leaks.
+
+# 2.4.6-alpha (2019-10-24)
+
+### Bug Fixes
+
+- **activeRingChart:** Optimize memory leaks [(#16)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/20).
+
+# 2.4.5-alpha (2019-09-24)
+
+### Bug Fixes
+
+- **activeRingChart:** Calculation exception due to data value being 0 [(#17)](https://github.com/jiaming743/DataV/issues/17).
+
 # 2.4.4-alpha (2019-09-05)
 
 ### Bug Fixes

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2019-present, JiaMing
+Copyright (c) 2019-present, DataV-Team
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -2,8 +2,8 @@
 
 <h1 align="center">DataV</h1>
 <p align="center">
-    <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
-      <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
+    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
+      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
     </a>
     <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
       <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
@@ -12,10 +12,10 @@
 
 ## DataV是干什么的?
 
-* DataV是一个基于**Vue**的数据可视化组件库.
-* 提供用于提升页面视觉效果的**SVG**边框和装饰.
-* 提供常用的**图表**如折线图等.
-* 飞线图/轮播表等其他组件.
+* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
+* 提供用于提升页面视觉效果的**SVG**边框和装饰
+* 提供常用的**图表**如折线图等
+* 飞线图/轮播表等其他组件
 
 ### npm安装
 
@@ -38,6 +38,18 @@ Vue.use(borderBox1)
 
 详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
 
+### UMD版
+
+`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。
+
+[UMD版使用示例](./umdExample.html)
+
+### 调研
+
+关于React版本组件库及反馈请移步[问卷调查](https://www.wjx.cn/jq/45326197.aspx)
+
+![问卷调查](./questionnaire.jpg)
+
 ### TODO
 
 * **飞线图**添加多中心点及反向飞线功能
@@ -45,7 +57,7 @@ Vue.use(borderBox1)
 
 ### 致谢
 
-组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/jiaming743/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
+组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
 
 ### 反馈
 

README_EN.md

@@ -3,8 +3,8 @@
 <h1 align="center">DataV</h1>
 
 <p align="center">
-    <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
-      <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
+    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
+      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
     </a>
     <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
       <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
@@ -13,7 +13,7 @@
 
 ## What is DataV?
 
-* DataV is a data **visualization** components library based on **Vue**.
+* DataV is a data **visualization** components library based on **Vue**（Of course there are also [React versions](https://github.com/DataV-Team/DataV-React)）.
 * Provide cool **SVG** borders and decorations.
 * Provide common **charts** such as line chart, etc..
 * flying line chart, carousel table and etc.
@@ -39,6 +39,22 @@ Vue.use(borderBox1)
 
 Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
 
+### UMD version
+
+The `UMD` version can be directly imported using the `script` tag. The `UMD` version file is located in the project `dist` directory. After import, all components will be automatically registered as **Vue global components**. Be sure to introduce `Vue` before introducing `DataV`.
+
+[UMD version usage example](./umdExample.html)
+
+### React version
+
+The reaction version is already under development, so stay tuned
+
+### Questionnaire
+
+React version of the component library and feedback[Questionnaire](https://www.wjx.cn/jq/45326197.aspx)
+
+![问卷调查](./questionnaire.jpg)
+
 ### TODO
 
 * **flylineChart**Add multi-center point and reverse fly line function.
@@ -46,7 +62,7 @@ Detailed documents and examples can be viewed on the [HomePage](http://datav.jia
 
 ### Acknowledgement
 
-The development of the component library is based on personal learning and interest. Due to technical level and experience limitations, there are still many imperfections in the components. If there are errors, you can submit [issue](https://github.com/jiaming743/DataV/issues/new?template=bug_report.md) in time or add feedback groups for feedback. Welcome to provide corrections and suggestions. Thank you for your support.
+The development of the component library is based on personal learning and interest. Due to technical level and experience limitations, there are still many imperfections in the components. If there are errors, you can submit [issue](https://github.com/DataV-team/DataV/issues/new?template=bug_report.md) in time or add feedback groups for feedback. Welcome to provide corrections and suggestions. Thank you for your support.
 
 ### Feedback
 

build/index.js

@@ -77,15 +77,15 @@ async function start () {
 
   print.tip('After rollupCompile')
 
-  // const uglifyjs = await exec(`uglifyjs dist/${libName}.map.js -o dist/${libName}.min.js`)
+  const terser = await exec(`rollup -c build/rollup.terser.config.js`)
 
-  // if (!uglifyjs) {
-  //   print.error('Exception in uglifyjs')
+  if (!terser) {
+    print.error('Exception in terser')
 
-  //   return
-  // }
+    return
+  }
 
-  // print.tip('After uglifyjs')
+  print.tip('After terser')
 
   print.yellow('-------------------------------------')
   print.success('     DataV Lib Compile Success!      ')

build/rollup.config.js

@@ -5,10 +5,9 @@ import babel from 'rollup-plugin-babel'
 
 export default {
   input: 'build/entry.js',
-  // input: 'src/index.js',
   output: {
     format: 'umd',
-    file: 'dist/datav.map.js',
+    file: 'dist/datav.map.vue.js',
     name: 'datav'
   },
   plugins: [

build/rollup.terser.config.js

@@ -0,0 +1,24 @@
+import resolve from 'rollup-plugin-node-resolve'
+import vue from 'rollup-plugin-vue'
+import commonjs from 'rollup-plugin-commonjs'
+import babel from 'rollup-plugin-babel'
+import { terser } from "rollup-plugin-terser"
+
+export default {
+  input: 'build/entry.js',
+  output: {
+    format: 'umd',
+    file: 'dist/datav.min.vue.js',
+    name: 'datav'
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    commonjs(),
+    vue(),
+    terser(),
+  ],
+  external: ['Vue']
+}

deploy/index.js

@@ -0,0 +1,81 @@
+const { fileForEach } = require('@jiaminghi/fs')
+const Client = require('ftp')
+const print = require('./plugin/print')
+const { emptyDir, put } = require('./plugin/ftp')
+const getNodeParams = require('./plugin/nodeParams')
+
+let config = null
+
+try {
+  config = require('./config')
+} catch (err) {
+  void 0
+}
+
+const DIST_PATH = './dist/'
+const FTP_PATH = './datav/'
+
+const ftp = new Client()
+
+ftp.on('ready', async foo => {
+  print.tip('FTP connected!')
+
+  const isEmpty = await emptyDir(ftp, FTP_PATH)
+
+  if (!isEmpty) {
+    print.error('Exception in emptyDir!')
+
+    return false
+  }
+
+  let status = true
+
+  await fileForEach(DIST_PATH, async src => {
+    const destPath = FTP_PATH + src.split('/').slice(-1)[0]
+
+    print.tip('Upload: ' + destPath)
+
+    if (!await put(ftp, src, destPath)) {
+      status = false
+      
+      print.error('Exception in upload ' + destPath)
+    }
+  })
+
+  if (status) {
+    print.yellow('-------------------------------------')
+    print.success('    Automatic Deployment Success!    ')
+    print.yellow('-------------------------------------')  
+  }
+
+  ftp.destroy()
+})
+
+ftp.on('greeting', foo => {
+  print.tip('FTP greeting')
+})
+ftp.on('close', foo => {
+  print.tip('FTP close')
+})
+ftp.on('end', foo => {
+  print.tip('FTP end')
+})
+ftp.on('error', foo => {
+  print.tip('FTP error')
+})
+
+const { host, user, pass } = config || getNodeParams()
+
+if (!host || !user || !pass) {
+  print.error('Upload Dist to FTP Missing Parameters!')
+
+  return false
+}
+
+print.tip('Start Upload!')
+
+ftp.connect({
+  host,
+  user,
+  password: pass
+})

deploy/plugin/ftp.js

@@ -0,0 +1,99 @@
+async function getList (ftp, src) {
+  return new Promise(resolve => {
+    ftp.list(src, (err, list) => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(list)
+      }
+    })
+  })
+}
+
+async function rmDir (ftp, src, recusive = true) {
+  return new Promise(resolve => {
+    ftp.rmdir(src, recusive, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function deleteFile (ftp, src) {
+  return new Promise(resolve => {
+    ftp.delete(src, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function emptyDir (ftp, src, except = []) {
+  const list = await getList(ftp, src)
+
+  for (let i = 0, listNum = list.length; i < listNum; i++) {
+    const { type, name } = list[i]
+
+    if (type === 'd' && (name === '.' || name === '..')) continue
+    if (except.find(n => n === name)) continue
+
+    const fullSrc = `${src}${name}`
+
+    if (type === 'd') {
+      if (!await rmDir(ftp, fullSrc, true)) return false
+    } else {
+      if (!await deleteFile(ftp, fullSrc)) return false
+    }
+  }
+
+  return true
+}
+
+async function put (ftp, src, dest) {
+  return new Promise(resolve => {
+    ftp.put(src, dest, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+async function mkDir (ftp, src, recusive = true) {
+  return new Promise(resolve => {
+    ftp.mkdir(src, recusive, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = {
+  put,
+  rmDir,
+  mkDir,
+  getList,
+  emptyDir,
+  deleteFile
+}

deploy/plugin/nodeParams.js

@@ -0,0 +1,13 @@
+function getNodeParams () {
+  const params = {}
+
+  process.argv.slice(2).forEach(param => {
+    param = param.split('=')
+
+    params[param[0]] = param[1]
+  })
+
+  return params
+}
+
+module.exports = getNodeParams

deploy/plugin/print.js

@@ -0,0 +1,22 @@
+const print = {
+  log (info) {
+    console.log(info)
+  },
+  warn (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  },
+  error (info) {
+    console.log('\033[31;40m' + info + '\033[0m')
+  },
+  tip (info) {
+    console.log('\033[40;32m' + info + '\033[0m')
+  },
+  success (info) {
+    console.log('\033[42;30m' + info + '\033[0m')
+  },
+  yellow (info) {
+    console.log('\033[31;33m' + info + '\033[0m')
+  }
+}
+
+module.exports = print

lib/components/activeRingChart/src/main.vue

@@ -113,7 +113,7 @@ export default {
 
       const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
 
       return {
         content: '{nt}%',
@@ -174,7 +174,7 @@ export default {
 
       const option = getRingOption()
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       ringAnimation()
     },
@@ -236,7 +236,7 @@ export default {
         }
       })
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       const { activeTimeGap } = option.series[0]
 

lib/components/borderBox8/src/main.vue

@@ -68,11 +68,12 @@ export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      path: `border-box-8-path-${timestamp}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
+      mask: `border-box-8-mask-${timestamp}`
     }
   },
   computed: {

lib/components/borderBox9/src/main.vue

@@ -89,11 +89,12 @@ export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      gradientId: `border-box-9-gradient-${timestamp}`,
+      maskId: `border-box-9-mask-${timestamp}`
     }
   }
 }

lib/components/charts/src/main.vue

@@ -19,9 +19,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      ref: `charts-container-${timestamp}`,
+      chartRef: `chart-${timestamp}`,
 
       chart: null
     }
@@ -34,7 +35,7 @@ export default {
 
       if (!option) option = {}
 
-      chart.setOption(option)
+      chart.setOption(option, true)
     }
   },
   methods: {

lib/components/decoration10/src/main.vue

@@ -152,16 +152,17 @@ export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${(new Date()).getTime()}`,
-      animationId2: `d10ani2${(new Date()).getTime()}`,
-      animationId3: `d10ani3${(new Date()).getTime()}`,
-      animationId4: `d10ani4${(new Date()).getTime()}`,
-      animationId5: `d10ani5${(new Date()).getTime()}`,
-      animationId6: `d10ani6${(new Date()).getTime()}`,
-      animationId7: `d10ani7${(new Date()).getTime()}`
+      animationId1: `d10ani1${timestamp}`,
+      animationId2: `d10ani2${timestamp}`,
+      animationId3: `d10ani3${timestamp}`,
+      animationId4: `d10ani4${timestamp}`,
+      animationId5: `d10ani5${timestamp}`,
+      animationId6: `d10ani6${timestamp}`,
+      animationId7: `d10ani7${timestamp}`
     }
   }
 }

lib/components/decoration9/src/main.vue

@@ -90,10 +90,11 @@ export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

lib/components/digitalFlop/src/main.vue

@@ -165,6 +165,8 @@ export default {
       graph.animationCurve = animationCurve
       graph.animationFrame = animationFrame
 
+      graph.animationEnd()
+
       graph.animation('style', style, true)
       graph.animation('shape', shape)
     },

lib/components/flylineChart/src/main.vue

@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
+      gradientId: `gradient-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

lib/components/percentPond/src/main.vue

@@ -57,9 +57,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${timestamp}`,
 
       width: 0,
       height: 0,
@@ -239,7 +240,7 @@ export default {
       this.height = dom.clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

lib/components/scrollBoard/src/main.vue

@@ -236,7 +236,7 @@ export default {
         data = data.map((row, i) => {
           row = [...row]
 
-          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
 
           row.unshift(indexTag)
 

lib/components/waterLevelPond/src/main.vue

@@ -53,8 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${(new Date()).getTime()}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**

package.json

@@ -1,21 +1,22 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.4.4",
+  "version": "2.4.7",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jiaming743/DataV.git"
+    "url": "https://github.com/DataV-Team/DataV.git"
   },
   "scripts": {
     "build": "node build/index.js",
     "prepublish": "npm run build",
+    "deploy": "node deploy/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/jiaming743/DataV/issues"
+    "url": "https://github.com/DataV-Team/DataV/issues"
   },
   "keywords": [
     "vue",
@@ -27,17 +28,18 @@
     "@jiaminghi/charts": "*",
     "@babel/runtime": "^7.5.5"
   },
-  "homepage": "https://github.com/jiaming743/DataV#readme",
+  "homepage": "https://github.com/DataV-Team/DataV#readme",
   "devDependencies": {
     "@babel/cli": "^7.4.4",
     "@babel/core": "^7.4.5",
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "@jiaminghi/fs": "0.0.1",
+    "ftp": "^0.3.10",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-uglify": "^6.0.3",
+    "rollup-plugin-terser": "^5.1.1",
     "rollup-plugin-vue": "^5.0.1",
     "vue-template-compiler": "^2.6.10"
   }

src/components/activeRingChart/src/main.vue

@@ -113,7 +113,7 @@ export default {
 
       const sum = value.reduce((all, v) => all + v, 0)
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      const percent = parseInt(value[activeIndex] / sum * 100) || 0
 
       return {
         content: '{nt}%',
@@ -174,7 +174,7 @@ export default {
 
       const option = getRingOption()
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       ringAnimation()
     },
@@ -236,7 +236,7 @@ export default {
         }
       })
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       const { activeTimeGap } = option.series[0]
 

src/components/borderBox8/src/main.vue

@@ -68,11 +68,12 @@ export default {
   name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      path: `border-box-8-path-${timestamp}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
+      mask: `border-box-8-mask-${timestamp}`
     }
   },
   computed: {

src/components/borderBox9/src/main.vue

@@ -89,11 +89,12 @@ export default {
   name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      gradientId: `border-box-9-gradient-${timestamp}`,
+      maskId: `border-box-9-mask-${timestamp}`
     }
   }
 }

src/components/charts/src/main.vue

@@ -19,9 +19,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      ref: `charts-container-${timestamp}`,
+      chartRef: `chart-${timestamp}`,
 
       chart: null
     }
@@ -34,7 +35,7 @@ export default {
 
       if (!option) option = {}
 
-      chart.setOption(option)
+      chart.setOption(option, true)
     }
   },
   methods: {

src/components/decoration10/src/main.vue

@@ -152,16 +152,17 @@ export default {
   name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${(new Date()).getTime()}`,
-      animationId2: `d10ani2${(new Date()).getTime()}`,
-      animationId3: `d10ani3${(new Date()).getTime()}`,
-      animationId4: `d10ani4${(new Date()).getTime()}`,
-      animationId5: `d10ani5${(new Date()).getTime()}`,
-      animationId6: `d10ani6${(new Date()).getTime()}`,
-      animationId7: `d10ani7${(new Date()).getTime()}`
+      animationId1: `d10ani1${timestamp}`,
+      animationId2: `d10ani2${timestamp}`,
+      animationId3: `d10ani3${timestamp}`,
+      animationId4: `d10ani4${timestamp}`,
+      animationId5: `d10ani5${timestamp}`,
+      animationId6: `d10ani6${timestamp}`,
+      animationId7: `d10ani7${timestamp}`
     }
   }
 }

src/components/decoration9/src/main.vue

@@ -90,10 +90,11 @@ export default {
   name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${timestamp}`,
 
       svgWH: [100, 100],
 

src/components/digitalFlop/src/main.vue

@@ -165,6 +165,8 @@ export default {
       graph.animationCurve = animationCurve
       graph.animationFrame = animationFrame
 
+      graph.animationEnd()
+
       graph.animation('style', style, true)
       graph.animation('shape', shape)
     },

src/components/flylineChart/src/main.vue

@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${timestamp}`,
+      maskCircleId: `mask-circle-id-${timestamp}`,
+      gradientId: `gradient-id-${timestamp}`,
+      gradient2Id: `gradient2-id-${timestamp}`,
 
       defaultConfig: {
         /**

src/components/percentPond/src/main.vue

@@ -57,9 +57,10 @@ export default {
     }
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${timestamp}`,
+      gradientId2: `percent-pond-gradientId2-${timestamp}`,
 
       width: 0,
       height: 0,
@@ -239,7 +240,7 @@ export default {
       this.height = dom.clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

src/components/scrollBoard/src/main.vue

@@ -236,7 +236,7 @@ export default {
         data = data.map((row, i) => {
           row = [...row]
 
-          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
 
           row.unshift(indexTag)
 

src/components/waterLevelPond/src/main.vue

@@ -53,8 +53,9 @@ export default {
     default: () => ({})
   },
   data () {
+    const timestamp = Date.now()
     return {
-      gradientId: `water-level-pond-${(new Date()).getTime()}`,
+      gradientId: `water-level-pond-${timestamp}`,
 
       defaultConfig: {
         /**

umdExample.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>DataV</title>
+  <script src="https://unpkg.com/vue"></script>
+  <!--Resources are located on personal servers for experience and testing only, do not use in production environments-->
+  <!--资源位于个人服务器仅供体验和测试，请勿在生产环境使用-->
+  <!--Debug version-->
+  <!--调试版-->
+  <script src="http://lib.jiaminghi.com/datav/datav.map.vue.js"></script>
+  <!--Compression version-->
+  <!--压缩版-->
+  <!-- <script src="http://lib.jiaminghi.com/datav/datav.min.vue.js"></script> -->
+  <style>
+    html, body, #app {
+      width: 100%;
+      height: 100%;
+      margin: 0px;
+      padding: 0px;
+    }
+
+    .border-box-content {
+      color: rgb(66,185,131);
+      font-size: 40px;
+      font-weight: bold;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <dv-border-box-1>Welcome to DataV</dv-border-box-1>
+  </div>
+
+  <script>
+    var app = new Vue({
+      el: '#app'
+    })
+  </script>
+</body>
+</html>