update dist and lib

update version to 2.8.3
update change log
2020-05-06 14:15:15 +08:00 · 2020-05-06 14:15:02 +08:00 · 2020-05-06 14:14:52 +08:00 · 2020-05-06 14:13:49 +08:00 · 2020-05-06 14:13:34 +08:00 · 2020-05-06 13:47:47 +08:00
229 changed files with 36369 additions and 988 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -0,0 +1,28 @@
+---
+name: Bug report
+about: 提交Bug反馈
+---
+
+<!-- 请确定这是一个Bug反馈，而不是一个需求反馈或问题求助，否则ISSUE可能被关闭 -->
+<!-- 请提供可供复现Bug的必要条件，否则ISSUE可能被关闭 -->
+<!-- 创建Bug反馈前请确定你的DataV是最新版的 -->
+
+## Bug report
+
+#### 出现Bug的组件？
+
+#### 组件配置数据？
+<!-- (config等props，若无配置请忽略) -->
+
+#### 控制台错误输出？
+<!-- (若无错误输出请忽略) -->
+
+#### 期望情况？
+
+#### 实际情况？
+
+#### 其他相关信息
+
+- DataV版本
+- 浏览器版本
+- 其他
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -0,0 +1,14 @@
+---
+name: Feature request
+about: 新特性建议
+---
+
+<!-- 创建新特性建议前请确定你的DataV是最新版的 -->
+
+## Feature request
+
+#### 这个特性解决了什么问题？
+
+#### 这个特性的实现形式？
+
+#### 是否愿意为此特性提交PR？
--- a/.github/ISSUE_TEMPLATE/new_component_request.md
+++ b/.github/ISSUE_TEMPLATE/new_component_request.md
@ -0,0 +1,20 @@
+---
+name: Component request
+about: 新组件建议
+---
+
+<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
+<!-- (将[ ]修改为[x]) -->
+
+## Component request
+
+#### 新组件的类型？
+
+* [ ] 边框
+* [ ] 装饰
+* [ ] 图表
+* [ ] 其他
+
+#### 这个组件的功能描述 (边框及装饰类，请提供样图)？
+
+#### 是否愿意为此组件提交PR？
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -0,0 +1,33 @@
+<!-- (将[ ]修改为[x]) -->
+
+**该PR的类型是？** (至少选择一个)
+
+- [ ] Bug修复
+- [ ] 新特性
+- [ ] 新组件
+
+**该PR是否向下兼容?** (选择任一)
+
+- [ ] 是
+- [ ] 否
+
+如果为否，请描述冲突情况:
+
+**涉及到的ISSUE:**
+
+- [ ] 该PR如果涉及到某个ISSUE, 请在PR标题中描述出来 (例如. `fix #xxx[,#xxx]`, "xxx"为ISSUE序号)
+
+**是否在Chrome浏览器下进行过测试？**
+
+- [ ] 是
+- [ ] 否
+
+如果这是一个**新特性**或**新组件**相关的PR，请提供如下信息
+
+- [ ] 添加该特性或组件的原因
+- [ ] 文档应该修改哪些信息
+- [ ] 测试相关
+
+提交**新特性**或**新组件**前请先发起一个相关的ISSUE请求
+
+**其他信息:**
--- a/.gitignore
+++ b/.gitignore
@ -1,8 +1,7 @@
 .DS_Store
 node_modules
-/dist
-/.svn
-/DataV
+package-lock.json
+/deploy/config.js

 # local env files
 .env.local
@ -12,6 +11,7 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

 # Editor directories and files
 .idea
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,293 @@
+# 2.8.3-alpha (2020-05-06)
+
+### Perfect
+
+- **activeRingChart:** add `showOriginValue` configuration.
+- **capsuleChart:** add `showValue` configuration.
+
+# 2.8.2-alpha (2020-05-06)
+
+### Perfect
+
+- **borderBox8:** add `reverse` configuration.
+
+# 2.8.1-alpha (2020-05-03)
+
+### Perfect
+
+- **digitalFlop:** Use `\n` to start a newline.
+- **digitalFlop:** `rowGap` configuration.
+
+# 2.7.4-alpha (2020-04-15)
+
+### Bug Fixes
+
+- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).
+
+# 2.7.3-alpha (2020-01-16)
+
+### Bug Fixes
+
+- **activeRingChart:** `parseInt` precision lost.
+
+# 2.7.2-alpha (2020-01-10)
+
+### Perfect
+
+- **ativeRingChart:** Add digitalFlopToFixed configuration.
+
+# 2.7.1-alpha (2020-01-08)
+
+### Bug Fixes
+
+- **flylineChartEnhanced:** Exception when relative is false.
+
+# 2.7.0-alpha (2020-01-05)
+
+### New
+
+- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).
+
+# 2.6.0-alpha (2019-12-25)
+
+### Perfect
+
+- **scrollRankingBoard:** Configurable auto-sequencing [(#35)](https://github.com/DataV-Team/DataV/pull/35).
+- **scrollRankingBoard:** Render name using `v-html` [(#36)](https://github.com/DataV-Team/DataV/pull/36).
+
+# 2.5.0-alpha (2019-12-06)
+
+### Feature
+
+- **borderBox & decoration:** **Configurable** colors.
+  ```html
+  <!-- Example -->
+  <dv-border-box-1 :color="['red', 'green']" />
+  <dv-decoration-1 :color="['red', 'green']" />
+  ```
+- **scrollBoard:** Configurable index header [(#33)](https://github.com/DataV-Team/DataV/pull/33). 
+
+### New
+
+- **borderBox11**
+- **borderBox12**
+- **borderBox13**
+- **decoration11**
+
+# 2.4.8-alpha (2019-11-12)
+
+### Bug Fixes
+
+- **scrollBoard:** After updating props, the carousel speed is abnormal [(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
+- **scrollRankingBorad:** After updating props, the carousel speed is abnormal[(#25)](https://github.com/jiaming743/DataV/issues/16),[(#20)](https://github.com/jiaming743/DataV/issues/25).
+
+# 2.4.7-alpha (2019-10-24)
+
+### perfect
+
+- **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
+
+- **scrollBoard:** Header column width is abnormal when row data is empty.
+
+# 2.4.3-alpha (2019-09-04)
+
+### Perfect
+
+- **scrollRankingBoard:** Add a unit configuration item.
+
+# 2.4.2-alpha (2019-08-30)
+
+### Perfect
+
+- **capsuleChart:** Class name compatibility optimization.
+
+# 2.4.1-alpha (2019-08-29)
+
+### Perfect
+
+- **capsuleChart:** Adaptive display unit.
+
+# 2.4.0-alpha (2019-08-29)
+
+### New
+
+- **borderBox10**
+- **capsuleChart**
+
+# 2.3.9-alpha (2019-08-27)
+
+### Perfect
+
+- **percentPond:** Compatibility enhancement. 
+
+# 2.3.8-alpha (2019-08-27)
+
+### Bug Fixes
+
+- **percentPond:** Style compatibility and gradient exceptions. 
+
+# 2.3.7-alpha (2019-08-26)
+
+### Bug Fixes
+
+- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6). 
+
+# 2.3.6-alpha (2019-08-24)
+
+### Bug Fixes
+
+- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5). 
+
+### Perfect
+
+- **svg:** Svg animation compatibility enhancement.
+
+# 2.3.5-alpha (2019-08-22)
+
+### Bug Fixes
+
+- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3). 
+
+# 2.3.4-alpha (2019-08-15)
+
+### Bug Fixes
+
+- **package.json:** Import exception caused by incorrect entry path configuration.
+
+# 2.3.3-alpha (2019-07-22)
+
+### Bug Fixes
+
+- **waterPondLevel:** Potential namespace conflict.
+- **digitalFlop:** Potential namespace conflict.
+
+# 2.3.2-alpha (2019-07-05)
+
+### Perfect
+
+- **decoration:** Explicitly set the SVG width and height to enhance stability.
+- **Introduced on demand**
+
+  ```js
+  import { borderBox1 } from '@jiaminghi/data-view'
+
+  Vue.use(borderBox1)
+  ```
+
+# 2.3.1-alpha (2019-07-04)
+
+### Perfect
+
+- **charts:** Enhanced style compatibility.
+- **scrollBoard:** Enhanced style compatibility.
+- **fullScreenContainer:** Fix potential rendering exceptions.
+- **mixin:** Strengthen `autoResize` stability.
+
+# 2.3.0-alpha (2019-07-04)
+
+### Directory Structure Change
+
+* **before**
+
+  ```
+  .
+  ├── components
+  │   ├── borderBox1
+  │   │   └── index.vue
+  │   ├── borderBox2
+  │   │   └── index.vue
+  │   ├── etc.
+  │   └── index.js
+  ├── mixins
+  │   └── autoResize.js
+  ├── util
+  │   └── index.js
+  │
+  ├── index.js
+  │
+  ├── package.json // main: 'index.js'
+  └── etc.
+  ```
+
+* **after**
+
+  ```
+  .
+  ├── lib // After compilation
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   ├── main.vue
+  │   │   |   |   └── main.css
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── publish // For pre-publish process
+  │
+  ├── src // For development environments
+  │   ├── components
+  │   │   ├── borderBox1
+  │   │   |   ├── src
+  │   │   |   |   └── main.vue
+  │   │   |   └── index.js
+  │   │   ├── etc.
+  │   │   └── index.js
+  │   ├── mixin
+  │   │   └── autoResize.js
+  │   ├── util
+  │   │   └── index.js
+  │   └── index.js
+  │
+  ├── package.json // main: '/lib/index.js'
+  ├── publish.js
+  └── etc.
+  ```
+
+- **Introduced on demand**
+
+  ```js
+  import borderBox1 from '@jiaminghi/data-view/lib/components/borderBox1'
+  
+  Vue.use(borderBox1)
+  ```
+
+# 2.2.0-alpha (2019-06-29)
+
+### New
+
+- **borderBox**
+- **decoration**
+
+# 2.1.1-alpha (2019-06-28)
+
+### Bug Fixes
+
+- **autoResize:** Exception caused by `autoResize` mixin.
+- **charts:** `Legend` is blocked by slot and can't click.
+
 # 2.1.0-alpha (2019-06-27)

 ### New
--- a/2
+++ b/2
@ -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
--- a/QQGroup.png
+++ b/QQGroup.png
--- a/README.md
+++ b/README.md
@ -1,20 +1,76 @@
-<h1 align="center">DataV</h1>
+[ENGLISH](./README_EN.md)

 <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" />
+  <img src="./icon.png">
+</p>
+<h1 align="center">DataV</h1>
+<p align="center">
+    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
+      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
    </a>
-    <a href="https://www.npmjs.com/package/@jiaminghi/datav">
+    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
    </a>
 </p>

-<h2 align="center">Vue large screen data display component library</h2>
+## DataV是干什么的?

-### Install with npm
+* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
+* 提供用于提升页面视觉效果的**SVG**边框和装饰
+* 提供常用的**图表**如折线图等
+* 飞线图/轮播表等其他组件
+
+### npm安装

 ```shell
 $ npm install @jiaminghi/data-view
 ```

-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+### 使用
+
+```js
+import Vue from 'vue'
+import DataV from '@jiaminghi/data-view'
+
+Vue.use(DataV)
+
+// 按需引入
+import { borderBox1 } from '@jiaminghi/data-view'
+Vue.use(borderBox1)
+```
+
+详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+
+### UMD版
+
+`UMD`版可直接使用`script`标签引入，`UMD`版文件位于项目`dist`目录下，引入后将自动把所有组件注册为**Vue全局组件**，引入`DataV`前请确保已引入`Vue`。
+
+[UMD版使用示例](./umdExample.html)
+
+### TODO
+
+* **地图组件**
+* **TS**重构组件库底层依赖
+
+### 致谢
+
+组件库的开发基于个人学习和兴趣，由于技术水平及经验的限制，组件尚有许多不完善之处，如有BUG可及时提交[issue](https://github.com/DataV-Team/DataV/issues/new?template=bug_report.md)或添加反馈群进行反馈，也欢迎提供指正和建议，感谢各位的支持。
+
+### 反馈
+![Feedback](./QQGroup.png)
+
+### Demo
+
+Demo页面使用了全屏组件，请F11全屏后查看。
+
+* [施工养护综合数据](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [机电运维管理台](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)
+
+* [机电设备电子档案](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)
--- a/README_EN.md
+++ b/README_EN.md
@ -0,0 +1,87 @@
+[中文](./README.md)
+
+<p align="center">
+  <img src="./icon.png">
+</p>
+<h1 align="center">DataV</h1>
+<p align="center">
+    <a href="https://github.com/DataV-Team/datav/blob/master/LICENSE">
+      <img src="https://img.shields.io/github/license/DataV-Team/datav.svg" alt="LICENSE" />
+    </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" />
+    </a>
+</p>
+
+## What is DataV?
+
+* 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.
+
+### Install with npm
+
+```shell
+$ npm install @jiaminghi/data-view
+```
+
+### use
+
+```js
+import Vue from 'vue'
+import DataV from '@jiaminghi/data-view'
+
+Vue.use(DataV)
+
+// Introduced on demand
+import { borderBox1 } from '@jiaminghi/data-view'
+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
+
+* **Map Component**
+* Refactor underlying dependencies using **TS**.
+
+### 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/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
+
+![Feedback](./QQGroup.png)
+
+### Demo
+
+The Demo page uses the full-screen component, please view it after F11 full screen.
+
+* [Construction Data](http://datav.jiaminghi.com/demo/construction-data/index.html)
+
+![construction-data](./demoImg/construction-data.jpg)
+
+* [Manage-Desk](http://datav.jiaminghi.com/demo/manage-desk/index.html)
+
+![manage-desk](./demoImg/manage-desk.jpg)
+
+* [Electronic-File](http://datav.jiaminghi.com/demo/electronic-file/index.html)
+
+![electronic-file](./demoImg/electronic-file.jpg)
--- a/build/entry.js
+++ b/build/entry.js
@ -0,0 +1,4 @@
+import Vue from 'vue'
+import datav from '../src/index'
+
+Vue.use(datav)
--- a/build/index.js
+++ b/build/index.js
@ -0,0 +1,211 @@
+const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('@jiaminghi/fs')
+const print = require('./plugin/print')
+const path = require('path')
+const exec = require('./plugin/exec')
+
+const PACKAGE_SRC = './src'
+const COMPILE_SRC = './lib'
+const COMPONENTS_DIR = '/components'
+const ENTRANCE = '/index.js'
+const libName = 'datav'
+
+async function start () {
+  // Compile for NPM
+
+  const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)
+
+  if (!copyPackage) {
+    print.error('Exception in file copy!')
+
+    return false
+  }
+
+  print.success('Complete file copy!')
+
+  const abstract = await abstractLessFromVue()
+
+  if (!abstract) {
+    print.error('Exception in less file extraction!')
+
+    return false
+  }
+
+  print.success('Complete less file extraction!')
+
+  await compileLessToCss()
+
+  print.success('Complete less compilation to css!')
+
+  const unlink = await unlinkDirFileByExtname(COMPILE_SRC, ['.less'])
+
+  if (!unlink) {
+    print.error('Exception in less file deletion!')
+
+    return false
+  }
+
+  print.success('Complete less file deletion!')
+
+  const addImport = await addCssImport()
+
+  if (!addImport) {
+    print.error('Exception in adding css import statement!')
+
+    return false
+  }
+
+  print.success('Finish adding css import statement!')
+
+  const componentsExport = await addComponentsExport()
+
+  if (!componentsExport) {
+    print.error('Exception in adding components export statement!')
+
+    return false
+  }
+
+  print.success('Finish adding components export statement!')
+
+  // Compile for UMD version
+  const rollupCompile = await exec(`rollup -c build/rollup.config.js`)
+
+  if (!rollupCompile) {
+    print.error('Exception in rollupCompile')
+
+    return
+  }
+
+  print.tip('After rollupCompile')
+
+  const terser = await exec(`rollup -c build/rollup.terser.config.js`)
+
+  if (!terser) {
+    print.error('Exception in terser')
+
+    return
+  }
+
+  print.tip('After terser')
+
+  print.yellow('-------------------------------------')
+  print.success('     DataV Lib Compile Success!      ')
+  print.yellow('-------------------------------------')
+
+  return true
+}
+
+async function abstractLessFromVue () {
+  let abstractSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.vue') return
+
+    let template = await readFile(src)
+
+    let style = template.match(/<style[ \S\n\r]*/g)
+    if (style) style = style[0]
+    if (!style) return
+
+    style = style.replace(/<style[ a-z="']*>(\n|\r)?|<\/style>/g, '')
+    style = style.replace(/[\n\r]*$/, '')
+
+    const styleSrc = src.replace('.vue', '.less')
+    let write = await writeFile(styleSrc, style)
+
+    if (!write) {
+      print.error(styleSrc + ' write error!')
+
+      abstractSuccess = false
+    }
+
+    template = template.replace(/<style[ \S\n\r]*/g, '')
+    template = template.replace(/[\n\r]*$/, '')
+    write = await writeFile(src, template)
+
+    if (!write) {
+      print.error(src + ' rewrite error!')
+
+      abstractSuccess = false
+    }
+  })
+
+  return abstractSuccess
+}
+
+async function compileLessToCss () {
+  let compileSuccess = true
+
+  await fileForEach(COMPILE_SRC, async src => {
+    if (path.extname(src) !== '.less') return
+
+    src = src.replace('./', '')
+
+    const execString = `lessc ${src} ${src.replace('less', 'css')}`
+
+    print.yellow(execString, {
+      maxBuffer: 1024 ** 5
+    })
+
+    const compile = await exec(execString)
+
+    if (!compile) {
+      print.error(execString + ' Error!')
+
+      compileSuccess = false
+    }
+  })
+
+  return compileSuccess
+}
+
+async function addCssImport () {
+  let importSuccess = true
+
+  await fileForEach(COMPILE_SRC + COMPONENTS_DIR, async src => {
+    if (path.extname(src) !== '.js') return
+
+    let content = await readFile(src)
+
+    if (content.search(/import[ \S]* from '[\S]*\.vue'/) === -1) return
+
+    content = `import './src/main.css'\n` + content
+
+    let write = await writeFile(src, content)
+
+    if (!write) {
+      print.error(src + ' write import error!')
+
+      importSuccess = false
+    }
+  })
+
+  return importSuccess
+}
+
+async function addComponentsExport () {
+  const components = []
+
+  await dirForEach(COMPILE_SRC + COMPONENTS_DIR, src => {
+    components.push(src.split('/').slice(-1)[0])
+  })
+
+  const importString = components.reduce((all, current) => {
+    return all + '\n' + `export { default as ${current} } from '.${COMPONENTS_DIR}/${current}/index'`
+  }, '/**\n * EXPORT COMPONENTS\n */') + '\n'
+
+  const targetSrc = COMPILE_SRC + ENTRANCE
+
+  let content = await readFile(targetSrc)
+
+  content = importString + content
+
+  let write = await writeFile(targetSrc, content)
+
+  return write
+}
+
+async function compileUMDVersion () {
+
+}
+
+start()
--- a/build/plugin/exec.js
+++ b/build/plugin/exec.js
@ -0,0 +1,19 @@
+const { exec } = require('child_process')
+
+function doExec (execString, maxBuffer = 1024 ** 5) {
+  return new Promise(resolve => {
+    exec(execString, {
+      maxBuffer
+    }, err => {
+      if (err) {
+        console.error(err)
+
+        resolve(false)
+      } else {
+        resolve(true)
+      }
+    })
+  })
+}
+
+module.exports = doExec
--- a/build/plugin/print.js
+++ b/build/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
--- a/build/rollup.config.js
+++ b/build/rollup.config.js
@ -0,0 +1,22 @@
+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'
+
+export default {
+  input: 'build/entry.js',
+  output: {
+    format: 'umd',
+    file: 'dist/datav.map.vue.js',
+    name: 'datav'
+  },
+  plugins: [
+    resolve(),
+    babel({
+      exclude: 'node_modules/**'
+    }),
+    commonjs(),
+    vue(),
+  ],
+  external: ['Vue']
+}
--- a/build/rollup.terser.config.js
+++ b/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']
+}
--- a/components/borderBox1/index.vue
+++ b/components/borderBox1/index.vue
@ -1,99 +0,0 @@
-<template>
-  <div class="dv-border-box-1" :ref="ref">
-    <svg
-      width="150px"
-      height="150px"
-      :key="item"
-      v-for="item in border"
-      :class="`${item} border`"
-    >
-      <polygon
-        fill="#4fd2dd"
-        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
-      >
-        <animate
-          attributeName="fill"
-          values="#4fd2dd;#235fa7;#4fd2dd"
-          dur=".5s"
-          begin="0s"
-          repeatCount="indefinite"
-        />
-      </polygon>
-      <polygon
-        fill="#235fa7"
-        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
-      >
-        <animate
-          attributeName="fill"
-          values="#235fa7;#4fd2dd;#235fa7"
-          dur=".5s"
-          begin="0s"
-          repeatCount="indefinite"
-        />
-      </polygon>
-      <polygon
-        fill="#4fd2dd"
-        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
-      >
-        <animate
-          attributeName="fill"
-          values="#4fd2dd;#235fa7;#transparent"
-          dur="1s"
-          begin="0s"
-          repeatCount="indefinite"
-        />
-      </polygon>
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'BorderBox1',
-  data () {
-    return {
-      ref: 'border-box-1',
-
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dv-border-box-1 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .border {
-    position: absolute;
-  }
-
-  .right-top {
-    right: 0px;
-    transform: rotateY(180deg);
-  }
-
-  .left-bottom {
-    bottom: 0px;
-    transform: rotateX(180deg);
-  }
-
-  .right-bottom {
-    right: 0px;
-    bottom: 0px;
-    transform: rotateX(180deg) rotateY(180deg);
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox2/index.vue
+++ b/components/borderBox2/index.vue
@ -1,71 +0,0 @@
-<template>
-  <div class="dv-border-box-2" :ref="ref">
-    <svg class="dv-border-svg-container">
-      <polyline class="dv-bb2-line1"
-        :points="`2, 2 ${width - 2} ,2 ${width - 2}, ${height - 2} 2, ${height - 2} 2, 2`" />
-      <polyline class="dv-bb2-line2"
-        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`" />
-      <circle cx="11" cy="11" r="1" />
-      <circle :cx="width - 11" cy="11" r="1" />
-      <circle :cx="width - 11" :cy="height - 11" r="1" />
-      <circle cx="11" :cy="height - 11" r="1" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox2',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-2'
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dv-border-box-2 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dv-border-svg-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-
-    polyline {
-      fill: none;
-      stroke-width: 1;
-    }
-
-    circle {
-      fill: #fff;
-    }
-  }
-
-  .dv-bb2-line1 {
-    stroke: #fff;
-  }
-
-  .dv-bb2-line2 {
-    stroke: fade(#fff, 60);
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox3/index.vue
+++ b/components/borderBox3/index.vue
@ -1,67 +0,0 @@
-<template>
-  <div class="dv-border-box-3" :ref="ref">
-    <svg class="dv-border-svg-container">
-      <polyline class="dv-bb3-line1"
-        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
-      <polyline class="dv-bb3-line2"
-        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
-      <polyline class="dv-bb3-line2"
-        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
-      <polyline class="dv-bb3-line2"
-        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox3',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-3'
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dv-border-box-3 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dv-border-svg-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-
-    polyline {
-      fill: none;
-      stroke: #2862b7;
-    }
-  }
-
-  .dv-bb3-line1 {
-    stroke-width: 3;
-  }
-
-  .dv-bb3-line2 {
-    stroke-width: 1;
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox4/index.vue
+++ b/components/borderBox4/index.vue
@ -1,141 +0,0 @@
-<template>
-  <div class="dv-border-box-4" :ref="ref">
-    <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`">
-      <polyline class="dv-bb4-line-1" :points="`145, ${height - 5} 40, ${height - 5} 10, ${height - 35}
-        10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"/>
-      <polyline class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
-        14, ${height - 100}`" />
-      <polyline class="dv-bb4-line-3" :points="`7, ${height - 40} 7, ${height - 75}`" />
-      <polyline class="dv-bb4-line-4" :points="`28, 24 13, 41 13, 64`" />
-      <polyline class="dv-bb4-line-5" :points="`5, 45 5, 140`" />
-      <polyline class="dv-bb4-line-6" :points="`14, 75 14, 180`" />
-      <polyline class="dv-bb4-line-7" :points="`55, 11 147, 11 167, 26 250, 26`" />
-      <polyline class="dv-bb4-line-8" :points="`158, 5 173, 16`" />
-      <polyline class="dv-bb4-line-9" :points="`200, 17 ${width - 10}, 17`" />
-      <polyline class="dv-bb4-line-10" :points="`385, 17 ${width - 10}, 17`" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox4',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-4'
-    }
-  },
-  props: {
-    reverse: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-.dv-border-box-4 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dv-reverse {
-    transform: rotate(180deg);
-  }
-
-  .dv-border-svg-container {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-
-    polyline {
-      fill: none;
-    }
-  }
-
-  .sred {
-    stroke: red;
-  }
-
-  .sblue {
-    stroke: fade(blue, 80);
-  }
-
-  .sw1 {
-    stroke-width: 1;
-  }
-
-  .sw3 {
-    stroke-width: 3px;
-    stroke-linecap: round;
-  }
-
-  .dv-bb4-line-1 {
-    .sred;
-    .sw1;
-  }
-
-  .dv-bb4-line-2 {
-    .sblue;
-    .sw1;
-  }
-
-  .dv-bb4-line-3 {
-    .sred;
-    .sw3;
-  }
-
-  .dv-bb4-line-4 {
-    .sred;
-    .sw3;
-  }
-
-  .dv-bb4-line-5 {
-    .sred;
-    .sw1;
-  }
-
-  .dv-bb4-line-6 {
-    .sblue;
-    .sw1;
-  }
-
-  .dv-bb4-line-7 {
-    .sblue;
-    .sw1;
-  }
-
-  .dv-bb4-line-8 {
-    .sblue;
-    .sw3;
-  }
-
-  .dv-bb4-line-9 {
-    .sred;
-    .sw3;
-    stroke-dasharray: 100 250;
-  }
-
-  .dv-bb4-line-10 {
-    .sblue;
-    .sw1;
-    stroke-dasharray: 80 270;
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox5/index.vue
+++ b/components/borderBox5/index.vue
@ -1,87 +0,0 @@
-<template>
-  <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`">
-      <polyline class="dv-bb5-line-1" :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
-        ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`" />
-      <polyline class="dv-bb5-line-2" :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
-        ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`" />
-      <polyline class="dv-bb5-line-3" :points="`50, 13 ${width - 35}, 13`" />
-      <polyline class="dv-bb5-line-4" :points="`15, 20 ${width - 35}, 20`" />
-      <polyline class="dv-bb5-line-5" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
-      <polyline class="dv-bb5-line-6" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox5',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-5'
-    }
-  },
-  props: {
-    reverse: {
-      type: Boolean,
-      default: false
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dv-border-box-5 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dv-reverse {
-    transform: rotate(180deg);
-  }
-
-  .dv-svg-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-
-    polyline {
-      fill: none;
-    }
-  }
-
-  .dv-bb5-line-1 {
-    stroke-width: 1;
-    stroke: fade(#fff, 35);
-  }
-
-  .dv-bb5-line-2 {
-    stroke: fade(#fff, 20);
-  }
-
-  .dv-bb5-line-3, .dv-bb5-line-6 {
-    stroke-width: 5;
-    stroke: fade(#fff, 15);
-  }
-
-  .dv-bb5-line-4, .dv-bb5-line-5 {
-    stroke-width: 2;
-    stroke: fade(#fff, 15);
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox6/index.vue
+++ b/components/borderBox6/index.vue
@ -1,72 +0,0 @@
-<template>
-  <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container">
-      <circle cx="5" cy="5" r="2"/>
-      <circle :cx="width - 5" cy="5" r="2" />
-      <circle :cx="width - 5" :cy="height - 5" r="2" />
-      <circle cx="5" :cy="height - 5" r="2" />
-      <polyline :points="`10, 4 ${width - 10}, 4`" />
-      <polyline :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
-      <polyline :points="`5, 70 5, ${height - 70}`" />
-      <polyline :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
-      <polyline :points="`3, 10, 3, 50`" />
-      <polyline :points="`7, 30 7, 80`" />
-      <polyline :points="`${width - 3}, 10 ${width - 3}, 50`" />
-      <polyline :points="`${width - 7}, 30 ${width - 7}, 80`" />
-      <polyline :points="`3, ${height - 10} 3, ${height - 50}`" />
-      <polyline :points="`7, ${height - 30} 7, ${height - 80}`" />
-      <polyline :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
-      <polyline :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox6',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-6'
-    }
-  }
-}
-</script>
-
-<style lang="less">
-.dv-border-box-6 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .dv-svg-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-
-    circle {
-      fill: gray;
-    }
-
-    polyline {
-      fill: none;
-      stroke-width: 1;
-      stroke: fade(#fff, 35);
-    }
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/borderBox7/index.vue
+++ b/components/borderBox7/index.vue
@ -1,74 +0,0 @@
-<template>
-  <div class="dv-border-box-7" :ref="ref">
-    <svg class="dv-svg-container">
-      <polyline class="dv-bb7-line-width-2" :points="`0, 25 0, 0 25, 0`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
-      <polyline class="dv-bb7-line-width-2" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
-      <polyline class="dv-bb7-line-width-2" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
-
-      <polyline class="dv-bb7-line-width-5" :points="`0, 10 0, 0 10, 0`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
-      <polyline class="dv-bb7-line-width-5" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
-      <polyline class="dv-bb7-line-width-5" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
-    </svg>
-
-    <div class="border-box-content">
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script>
-import autoResize from '../../mixins/autoResize.js'
-
-export default {
-  name: 'BorderBox7',
-  mixins: [autoResize],
-  data () {
-    return {
-      ref: 'border-box-7'
-    }
-  }
-}
-</script>
-
-<style lang="less">
-@color: fade(gray, 30);
-
-.dv-border-box-7 {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  box-shadow: inset 0 0 40px fade(@color, 30);
-  border: 1px solid @color;
-
-  .dv-svg-container {
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    width: 100%;
-    height: 100%;
-
-    polyline {
-      fill: none;
-      stroke-linecap: round;
-    }
-  }
-
-  .dv-bb7-line-width-2 {
-    stroke: @color;
-    stroke-width: 2;
-  }
-
-  .dv-bb7-line-width-5 {
-    stroke: fade(gray, 50);
-    stroke-width: 5;
-  }
-
-  .border-box-content {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-}
-</style>
--- a/components/fullScreenContainer/index.vue
+++ b/components/fullScreenContainer/index.vue
@ -1,68 +0,0 @@
-<template>
-  <div id="dv-full-screen-container" ref="full-screen-container">
-    <slot></slot>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'FullScreenContainer',
-  data () {
-    return {
-      scale: 0,
-      datavRoot: ''
-    }
-  },
-  methods: {
-    init () {
-      const { initConfig, setAppScale, bindReSizeEventHandler } = this
-
-      initConfig()
-
-      setAppScale()
-
-      bindReSizeEventHandler()
-    },
-    initConfig () {
-      const { width, height } = screen
-
-      this.allWidth = width
-
-      const datavRoot = this.datavRoot = this.$refs['full-screen-container']
-
-      datavRoot.style.width = `${width}px`
-      datavRoot.style.height = `${height}px`
-    },
-    setAppScale () {
-      const { allWidth, datavRoot } = this
-
-      const currentWidth = document.body.clientWidth
-
-      datavRoot.style.transform = `scale(${currentWidth / allWidth})`
-    },
-    bindReSizeEventHandler () {
-      const { debounce, setAppScale } = this
-
-      if (!debounce) return
-
-      window.addEventListener('resize', debounce(100, setAppScale))
-    }
-  },
-  mounted () {
-    const { init } = this
-
-    init()
-  }
-}
-</script>
-
-<style lang="less">
-#dv-full-screen-container {
-  position: fixed;
-  top: 0px;
-  left: 0px;
-  overflow: hidden;
-  transform-origin: left top;
-  z-index: 999;
-}
-</style>
--- a/components/index.js
+++ b/components/index.js
@ -1,72 +0,0 @@
-import fullScreenContainer from './fullScreenContainer'
-import loading from './loading/index.vue'
-
-// border box
-import borderBox1 from './borderBox1/index'
-import borderBox2 from './borderBox2/index'
-import borderBox3 from './borderBox3/index'
-import borderBox4 from './borderBox4/index'
-import borderBox5 from './borderBox5/index'
-import borderBox6 from './borderBox6/index'
-import borderBox7 from './borderBox7/index'
-import borderBox8 from './borderBox8/index'
-
-// decoration
-import decoration1 from './decoration1/index'
-import decoration2 from './decoration2/index'
-import decoration3 from './decoration3/index'
-import decoration4 from './decoration4/index'
-import decoration5 from './decoration5/index'
-import decoration6 from './decoration6/index'
-import decoration7 from './decoration7/index'
-import decoration8 from './decoration8/index'
-
-// charts
-import charts from './charts/index.vue'
-
-import activeRingChart from './activeRingChart'
-import waterLevelPond from './waterLevelPond/index.vue'
-import percentPond from './percentPond/index.vue'
-import flylineChart from './flylineChart'
-import conicalColumnChart from './conicalColumnChart'
-import digitalFlop from './digitalFlop'
-import scrollBoard from './scrollBoard/index.vue'
-import scrollRankingBoard from './scrollRankingBoard/index.vue'
-
-export default function (Vue) {
-  Vue.component('dvFullScreenContainer', fullScreenContainer)
-
-  Vue.component('dvLoading', loading)
-
-  // border box
-  Vue.component('dvBorderBox1', borderBox1)
-  Vue.component('dvBorderBox2', borderBox2)
-  Vue.component('dvBorderBox3', borderBox3)
-  Vue.component('dvBorderBox4', borderBox4)
-  Vue.component('dvBorderBox5', borderBox5)
-  Vue.component('dvBorderBox6', borderBox6)
-  Vue.component('dvBorderBox7', borderBox7)
-  Vue.component('dvBorderBox8', borderBox8)
-
-  // decoration
-  Vue.component('dvDecoration1', decoration1)
-  Vue.component('dvDecoration2', decoration2)
-  Vue.component('dvDecoration3', decoration3)
-  Vue.component('dvDecoration4', decoration4)
-  Vue.component('dvDecoration5', decoration5)
-  Vue.component('dvDecoration6', decoration6)
-  Vue.component('dvDecoration7', decoration7)
-  Vue.component('dvDecoration8', decoration8)
-
-  // charts
-  Vue.component('dvCharts', charts)
-
-  Vue.component('dvActiveRingChart', activeRingChart)
-  Vue.component('dvWaterLevelPond', waterLevelPond)
-  Vue.component('dvPercentPond', percentPond)
-  Vue.component('dvFlylineChart', flylineChart)
-  Vue.component('dvConicalColumnChart', conicalColumnChart)
-  Vue.component('dvDigitalFlop', digitalFlop)
-  Vue.component('dvScrollBoard', scrollBoard)
-  Vue.component('dvScrollRankingBoard', scrollRankingBoard)
-}
--- a/demoImg/construction-data.jpg
+++ b/demoImg/construction-data.jpg
--- a/demoImg/electronic-file.jpg
+++ b/demoImg/electronic-file.jpg
--- a/demoImg/manage-desk.jpg
+++ b/demoImg/manage-desk.jpg
--- a/deploy/index.js
+++ b/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
+})
--- a/deploy/plugin/ftp.js
+++ b/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
+}
--- a/deploy/plugin/nodeParams.js
+++ b/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
--- a/deploy/plugin/print.js
+++ b/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
--- a/dist/datav.map.vue.js
+++ b/dist/datav.map.vue.js
--- a/dist/datav.min.vue.js
+++ b/dist/datav.min.vue.js
--- a/icon.png
+++ b/icon.png
--- a/index.js
+++ b/index.js
@ -1,5 +0,0 @@
-import components from './components/index'
-
-export default function (Vue) {
-  components(Vue)
-}
--- a/lib/components/activeRingChart/index.js
+++ b/lib/components/activeRingChart/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import ActiveRingChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ActiveRingChart.name, ActiveRingChart)
+}
--- a/lib/components/activeRingChart/src/main.css
+++ b/lib/components/activeRingChart/src/main.css
@ -0,0 +1,32 @@
+.dv-active-ring-chart {
+  position: relative;
+}
+.dv-active-ring-chart .active-ring-chart-container {
+  width: 100%;
+  height: 100%;
+}
+.dv-active-ring-chart .active-ring-info {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dv-active-ring-chart .active-ring-info .dv-digital-flop {
+  width: 100px;
+  height: 30px;
+}
+.dv-active-ring-chart .active-ring-info .active-ring-name {
+  width: 100px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
--- a/lib/components/activeRingChart/src/main.vue
+++ b/lib/components/activeRingChart/src/main.vue
@ -0,0 +1,294 @@
+<template>
+  <div class="dv-active-ring-chart">
+    <div class="active-ring-chart-container" ref="active-ring-chart" />
+    <div class="active-ring-info">
+      <dv-digital-flop :config="digitalFlop" />
+      <div class="active-ring-name" :style="fontSize">{{ ringName }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Charts from '@jiaminghi/charts'
+
+import dvDigitalFlop from '../../digitalFlop/src/main.vue'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvActiveRingChart',
+  components: {
+    dvDigitalFlop
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      defaultConfig: {
+        /**
+         * @description Ring radius
+         * @type {String|Number}
+         * @default radius = '50%'
+         * @example radius = '50%' | 100
+         */
+        radius: '50%',
+        /**
+         * @description Active ring radius
+         * @type {String|Number}
+         * @default activeRadius = '55%'
+         * @example activeRadius = '55%' | 110
+         */
+        activeRadius: '55%',
+        /**
+         * @description Ring data
+         * @type {Array<Object>}
+         * @default data = [{ name: '', value: 0 }]
+         */
+        data: [{ name: '', value: 0 }],
+        /**
+         * @description Ring line width
+         * @type {Number}
+         * @default lineWidth = 20
+         */
+        lineWidth: 20,
+        /**
+         * @description Active time gap (ms)
+         * @type {Number}
+         * @default activeTimeGap = 3000
+         */
+        activeTimeGap: 3000,
+        /**
+         * @description Ring color (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @default color = [Charts Default Color]
+         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        color: [],
+        /**
+         * @description Digital flop style
+         * @type {Object}
+         */
+        digitalFlopStyle: {
+          fontSize: 25,
+          fill: '#fff'
+        },
+        /**
+         * @description Digital flop toFixed
+         * @type {Number}
+         */
+        digitalFlopToFixed: 0,
+        /**
+         * @description CRender animationCurve
+         * @type {String}
+         * @default animationCurve = 'easeOutCubic'
+         */
+        animationCurve: 'easeOutCubic',
+        /**
+         * @description CRender animationFrame
+         * @type {String}
+         * @default animationFrame = 50
+         */
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
+      },
+
+      mergedConfig: null,
+
+      chart: null,
+
+      activeIndex: 0,
+
+      animationHandler: ''
+    }
+  },
+  computed: {
+    digitalFlop() {
+      const { mergedConfig, activeIndex } = this
+
+      if (!mergedConfig) return {}
+
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue
+      } = mergedConfig
+
+      const value = data.map(({ value }) => value)
+
+      let displayValue
+
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
+
+      return {
+        content: showOriginValue ? '{nt}' : '{nt}%',
+        number: [displayValue],
+        style: digitalFlopStyle,
+        toFixed: digitalFlopToFixed
+      }
+    },
+    ringName() {
+      const { mergedConfig, activeIndex } = this
+
+      if (!mergedConfig) return ''
+
+      return mergedConfig.data[activeIndex].name
+    },
+    fontSize() {
+      const { mergedConfig } = this
+
+      if (!mergedConfig) return ''
+
+      return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
+    }
+  },
+  watch: {
+    config() {
+      const { animationHandler, mergeConfig, setRingOption } = this
+
+      clearTimeout(animationHandler)
+
+      this.activeIndex = 0
+
+      mergeConfig()
+
+      setRingOption()
+    }
+  },
+  methods: {
+    init() {
+      const { initChart, mergeConfig, setRingOption } = this
+
+      initChart()
+
+      mergeConfig()
+
+      setRingOption()
+    },
+    initChart() {
+      const { $refs } = this
+
+      this.chart = new Charts($refs['active-ring-chart'])
+    },
+    mergeConfig() {
+      const { defaultConfig, config } = this
+
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
+    },
+    setRingOption() {
+      const { getRingOption, chart, ringAnimation } = this
+
+      const option = getRingOption()
+
+      chart.setOption(option, true)
+
+      ringAnimation()
+    },
+    getRingOption() {
+      const { mergedConfig, getRealRadius } = this
+
+      const radius = getRealRadius()
+
+      mergedConfig.data.forEach(dataItem => {
+        dataItem.radius = radius
+      })
+
+      return {
+        series: [
+          {
+            type: 'pie',
+            ...mergedConfig,
+            outsideLabel: {
+              show: false
+            }
+          }
+        ],
+        color: mergedConfig.color
+      }
+    },
+    getRealRadius(active = false) {
+      const { mergedConfig, chart } = this
+
+      const { radius, activeRadius, lineWidth } = mergedConfig
+
+      const maxRadius = Math.min(...chart.render.area) / 2
+
+      const halfLineWidth = lineWidth / 2
+
+      let realRadius = active ? activeRadius : radius
+
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
+
+      const insideRadius = realRadius - halfLineWidth
+      const outSideRadius = realRadius + halfLineWidth
+
+      return [insideRadius, outSideRadius]
+    },
+    ringAnimation() {
+      let { activeIndex, getRingOption, chart, getRealRadius } = this
+
+      const radius = getRealRadius()
+      const active = getRealRadius(true)
+
+      const option = getRingOption()
+
+      const { data } = option.series[0]
+
+      data.forEach((dataItem, i) => {
+        if (i === activeIndex) {
+          dataItem.radius = active
+        } else {
+          dataItem.radius = radius
+        }
+      })
+
+      chart.setOption(option, true)
+
+      const { activeTimeGap } = option.series[0]
+
+      this.animationHandler = setTimeout(foo => {
+        activeIndex += 1
+
+        if (activeIndex >= data.length) activeIndex = 0
+
+        this.activeIndex = activeIndex
+
+        this.ringAnimation()
+      }, activeTimeGap)
+    }
+  },
+  mounted() {
+    const { init } = this
+
+    init()
+  },
+  beforeDestroy() {
+    const { animationHandler } = this
+
+    clearTimeout(animationHandler)
+  }
+}
+</script>
--- a/lib/components/borderBox1/index.js
+++ b/lib/components/borderBox1/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox1.name, BorderBox1)
+}
--- a/lib/components/borderBox1/src/main.css
+++ b/lib/components/borderBox1/src/main.css
@ -0,0 +1,27 @@
+.dv-border-box-1 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-1 .border {
+  position: absolute;
+  display: block;
+}
+.dv-border-box-1 .right-top {
+  right: 0px;
+  transform: rotateY(180deg);
+}
+.dv-border-box-1 .left-bottom {
+  bottom: 0px;
+  transform: rotateX(180deg);
+}
+.dv-border-box-1 .right-bottom {
+  right: 0px;
+  bottom: 0px;
+  transform: rotateX(180deg) rotateY(180deg);
+}
+.dv-border-box-1 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox1/src/main.vue
+++ b/lib/components/borderBox1/src/main.vue
@ -0,0 +1,116 @@
+<template>
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        :fill="mergedColor[0]"
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        :fill="mergedColor[1]"
+        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        :fill="mergedColor[0]"
+        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: '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'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox10/index.js
+++ b/lib/components/borderBox10/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox10 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox10.name, BorderBox10)
+}
--- a/lib/components/borderBox10/src/main.css
+++ b/lib/components/borderBox10/src/main.css
@ -0,0 +1,28 @@
+.dv-border-box-10 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+}
+.dv-border-box-10 .border {
+  position: absolute;
+  display: block;
+}
+.dv-border-box-10 .right-top {
+  right: 0px;
+  transform: rotateY(180deg);
+}
+.dv-border-box-10 .left-bottom {
+  bottom: 0px;
+  transform: rotateX(180deg);
+}
+.dv-border-box-10 .right-bottom {
+  right: 0px;
+  bottom: 0px;
+  transform: rotateX(180deg) rotateY(180deg);
+}
+.dv-border-box-10 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox10/src/main.vue
+++ b/lib/components/borderBox10/src/main.vue
@ -0,0 +1,80 @@
+<template>
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        :fill="mergedColor[1]"
+        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: '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'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox11/index.js
+++ b/lib/components/borderBox11/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox11.name, BorderBox11)
+}
--- a/lib/components/borderBox11/src/main.css
+++ b/lib/components/borderBox11/src/main.css
@ -0,0 +1,21 @@
+.dv-border-box-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-11 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-11 .dv-border-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-11 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox11/src/main.vue
+++ b/lib/components/borderBox11/src/main.vue
@ -0,0 +1,279 @@
+<template>
+  <div class="dv-border-box-11" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="2" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
+          <feFlood :flood-color="mergedColor[1]" result="glowColor" />
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <polygon :fill="backgroundColor" :points="`
+        20, 32 ${width * 0.5 - titleWidth / 2}, 32 ${width * 0.5 - titleWidth / 2 + 20}, 53
+        ${width * 0.5 + titleWidth / 2 - 20}, 53 ${width * 0.5 + titleWidth / 2}, 32
+        ${width - 20}, 32 ${width - 8}, 48 ${width - 8}, ${height - 25} ${width - 20}, ${height - 8}
+        20, ${height - 8} 8, ${height - 25} 8, 50
+      `" />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width - titleWidth) / 2}, 30
+          20, 30 7, 50 7, ${50 + (height - 167) / 2}
+          13, ${55 + (height - 167) / 2} 13, ${135 + (height - 167) / 2}
+          7, ${140 + (height - 167) / 2} 7, ${height - 27}
+          20, ${height - 7} ${width - 20}, ${height - 7} ${width - 7}, ${height - 27}
+          ${width - 7}, ${140 + (height - 167) / 2} ${width - 13}, ${135 + (height - 167) / 2}
+          ${width - 13}, ${55 + (height - 167) / 2} ${width - 7}, ${50 + (height - 167) / 2}
+          ${width - 7}, 50 ${width - 20}, 30 ${(width + titleWidth) / 2}, 30
+          ${(width + titleWidth) / 2 - 20}, 7 ${(width - titleWidth) / 2 + 20}, 7
+          ${(width - titleWidth) / 2}, 30 ${(width - titleWidth) / 2 + 20}, 52
+          ${(width + titleWidth) / 2 - 20}, 52 ${(width + titleWidth) / 2}, 30
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width + titleWidth) / 2 - 5}, 30 ${(width + titleWidth) / 2 - 21}, 11
+          ${(width + titleWidth) / 2 - 27}, 11 ${(width + titleWidth) / 2 - 8}, 34
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        fill="transparent"
+        :points="`
+          ${(width - titleWidth) / 2 + 5}, 30 ${(width - titleWidth) / 2 + 22}, 49
+          ${(width - titleWidth) / 2 + 28}, 49 ${(width - titleWidth) / 2 + 8}, 26
+        `"
+      />
+
+      <polygon
+        :stroke="mergedColor[0]"
+        :fill="fade(mergedColor[1] || defaultColor[1], 30)"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${(width + titleWidth) / 2 - 11}, 37 ${(width + titleWidth) / 2 - 32}, 11
+          ${(width - titleWidth) / 2 + 23}, 11 ${(width - titleWidth) / 2 + 11}, 23
+          ${(width - titleWidth) / 2 + 33}, 49 ${(width + titleWidth) / 2 - 22}, 49
+        `"
+      />
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width - titleWidth) / 2 - 10}, 37 ${(width - titleWidth) / 2 - 31}, 37
+          ${(width - titleWidth) / 2 - 25}, 46 ${(width - titleWidth) / 2 - 4}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width - titleWidth) / 2 - 40}, 37 ${(width - titleWidth) / 2 - 61}, 37
+          ${(width - titleWidth) / 2 - 55}, 46 ${(width - titleWidth) / 2 - 34}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width - titleWidth) / 2 - 70}, 37 ${(width - titleWidth) / 2 - 91}, 37
+          ${(width - titleWidth) / 2 - 85}, 46 ${(width - titleWidth) / 2 - 64}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="1"
+        :points="`
+          ${(width + titleWidth) / 2 + 30}, 37 ${(width + titleWidth) / 2 + 9}, 37
+          ${(width + titleWidth) / 2 + 3}, 46 ${(width + titleWidth) / 2 + 24}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="1;0.7;1"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.7"
+        :points="`
+          ${(width + titleWidth) / 2 + 60}, 37 ${(width + titleWidth) / 2 + 39}, 37
+          ${(width + titleWidth) / 2 + 33}, 46 ${(width + titleWidth) / 2 + 54}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.7;0.4;0.7"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <polygon
+        :filter="`url(#${filterId})`"
+        :fill="mergedColor[0]"
+        opacity="0.5"
+        :points="`
+          ${(width + titleWidth) / 2 + 90}, 37 ${(width + titleWidth) / 2 + 69}, 37
+          ${(width + titleWidth) / 2 + 63}, 46 ${(width + titleWidth) / 2 + 84}, 46
+        `"
+      >
+        <animate
+          attributeName="opacity"
+          values="0.5;0.2;0.5"
+          dur="2s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+
+      <text
+        class="dv-border-box-11-title"
+        :x="`${width / 2}`"
+        y="32"
+        fill="#fff"
+        font-size="18"
+        text-anchor="middle"
+        dominant-baseline="middle"
+      >
+        {{ title }}
+      </text>
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          7, ${53 + (height - 167) / 2} 11, ${57 + (height - 167) / 2}
+          11, ${133 + (height - 167) / 2} 7, ${137 + (height - 167) / 2}
+        `"
+      />
+
+      <polygon
+        :fill="mergedColor[0]"
+        :filter="`url(#${filterId})`"
+        :points="`
+          ${width - 7}, ${53 + (height - 167) / 2} ${width - 11}, ${57 + (height - 167) / 2}
+          ${width - 11}, ${133 + (height - 167) / 2} ${width - 7}, ${137 + (height - 167) / 2}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    titleWidth: {
+      type: Number,
+      default: 250
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${timestamp}`,
+
+      defaultColor: ['#8aaafb', '#1f33a2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox12/index.js
+++ b/lib/components/borderBox12/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox12 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox12.name, BorderBox12)
+}
--- a/lib/components/borderBox12/src/main.css
+++ b/lib/components/borderBox12/src/main.css
@ -0,0 +1,17 @@
+.dv-border-box-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-12 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-12 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox12/src/main.vue
+++ b/lib/components/borderBox12/src/main.vue
@ -0,0 +1,147 @@
+<template>
+  <div class="dv-border-box-12" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <defs>
+        <filter :id="filterId" height="150%" width="150%" x="-25%" y="-25%">
+          <feMorphology operator="dilate" radius="1" in="SourceAlpha" result="thicken" />
+          <feGaussianBlur in="thicken" stdDeviation="2" result="blurred" />
+          <feFlood :flood-color="fade(mergedColor[1] || defaultColor[1], 70)" result="glowColor">
+            <animate
+              attributeName="flood-color"
+              :values="`
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+                ${fade(mergedColor[1] || defaultColor[1], 30)};
+                ${fade(mergedColor[1] || defaultColor[1], 70)};
+              `"
+              dur="3s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </feFlood>
+          <feComposite in="glowColor" in2="blurred" operator="in" result="softGlowColored" />
+          <feMerge>
+            <feMergeNode in="softGlowColored"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+
+      <path
+        v-if="width && height"
+        :fill="backgroundColor"
+        stroke-width="2"
+        :stroke="mergedColor[0]"
+        :d="`
+          M15 5 L ${width - 15} 5 Q ${width - 5} 5, ${width - 5} 15
+          L ${width - 5} ${height - 15} Q ${width - 5} ${height - 5}, ${width - 15} ${height - 5}
+          L 15, ${height - 5} Q 5 ${height - 5} 5 ${height - 15} L 5 15
+          Q 5 5 15 5
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M 20 5 L 15 5 Q 5 5 5 15 L 5 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 20} 5 L ${width - 15} 5 Q ${width - 5} 5 ${width - 5} 15 L ${width - 5} 20`"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M ${width - 20} ${height - 5} L ${width - 15} ${height - 5}
+          Q ${width - 5} ${height - 5} ${width - 5} ${height - 15}
+          L ${width - 5} ${height - 20}
+        `"
+      />
+
+      <path
+        stroke-width="2"
+        fill="transparent"
+        stroke-linecap="round"
+        :filter="`url(#${filterId})`"
+        :stroke="mergedColor[1]"
+        :d="`
+          M 20 ${height - 5} L 15 ${height - 5}
+          Q 5 ${height - 5} 5 ${height - 15}
+          L 5 ${height - 20}
+        `"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvBorderBox12',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const timestamp = +new Date()
+    return {
+      ref: 'border-box-12',
+      filterId: `borderr-box-12-filterId-${timestamp}`,
+
+      defaultColor: ['#2e6099', '#7ce7fd'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox13/index.js
+++ b/lib/components/borderBox13/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox13 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox13.name, BorderBox13)
+}
--- a/lib/components/borderBox13/src/main.css
+++ b/lib/components/borderBox13/src/main.css
@ -0,0 +1,17 @@
+.dv-border-box-13 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-13 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-13 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox13/src/main.vue
+++ b/lib/components/borderBox13/src/main.vue
@ -0,0 +1,93 @@
+<template>
+  <div class="dv-border-box-13" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <path
+        :fill="backgroundColor"
+        :stroke="mergedColor[0]"
+        :d="`
+          M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
+          L ${width - 20} 10 L ${width - 5} 25
+          L ${width - 5} ${height - 5} L 20 ${height - 5}
+          L 5 ${height - 20} L 5 20
+        `"
+      />
+
+      <path
+        fill="transparent"
+        stroke-width="3"
+        stroke-linecap="round"
+        stroke-dasharray="10, 5"
+        :stroke="mergedColor[0]"
+        :d="`M 16 9 L 61 9`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M 5 20 L 5 10 L 12 3  L 60 3 L 68 10`"
+      />
+
+      <path
+        fill="transparent"
+        :stroke="mergedColor[1]"
+        :d="`M ${width - 5} ${height - 30} L ${width - 5} ${height - 5} L ${width - 30} ${height - 5}`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox13',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const timestamp = +new Date()
+    return {
+      ref: 'border-box-13',
+
+      defaultColor: ['#6586ec', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox2/index.js
+++ b/lib/components/borderBox2/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox2.name, BorderBox2)
+}
--- a/lib/components/borderBox2/src/main.css
+++ b/lib/components/borderBox2/src/main.css
@ -0,0 +1,21 @@
+.dv-border-box-2 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-2 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-2 .dv-border-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-2 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox2/src/main.vue
+++ b/lib/components/borderBox2/src/main.vue
@ -0,0 +1,77 @@
+<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`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        :points="`6, 6 ${width - 6}, 6 ${width - 6}, ${height - 6} 6, ${height - 6} 6, 6`"
+      />
+      <circle :fill="mergedColor[0]" cx="11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" cy="11" r="1" />
+      <circle :fill="mergedColor[0]" :cx="width - 11" :cy="height - 11" r="1" />
+      <circle :fill="mergedColor[0]" cx="11" :cy="height - 11" r="1" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox2',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-2',
+
+      defaultColor: ['#fff', 'rgba(255, 255, 255, 0.6)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox3/index.js
+++ b/lib/components/borderBox3/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox3.name, BorderBox3)
+}
--- a/lib/components/borderBox3/src/main.css
+++ b/lib/components/borderBox3/src/main.css
@ -0,0 +1,26 @@
+.dv-border-box-3 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-3 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-3 .dv-border-svg-container polyline {
+  fill: none;
+}
+.dv-border-box-3 .dv-bb3-line1 {
+  stroke-width: 3;
+}
+.dv-border-box-3 .dv-bb3-line2 {
+  stroke-width: 1;
+}
+.dv-border-box-3 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox3/src/main.vue
+++ b/lib/components/borderBox3/src/main.vue
@ -0,0 +1,81 @@
+<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`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="mergedColor[1]"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="mergedColor[1]"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`"
+      />
+      <polyline class="dv-bb3-line2"
+        :stroke="mergedColor[1]"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
+      />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox3',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-3',
+
+      defaultColor: ['#2862b7', '#2862b7'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox4/index.js
+++ b/lib/components/borderBox4/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox4 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox4.name, BorderBox4)
+}
--- a/lib/components/borderBox4/src/main.css
+++ b/lib/components/borderBox4/src/main.css
@ -0,0 +1,66 @@
+.dv-border-box-4 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-4 .dv-reverse {
+  transform: rotate(180deg);
+}
+.dv-border-box-4 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-4 .dv-border-svg-container polyline {
+  fill: none;
+}
+.dv-border-box-4 .sw1 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .sw3 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+.dv-border-box-4 .dv-bb4-line-1 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .dv-bb4-line-2 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .dv-bb4-line-3 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+.dv-border-box-4 .dv-bb4-line-4 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+.dv-border-box-4 .dv-bb4-line-5 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .dv-bb4-line-6 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .dv-bb4-line-7 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .dv-bb4-line-8 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+.dv-border-box-4 .dv-bb4-line-9 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+  stroke-dasharray: 100 250;
+}
+.dv-border-box-4 .dv-bb4-line-10 {
+  stroke-width: 1;
+  stroke-dasharray: 80 270;
+}
+.dv-border-box-4 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox4/src/main.vue
+++ b/lib/components/borderBox4/src/main.vue
@ -0,0 +1,89 @@
+<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}
+          10, 40 40, 5 150, 5 170, 20 ${width - 15}, 20`"
+      />
+      <polyline
+        :stroke="mergedColor[1]"
+        class="dv-bb4-line-2" :points="`245, ${height - 1} 36, ${height - 1} 14, ${height - 23}
+          14, ${height - 100}`"
+      />
+
+      <polyline class="dv-bb4-line-3" :stroke="mergedColor[0]" :points="`7, ${height - 40} 7, ${height - 75}`" />
+      <polyline class="dv-bb4-line-4" :stroke="mergedColor[0]" :points="`28, 24 13, 41 13, 64`" />
+      <polyline class="dv-bb4-line-5" :stroke="mergedColor[0]" :points="`5, 45 5, 140`" />
+      <polyline class="dv-bb4-line-6" :stroke="mergedColor[1]" :points="`14, 75 14, 180`" />
+      <polyline class="dv-bb4-line-7" :stroke="mergedColor[1]" :points="`55, 11 147, 11 167, 26 250, 26`" />
+      <polyline class="dv-bb4-line-8" :stroke="mergedColor[1]" :points="`158, 5 173, 16`" />
+      <polyline class="dv-bb4-line-9" :stroke="mergedColor[0]" :points="`200, 17 ${width - 10}, 17`" />
+      <polyline class="dv-bb4-line-10" :stroke="mergedColor[1]" :points="`385, 17 ${width - 10}, 17`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox4',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-4',
+
+      defaultColor: ['red', 'rgba(0,0,255,0.8)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox5/index.js
+++ b/lib/components/borderBox5/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox5 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox5.name, BorderBox5)
+}
--- a/lib/components/borderBox5/src/main.css
+++ b/lib/components/borderBox5/src/main.css
@ -0,0 +1,35 @@
+.dv-border-box-5 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-5 .dv-reverse {
+  transform: rotate(180deg);
+}
+.dv-border-box-5 .dv-svg-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-5 .dv-svg-container polyline {
+  fill: none;
+}
+.dv-border-box-5 .dv-bb5-line-1,
+.dv-border-box-5 .dv-bb5-line-2 {
+  stroke-width: 1;
+}
+.dv-border-box-5 .dv-bb5-line-3,
+.dv-border-box-5 .dv-bb5-line-6 {
+  stroke-width: 5;
+}
+.dv-border-box-5 .dv-bb5-line-4,
+.dv-border-box-5 .dv-bb5-line-5 {
+  stroke-width: 2;
+}
+.dv-border-box-5 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox5/src/main.vue
+++ b/lib/components/borderBox5/src/main.vue
@ -0,0 +1,85 @@
+<template>
+  <div class="dv-border-box-5" :ref="ref">
+    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
+      <polyline
+        class="dv-bb5-line-1"
+        :stroke="mergedColor[0]"
+        :points="`8, 5 ${width - 5}, 5 ${width - 5}, ${height - 100}
+          ${width - 100}, ${height - 5} 8, ${height - 5} 8, 5`"
+      />
+      <polyline
+        class="dv-bb5-line-2"
+        :stroke="mergedColor[1]"
+        :points="`3, 5 ${width - 20}, 5 ${width - 20}, ${height - 60}
+          ${width - 74}, ${height - 5} 3, ${height - 5} 3, 5`"
+      />
+      <polyline class="dv-bb5-line-3" :stroke="mergedColor[1]" :points="`50, 13 ${width - 35}, 13`" />
+      <polyline class="dv-bb5-line-4" :stroke="mergedColor[1]" :points="`15, 20 ${width - 35}, 20`" />
+      <polyline class="dv-bb5-line-5" :stroke="mergedColor[1]" :points="`15, ${height - 20} ${width - 110}, ${height - 20}`" />
+      <polyline class="dv-bb5-line-6" :stroke="mergedColor[1]" :points="`15, ${height - 13} ${width - 110}, ${height - 13}`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox5',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-5',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'rgba(255, 255, 255, 0.20)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox6/index.js
+++ b/lib/components/borderBox6/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox6 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox6.name, BorderBox6)
+}
--- a/lib/components/borderBox6/src/main.css
+++ b/lib/components/borderBox6/src/main.css
@ -0,0 +1,21 @@
+.dv-border-box-6 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-6 .dv-svg-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-6 .dv-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-6 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox6/src/main.vue
+++ b/lib/components/borderBox6/src/main.vue
@ -0,0 +1,81 @@
+<template>
+  <div class="dv-border-box-6" :ref="ref">
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
+      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
+      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
+      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
+      <circle :fill="mergedColor[1]" cx="5" :cy="height - 5" r="2" />
+      <polyline :stroke="mergedColor[0]" :points="`10, 4 ${width - 10}, 4`" />
+      <polyline :stroke="mergedColor[0]" :points="`10, ${height - 4} ${width - 10}, ${height - 4}`" />
+      <polyline :stroke="mergedColor[0]" :points="`5, 70 5, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 5}, 70 ${width - 5}, ${height - 70}`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, 10, 3, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, 30 7, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, 10 ${width - 3}, 50`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, 30 ${width - 7}, 80`" />
+      <polyline :stroke="mergedColor[0]" :points="`3, ${height - 10} 3, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`7, ${height - 30} 7, ${height - 80}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 3}, ${height - 10} ${width - 3}, ${height - 50}`" />
+      <polyline :stroke="mergedColor[0]" :points="`${width - 7}, ${height - 30} ${width - 7}, ${height - 80}`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize.js'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox6',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-6',
+
+      defaultColor: ['rgba(255, 255, 255, 0.35)', 'gray'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox7/index.js
+++ b/lib/components/borderBox7/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox7 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox7.name, BorderBox7)
+}
--- a/lib/components/borderBox7/src/main.css
+++ b/lib/components/borderBox7/src/main.css
@ -0,0 +1,27 @@
+.dv-border-box-7 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-7 .dv-svg-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-7 .dv-svg-container polyline {
+  fill: none;
+  stroke-linecap: round;
+}
+.dv-border-box-7 .dv-bb7-line-width-2 {
+  stroke-width: 2;
+}
+.dv-border-box-7 .dv-bb7-line-width-5 {
+  stroke-width: 5;
+}
+.dv-border-box-7 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox7/src/main.vue
+++ b/lib/components/borderBox7/src/main.vue
@ -0,0 +1,75 @@
+
+<template>
+  <div
+    class="dv-border-box-7"
+    :style="`box-shadow: inset 0 0 40px ${mergedColor[0]}; border: 1px solid ${mergedColor[0]}; background-color: ${backgroundColor}`"
+    :ref="ref"
+  >
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, ${height - 25} 0, ${height} 25, ${height}`" />
+
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, 10 0, 0 10, 0`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, 0 ${width}, 0 ${width}, 10`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`${width - 10}, ${height} ${width}, ${height} ${width}, ${height - 10}`" />
+      <polyline class="dv-bb7-line-width-5" :stroke="mergedColor[1]" :points="`0, ${height - 10} 0, ${height} 10, ${height}`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox7',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    return {
+      ref: 'border-box-7',
+
+      defaultColor: ['rgba(128,128,128,0.3)', 'rgba(128,128,128,0.5)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox8/index.js
+++ b/lib/components/borderBox8/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox8 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox8.name, BorderBox8)
+}
--- a/lib/components/borderBox8/src/main.css
+++ b/lib/components/borderBox8/src/main.css
@ -0,0 +1,17 @@
+.dv-border-box-8 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-8 svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+.dv-border-box-8 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox8/src/main.vue
+++ b/lib/components/borderBox8/src/main.vue
@ -0,0 +1,141 @@
+<template>
+  <div class="dv-border-box-8" :ref="ref">
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <defs>
+        <path
+          :id="path"
+          :d="pathD"
+          fill="transparent"
+        />
+        <radialGradient
+          :id="gradient"
+          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>
+
+        <mask :id="mask">
+          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+            <animateMotion
+              :dur="`${dur}s`"
+              :path="pathD"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </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"
+        :xlink:href="`#${path}`"
+      />
+
+      <use
+        :stroke="mergedColor[1]"
+        stroke-width="3"
+        :xlink:href="`#${path}`"
+        :mask="`url(#${mask})`"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          :from="`0, ${length}`"
+          :to="`${length}, 0`"
+          :dur="`${dur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox8',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: 'border-box-8',
+      path: `border-box-8-path-${timestamp}`,
+      gradient: `border-box-8-gradient-${timestamp}`,
+      mask: `border-box-8-mask-${timestamp}`,
+
+      defaultColor: ['#235fa7', '#4fd2dd'],
+
+      mergedColor: []
+    }
+  },
+  computed: {
+    length () {
+      const { width, height } = this
+
+      return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/borderBox9/index.js
+++ b/lib/components/borderBox9/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import BorderBox9 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox9.name, BorderBox9)
+}
--- a/lib/components/borderBox9/src/main.css
+++ b/lib/components/borderBox9/src/main.css
@ -0,0 +1,17 @@
+.dv-border-box-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-9 svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+.dv-border-box-9 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/borderBox9/src/main.vue
+++ b/lib/components/borderBox9/src/main.vue
@ -0,0 +1,179 @@
+<template>
+  <div class="dv-border-box-9" :ref="ref">
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <animate
+            attributeName="x1"
+            values="0%;100%;0%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <animate
+            attributeName="x2"
+            values="100%;0%;100%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <stop offset="0%" :stop-color="mergedColor[0]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" :stop-color="mergedColor[1]">
+            <animate
+              attributeName="stop-color"
+              :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="
+              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
+              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.52}, 3 ${width * 0.58}, 3
+              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
+              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${height * 0.55} 8, ${height * 0.7}
+              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
+              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
+            `"
+          />
+        </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>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvBorderBox9',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    backgroundColor: {
+      type: String,
+      default: 'transparent'
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: 'border-box-9',
+
+      gradientId: `border-box-9-gradient-${timestamp}`,
+      maskId: `border-box-9-mask-${timestamp}`,
+
+      defaultColor: ['#11eefd', '#0078d2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/capsuleChart/index.js
+++ b/lib/components/capsuleChart/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import CapsuleChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(CapsuleChart.name, CapsuleChart)
+}
--- a/lib/components/capsuleChart/src/main.css
+++ b/lib/components/capsuleChart/src/main.css
@ -0,0 +1,63 @@
+.dv-capsule-chart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 10px;
+  color: #fff;
+}
+.dv-capsule-chart .label-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding-right: 10px;
+  text-align: right;
+  font-size: 12px;
+}
+.dv-capsule-chart .label-column div {
+  height: 20px;
+  line-height: 20px;
+}
+.dv-capsule-chart .capsule-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.dv-capsule-chart .capsule-item {
+  box-shadow: 0 0 3px #999;
+  height: 10px;
+  margin: 5px 0px;
+  border-radius: 5px;
+}
+.dv-capsule-chart .capsule-item .capsule-item-column {
+  position: relative;
+  height: 8px;
+  margin-top: 1px;
+  border-radius: 5px;
+  transition: all 0.3s;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.dv-capsule-chart .capsule-item .capsule-item-column .capsule-item-value {
+  font-size: 12px;
+  transform: translateX(100%);
+}
+.dv-capsule-chart .unit-label {
+  height: 20px;
+  font-size: 12px;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.dv-capsule-chart .unit-text {
+  text-align: right;
+  display: flex;
+  align-items: flex-end;
+  font-size: 12px;
+  line-height: 20px;
+  margin-left: 10px;
+}
--- a/lib/components/capsuleChart/src/main.vue
+++ b/lib/components/capsuleChart/src/main.vue
@ -0,0 +1,150 @@
+<template>
+  <div class="dv-capsule-chart">
+    <template v-if="mergedConfig">
+      <div class="label-column">
+        <div v-for="item in mergedConfig.data" :key="item.name">{{ item.name }}</div>
+        <div>&nbsp;</div>
+      </div>
+
+      <div class="capsule-container">
+        <div class="capsule-item" v-for="(capsule, index) in capsuleLength" :key="index">
+          <div
+            class="capsule-item-column"
+            :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"
+          >
+            <div
+              v-if="mergedConfig.showValue"
+              class="capsule-item-value"
+            >{{ capsuleValue[index] }}</div>
+          </div>
+        </div>
+
+        <div class="unit-label">
+          <div
+            v-for="(label, index) in labelData"
+            :key="label + index"
+          >{{ label }}</div>
+        </div>
+      </div>
+
+      <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvCapsuleChart',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      defaultConfig: {
+        /**
+         * @description Capsule chart data
+         * @type {Array<Object>}
+         * @default data = []
+         * @example data = [{ name: 'foo1', value: 100 }, { name: 'foo2', value: 100 }]
+         */
+        data: [],
+        /**
+         * @description Colors (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @default color = ['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']
+         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        colors: [
+          '#37a2da',
+          '#32c5e9',
+          '#67e0e3',
+          '#9fe6b8',
+          '#ffdb5c',
+          '#ff9f7f',
+          '#fb7293'
+        ],
+        /**
+         * @description Chart unit
+         * @type {String}
+         * @default unit = ''
+         */
+        unit: '',
+        /**
+         * @description Show item value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
+      },
+
+      mergedConfig: null,
+
+      capsuleLength: [],
+      capsuleValue: [],
+      labelData: [],
+      labelDataLength: []
+    }
+  },
+  watch: {
+    config() {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    calcData() {
+      const { mergeConfig, calcCapsuleLengthAndLabelData } = this
+
+      mergeConfig()
+
+      calcCapsuleLengthAndLabelData()
+    },
+    mergeConfig() {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
+    },
+    calcCapsuleLengthAndLabelData() {
+      const { data } = this.mergedConfig
+
+      if (!data.length) return
+
+      const capsuleValue = data.map(({ value }) => value)
+
+      const maxValue = Math.max(...capsuleValue)
+
+      this.capsuleValue = capsuleValue
+
+      this.capsuleLength = capsuleValue.map(v => (maxValue ? v / maxValue : 0))
+
+      const oneFifth = maxValue / 5
+
+      const labelData = Array.from(
+        new Set(new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth)))
+      )
+
+      this.labelData = labelData
+
+      this.labelDataLength = Array.from(labelData).map(v =>
+        maxValue ? v / maxValue : 0
+      )
+    }
+  },
+  mounted() {
+    const { calcData } = this
+
+    calcData()
+  }
+}
+</script>
--- a/lib/components/charts/index.js
+++ b/lib/components/charts/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Charts from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Charts.name, Charts)
+}
--- a/lib/components/charts/src/main.css
+++ b/lib/components/charts/src/main.css
@ -0,0 +1,9 @@
+.dv-charts-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-charts-container .charts-canvas-container {
+  width: 100%;
+  height: 100%;
+}
--- a/lib/components/charts/src/main.vue
+++ b/lib/components/charts/src/main.vue
@ -0,0 +1,65 @@
+<template>
+  <div class="dv-charts-container" :ref="ref">
+    <div class="charts-canvas-container" :ref="chartRef" />
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import Charts from '@jiaminghi/charts'
+
+export default {
+  name: 'DvCharts',
+  mixins: [autoResize],
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: `charts-container-${timestamp}`,
+      chartRef: `chart-${timestamp}`,
+
+      chart: null
+    }
+  },
+  watch: {
+    option () {
+      let { chart, option } = this
+
+      if (!chart) return
+
+      if (!option) option = {}
+
+      chart.setOption(option, true)
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { initChart } = this
+
+      initChart()
+    },
+    initChart () {
+      const { $refs, chartRef, option } = this
+
+      const chart = this.chart = new Charts($refs[chartRef])
+
+      if (!option) return
+
+      chart.setOption(option)
+    },
+    onResize () {
+      const { chart } = this
+
+      if (!chart) return
+
+      chart.resize()
+    }
+  }
+}
+</script>
--- a/lib/components/conicalColumnChart/index.js
+++ b/lib/components/conicalColumnChart/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import ConicalColumnChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ConicalColumnChart.name, ConicalColumnChart)
+}
--- a/lib/components/conicalColumnChart/src/main.css
+++ b/lib/components/conicalColumnChart/src/main.css
@ -0,0 +1,7 @@
+.dv-conical-column-chart {
+  width: 100%;
+  height: 100%;
+}
+.dv-conical-column-chart text {
+  text-anchor: middle;
+}
--- a/lib/components/conicalColumnChart/src/main.vue
+++ b/lib/components/conicalColumnChart/src/main.vue
@ -0,0 +1,208 @@
+<template>
+  <div class="dv-conical-column-chart" :ref="ref">
+    <svg :width="width" :height="height">
+      <g
+        v-for="(item, i) in column"
+        :key="i"
+      >
+        <path
+          :d="item.d"
+          :fill="mergedConfig.columnColor"
+        />
+        <text
+          :style="`fontSize:${mergedConfig.fontSize}px`"
+          :fill="mergedConfig.textColor"
+          :x="item.x"
+          :y="height - 4"
+        >
+          {{ item.name }}
+        </text>
+        <image
+          v-if="mergedConfig.img.length"
+          :xlink:href="mergedConfig.img[i % mergedConfig.img.length]"
+          :width="mergedConfig.imgSideLength"
+          :height="mergedConfig.imgSideLength"
+          :x="item.x - mergedConfig.imgSideLength / 2"
+          :y="item.y - mergedConfig.imgSideLength"
+        />
+        <text
+          v-if="mergedConfig.showValue"
+          :style="`fontSize:${mergedConfig.fontSize}px`"
+          :fill="mergedConfig.textColor"
+          :x="item.x"
+          :y="item.textY"
+        >
+          {{ item.value }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvConicalColumnChart',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      ref: 'conical-column-chart',
+
+      defaultConfig: {
+        /**
+         * @description Chart data
+         * @type {Array<Object>}
+         * @default data = []
+         */
+        data: [],
+        /**
+         * @description Chart img
+         * @type {Array<String>}
+         * @default img = []
+         */
+        img: [],
+        /**
+         * @description Chart font size
+         * @type {Number}
+         * @default fontSize = 12
+         */
+        fontSize: 12,
+        /**
+         * @description Img side length
+         * @type {Number}
+         * @default imgSideLength = 30
+         */
+        imgSideLength: 30,
+        /**
+         * @description Column color
+         * @type {String}
+         * @default columnColor = 'rgba(0, 194, 255, 0.4)'
+         */
+        columnColor: 'rgba(0, 194, 255, 0.4)',
+        /**
+         * @description Text color
+         * @type {String}
+         * @default textColor = '#fff'
+         */
+        textColor: '#fff',
+        /**
+         * @description Show value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
+      },
+
+      mergedConfig: null,
+
+      column: []
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { calcData } = this
+
+      calcData()
+    },
+    calcData () {
+      const { mergeConfig, initData, calcSVGPath } = this
+
+      mergeConfig()
+
+      initData()
+
+      calcSVGPath()
+    },
+    mergeConfig () {
+      const { defaultConfig, config } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    initData () {
+      const { mergedConfig } = this
+      let { data } = mergedConfig
+
+      data = deepClone(data, true)
+
+      data.sort(({ value: a }, { value: b }) => {
+        if (a > b) return -1
+        if (a < b) return 1
+        if (a === b) return 0
+      })
+
+      const max = data[0] ? data[0].value : 10
+
+      data = data.map(item => ({
+        ...item,
+        percent: item.value / max
+      }))
+
+      mergedConfig.data = data
+    },
+    calcSVGPath () {
+      const { mergedConfig, width, height } = this
+
+      const { imgSideLength, fontSize, data } = mergedConfig
+
+      const itemNum = data.length
+      const gap = width / (itemNum + 1)
+
+      const useAbleHeight = height - imgSideLength - fontSize - 5
+      const svgBottom = height - fontSize - 5
+
+      this.column = data.map((item, i) => {
+        const { percent } = item
+
+        const middleXPos = gap * (i + 1)
+        const leftXPos = gap * i
+        const rightXpos = gap * (i + 2)
+
+        const middleYPos = svgBottom - useAbleHeight * percent
+        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos
+
+        const d = `
+          M${leftXPos}, ${svgBottom}
+          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
+          M${middleXPos},${middleYPos}
+          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
+          L${leftXPos}, ${svgBottom}
+          Z
+        `
+
+        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2
+
+        return {
+          ...item,
+          d,
+          x: middleXPos,
+          y: middleYPos,
+          textY
+        }
+      })
+    }
+  }
+}
+</script>
--- a/lib/components/decoration1/index.js
+++ b/lib/components/decoration1/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration1.name, Decoration1)
+}
--- a/lib/components/decoration1/src/main.css
+++ b/lib/components/decoration1/src/main.css
@ -0,0 +1,7 @@
+.dv-decoration-1 {
+  width: 100%;
+  height: 100%;
+}
+.dv-decoration-1 svg {
+  transform-origin: left top;
+}
--- a/lib/components/decoration1/src/main.vue
+++ b/lib/components/decoration1/src/main.vue
@ -0,0 +1,197 @@
+<template>
+  <div class="dv-decoration-1" :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"
+      >
+        <rect
+          v-if="Math.random() > 0.6"
+          :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[0]};transparent`"
+            dur="1s"
+            :begin="Math.random() * 2"
+            repeatCount="indefinite"
+          />
+        </rect>
+      </template>
+
+      <rect
+        v-if="rects[0]"
+        :fill="mergedColor[1]"
+        :x="rects[0][0] - pointSideLength"
+        :y="rects[0][1] - pointSideLength"
+        :width="pointSideLength * 2"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="height"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="y"
+          :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+
+      <rect
+        v-if="rects[1]"
+        :fill="mergedColor[1]"
+        :x="rects[1][0] - 40"
+        :y="rects[1][1] - pointSideLength"
+        :width="40"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          values="0;40;0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvDecoration1',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    const pointSideLength = 2.5
+
+    return {
+      ref: 'decoration-1',
+
+      svgWH: [200, 50],
+
+      svgScale: [1, 1],
+
+      rowNum: 4,
+      rowPoints: 20,
+
+      pointSideLength,
+      halfPointSideLength: pointSideLength / 2,
+
+      points: [],
+
+      rects: [],
+
+      defaultColor: ['#fff', '#0de7c2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcRectsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcRectsPosition()
+
+      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], [])
+    },
+    calcRectsPosition () {
+      const { points, rowPoints } = this
+
+      const rect1 = points[rowPoints * 2 - 1]
+      const rect2 = points[rowPoints * 2 - 3]
+
+      this.rects = [rect1, rect2]
+    },
+    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>
--- a/lib/components/decoration10/index.js
+++ b/lib/components/decoration10/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration10 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration10.name, Decoration10)
+}
--- a/lib/components/decoration10/src/main.css
+++ b/lib/components/decoration10/src/main.css
@ -0,0 +1,5 @@
+.dv-decoration-10 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
--- a/lib/components/decoration10/src/main.vue
+++ b/lib/components/decoration10/src/main.vue
@ -0,0 +1,202 @@
+<template>
+  <div class="dv-decoration-10" :ref="ref">
+    <svg :width="width" :height="height">
+      <polyline
+        :stroke="mergedColor[1]"
+        stroke-width="2"
+        :points="`0, ${height / 2} ${width}, ${height / 2}`"
+      />
+
+      <polyline
+        :stroke="mergedColor[0]"
+        stroke-width="2"
+        :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+        fill="freeze"
+      >
+        <animate
+          :id="animationId2"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0;`"
+          dur="3s"
+          :begin="`${animationId1}.end`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.2}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="mergedColor[0]"
+        stroke-width="2"
+        :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.6}`"
+      >
+        <animate
+          :id="animationId4"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.6};${width * 0.6}, 0`"
+          dur="3s"
+          :begin="`${animationId3}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.6}, 0;0, ${width * 0.6}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="mergedColor[0]"
+        stroke-width="2"
+        :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+      >
+        <animate
+          :id="animationId6"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0`"
+          dur="3s"
+          :begin="`${animationId5}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.3}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+        <animate
+          :id="animationId1"
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
+          :begin="`0s;${animationId7}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+        <animate
+          :id="animationId3"
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
+          :begin="`${animationId2}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
+        <animate
+          :id="animationId5"
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
+          :begin="`${animationId4}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
+        <animate
+          :id="animationId7"
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
+          :begin="`${animationId6}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvDecoration10',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    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}`,
+
+      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/decoration11/index.js
+++ b/lib/components/decoration11/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration11 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration11.name, Decoration11)
+}
--- a/lib/components/decoration11/src/main.css
+++ b/lib/components/decoration11/src/main.css
@ -0,0 +1,16 @@
+.dv-decoration-11 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+.dv-decoration-11 .decoration-content {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
--- a/lib/components/decoration11/src/main.vue
+++ b/lib/components/decoration11/src/main.vue
@ -0,0 +1,105 @@
+<template>
+  <div class="dv-decoration-11" :ref="ref">
+    <svg :width="width" :height="height">
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 10, 25 4, 55 4 60 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`20 ${height - 10}, 25 ${height - 4}, 55 ${height - 4} 60 ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} 10, ${width - 25} 4, ${width - 55} 4 ${width - 60} 10`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[1] || defaultColor[1], 10)"
+        :stroke="mergedColor[1]"
+        :points="`${width - 20} ${height - 10}, ${width - 25} ${height - 4}, ${width - 55} ${height - 4} ${width - 60} ${height - 10}`"
+      />
+
+      <polygon
+        :fill="fade(mergedColor[0] || defaultColor[0], 20)"
+        :stroke="mergedColor[0]"
+        :points="`
+          20 10, 5 ${height / 2} 20 ${height - 10}
+          ${width - 20} ${height - 10} ${width - 5} ${height / 2} ${width - 20} 10
+        `"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`25 18, 15 ${height / 2} 25 ${height - 18}`"
+      />
+
+      <polyline
+        fill="transparent"
+        :stroke="fade(mergedColor[0] || defaultColor[0], 70)"
+        :points="`${width - 25} 18, ${width - 15} ${height / 2} ${width - 25} ${height - 18}`"
+      />
+    </svg>
+
+    <div class="decoration-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+import { fade } from '@jiaminghi/color'
+
+export default {
+  name: 'DvDecoration11',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    const timestamp = Date.now()
+    return {
+      ref: 'decoration-11',
+
+      defaultColor: ['#1a98fc', '#2cf7fe'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/decoration2/index.js
+++ b/lib/components/decoration2/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration2.name, Decoration2)
+}
--- a/lib/components/decoration2/src/main.css
+++ b/lib/components/decoration2/src/main.css
@ -0,0 +1,7 @@
+.dv-decoration-2 {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}
--- a/lib/components/decoration2/src/main.vue
+++ b/lib/components/decoration2/src/main.vue
@ -0,0 +1,118 @@
+<template>
+  <div class="dv-decoration-2" :ref="ref">
+    <svg :width="`${width}px`" :height="`${height}px`">
+      <rect :x="x" :y="y" :width="w" :height="h" :fill="mergedColor[0]">
+        <animate
+          :attributeName="reverse ? 'height' : 'width'"
+          from="0"
+          :to="reverse ? height : width"
+          dur="6s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines=".42,0,.58,1"
+          repeatCount="indefinite"
+        />
+      </rect>
+
+      <rect :x="x" :y="y" width="1" height="1" :fill="mergedColor[1]">
+        <animate
+          :attributeName="reverse ? 'y' : 'x'"
+          from="0"
+          :to="reverse ? height : width"
+          dur="6s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines="0.42,0,0.58,1"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvDecoration2',
+  mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      ref: 'decoration-2',
+
+      x: 0,
+      y: 0,
+
+      w: 0,
+      h: 0,
+
+      defaultColor: ['#3faacb', '#fff'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    },
+    reverse () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { reverse, width, height } = this
+
+      if (reverse) {
+        this.w = 1
+        this.h = height
+        this.x = width / 2
+        this.y = 0
+      } else {
+        this.w = width
+        this.h = 1
+        this.x = 0
+        this.y = height / 2
+      }
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
+  }
+}
+</script>
--- a/lib/components/decoration3/index.js
+++ b/lib/components/decoration3/index.js
@ -0,0 +1,6 @@
+import './src/main.css'
+import Decoration3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration3.name, Decoration3)
+}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
jiaming743	6ce83e1fd8	update dist and lib	2020-05-06 14:15:15 +08:00
jiaming743	8e5f279b6e	update version to 2.8.3	2020-05-06 14:15:02 +08:00
jiaming743	22afc8e787	update change log	2020-05-06 14:14:52 +08:00
jiaming743	eb78915c93	add showValue configuration	2020-05-06 14:13:49 +08:00
jiaming743	22c88c4ea5	add showOriginValue configuration	2020-05-06 14:13:34 +08:00
jiaming743	c98ca00179	Merge branch 'pr/76' into dev	2020-05-06 13:47:47 +08:00
jiaming743	c257ca6d9c	update dist and lib	2020-05-06 13:20:20 +08:00
jiaming743	ce4cf0d342	add reverse configuration	2020-05-06 13:20:15 +08:00
jiaming743	7df0c0247a	update version to 2.8.2	2020-05-06 13:20:04 +08:00
jiaming743	df2369dfe4	update change log	2020-05-06 13:19:55 +08:00
jiaming743	db52e8cdc0	update change log	2020-05-03 20:26:37 +08:00
jiaming743	f8e438b0c4	update version to 2.8.1	2020-05-03 20:26:33 +08:00
jiaming743	1a13bc08c5	update dist and lib	2020-05-03 20:15:35 +08:00
jiaming743	ba90fb2faa	add rowGap configuration	2020-05-03 20:15:28 +08:00
costa	7799ef3dae	capsule-item > div add position prop	2020-04-30 13:38:11 +08:00
jiaming743	33456176f7	update dist	2020-04-28 18:41:09 +08:00
costa	dd37ba167a	format code	2020-04-28 16:43:44 +08:00
costa	fdd1e243a7	active-ring-chart add showOriginalValue	2020-04-28 16:15:12 +08:00
costa	57b6c726eb	1.add showVal prop; 2.optimize unit-label child style;	2020-04-27 18:19:20 +08:00
jiaming743	be410da013	update dist and lib	2020-04-25 16:46:33 +08:00
jiaming743	d4206f066c	update version to 2.8.0	2020-04-25 16:46:27 +08:00
jiaming743	73a5084c0e	update change log	2020-04-25 16:46:17 +08:00
jiaming743	9a039b3f10	Improve compatibility	2020-04-25 16:42:41 +08:00
jiaming743	5ee1d408b6	add backgroudColor config	2020-04-25 16:42:04 +08:00
JM	419fa0c3a9	update dist and lib	2020-04-15 14:03:45 +08:00
JM	d2bb06a36c	update version to 2.7.4	2020-04-15 14:03:37 +08:00
JM	94824f32d8	update change log	2020-04-15 14:03:27 +08:00
wzx	b99410ef94	Bug Fixes:#59 修复胶囊图数值错误	2020-04-07 17:54:33 +08:00
JM	4b69668327	update dist and lib	2020-01-16 10:23:42 +08:00
JM	d15bcf34cb	update version to 2.7.3	2020-01-16 10:23:15 +08:00
JM	43a04efb62	update changelog	2020-01-16 10:23:06 +08:00
JM	81b8bef8e1	Bug Fixes: parseInt precision lost	2020-01-16 10:21:58 +08:00
JM	6467bd516f	remove useless character	2020-01-12 17:38:53 +08:00
JM	62c5998938	update version to 2.7.2	2020-01-10 14:30:09 +08:00
JM	247221729f	update dist and lib	2020-01-10 14:29:37 +08:00
JM	c48aa8ee84	update change log	2020-01-10 14:29:28 +08:00
JM	b18962855c	add digitalFlopToFixed configuration	2020-01-10 14:28:22 +08:00
JM	ae3345bd95	update change log	2020-01-08 19:05:14 +08:00
JM	dceb761e8c	update dist and lib	2020-01-08 19:04:36 +08:00
JM	bd178192f1	update version to 2.7.1	2020-01-08 19:03:46 +08:00
JM	8c47ae03db	update change log	2020-01-08 19:03:39 +08:00
JM	cc14ac7670	Bug Fixes: exception when relative is false	2020-01-08 19:02:32 +08:00
JM	b6c8134fa6	update readme	2020-01-05 22:19:43 +08:00
JM	8f87b3cab1	new component: flylineChartEnhanced	2020-01-05 22:19:04 +08:00
JM	005ae41e29	update dist and lib	2020-01-05 22:18:00 +08:00
JM	7e9cca32ad	update version to 2.7.0	2020-01-05 22:17:34 +08:00
JM	31d94f3cfd	update change log	2020-01-05 22:17:20 +08:00
JM	ca5252951f	update dist and lib	2019-12-25 14:23:39 +08:00
JM	4036915fa2	update version to 2.6.0	2019-12-25 14:23:33 +08:00
JM	431cd57aa1	update change log	2019-12-25 14:23:23 +08:00
JM	c48c46335d	Perfect: [issue35] & [issue36]	2019-12-25 14:19:25 +08:00
JM	a200e8ab41	update readme	2019-12-11 11:27:25 +08:00
JM	6876dec1ca	update dist and lib	2019-12-06 21:07:16 +08:00
JM	aeb021e5e4	update readme	2019-12-06 21:04:49 +08:00
JM	80e29fdb9e	update version to 2.5.0	2019-12-06 21:04:39 +08:00
JM	a6727767e6	update changelog	2019-12-06 21:04:28 +08:00
JM	aa78fee05b	new borderbox	2019-12-06 20:56:12 +08:00
JM	b439b17593	new decoration	2019-12-06 20:56:05 +08:00
JM	14765c6e79	Add color configuration items to customize colors	2019-12-06 20:55:51 +08:00
JM	f4888ad9cd	add new borderbox and decoration	2019-12-06 20:46:59 +08:00
JM	8564c23fbc	Merge branch 'dev'	2019-12-06 20:40:31 +08:00
JM	325f700f08	Merge pull request #33 from RouRouX/dev [Feature,#31] add index header configuration for scrollBoard	2019-11-28 16:03:10 +08:00
肉肉	07956687ab	增加序号表头配置	2019-11-28 12:18:32 +08:00
JiaMing	3ec7a22f98	add icon	2019-11-23 21:26:05 +08:00
JiaMing	d6382142a1	update version to 2.4.8	2019-11-12 12:46:49 +08:00
JiaMing	d21bcd304d	update dist and lib	2019-11-12 12:46:39 +08:00
JiaMing	663cfd24db	update changelog	2019-11-12 12:45:10 +08:00
JiaMing	3ad05eb1be	Bug Fixes: #25	2019-11-12 12:42:36 +08:00
JiaMing	bbdf7ea5a9	update readme	2019-11-08 16:11:04 +08:00
JiaMing	cabe75fed8	Merge branch 'master' of https://github.com/DataV-Team/Datav	2019-11-08 16:10:24 +08:00
JiaMing	431dddf0b5	update umd example	2019-11-08 16:09:54 +08:00
JiaMing	8b8fb00988	add sponsor	2019-10-26 19:21:50 +08:00
JiaMing	9f26ff6280	update dist and lib	2019-10-25 10:57:11 +08:00
JiaMing	5c52f9d6b0	Optimize the update process	2019-10-25 10:56:37 +08:00
JiaMing	c1881757a8	update dist and lib folder	2019-10-24 14:12:52 +08:00
JiaMing	a02654a565	update version to 2.4.7	2019-10-24 14:12:09 +08:00
JiaMing	36f9c6f8ab	update change log	2019-10-24 14:11:25 +08:00
JiaMing	0b270cda52	Optimize memory leaks	2019-10-24 14:09:32 +08:00
JiaMing	2ca217a8af	Optimize memory leaks	2019-10-24 10:29:07 +08:00
JiaMing	656de3a8dd	update dist	2019-10-24 10:28:43 +08:00
JiaMing	915c54072d	update version to 2.4.6	2019-10-24 10:28:34 +08:00
JiaMing	a01fcef7e4	update change log	2019-10-24 10:28:21 +08:00
JiaMing	1f1b1cb75d	Optimize memory leaks	2019-10-24 10:22:03 +08:00
JiaMing	9b2395adf0	update readme	2019-10-22 13:52:58 +08:00
JiaMing	8d0ca493c9	update readme	2019-10-22 13:52:13 +08:00
JiaMing	6aa2d38b40	update repo url	2019-10-22 13:42:38 +08:00
JiaMing	2eeac4f247	update license	2019-10-22 11:45:29 +08:00
JiaMing	6d90ba617b	update readme	2019-10-22 11:44:56 +08:00
JiaMing	8ae4aa7c17	update issue template url	2019-10-22 11:43:15 +08:00
JiaMing	c89f1d427a	update icon url	2019-10-22 11:38:17 +08:00
JM	a5366587bc	update readme	2019-09-25 12:11:21 +08:00
JM	e777112621	update dist and lib	2019-09-24 16:34:08 +08:00
JM	d6f33bb7dc	Mobile terser execution order	2019-09-24 16:33:14 +08:00
JM	ee1d0cddf9	Fix spelling errors	2019-09-24 16:30:14 +08:00
JM	a7aa6278c8	Compatible with a calculation result of 0	2019-09-24 16:29:51 +08:00
JM	e533c55536	update version to v2.4.5	2019-09-24 16:29:11 +08:00
JM	89ea2f81b7	update change log for v2.4.5	2019-09-24 16:28:58 +08:00
jiaming743	9562c97730	update readme	2019-09-10 15:32:42 +08:00
jiaming743	7ba058d623	update change log	2019-09-10 15:23:12 +08:00
jiaming743	a22166d868	perfect ref production	2019-09-10 15:14:12 +08:00
jiaming743	fbc32552f0	update umd file	2019-09-10 15:11:56 +08:00
jiaming743	8ad8298c6f	add auto deploy process	2019-09-10 15:11:25 +08:00
jiaming743	5796c92fc6	update rollup config (terser compress)	2019-09-10 15:11:09 +08:00
jiaming743	3ebbac5de3	update auto build process	2019-09-10 15:10:36 +08:00
jiaming743	5c80a93f4d	add umd example	2019-09-10 15:10:11 +08:00
jiaming743	79bae7bea4	update readme	2019-09-10 15:10:02 +08:00
jiaming743	7b9174302e	update questionnaire qr code img	2019-09-10 15:09:52 +08:00
jiaming743	259f1e4b4c	add terser to compress umd file	2019-09-10 15:08:35 +08:00
jiaming743	015f334212	update ignore	2019-09-10 14:57:59 +08:00
jiaming743	44dffdc216	Merge branch 'master' of https://github.com/jiaming743/DataV	2019-09-10 11:23:03 +08:00
jiaming743	60c5ecfeba	update readme	2019-09-10 11:22:42 +08:00
JM	bcb78fec32	Merge pull request #14 from Xiaoleng123/master 🐛 修改组件 ID 时间戳的生成方式	2019-09-10 09:17:04 +08:00
Xiaoleng123	856e43dc09	🐛 修改组件 ID 时间戳的生成方式	2019-09-09 21:17:50 +08:00
jiaming743	b511e3d786	add Questionnaire link	2019-09-06 10:59:55 +08:00
jiaming743	c281e56d6d	update dist and lib	2019-09-05 17:33:05 +08:00
jiaming743	ba35f1b252	update version to 2.4.4	2019-09-05 17:32:58 +08:00
jiaming743	6819fdead9	update changelog	2019-09-05 17:32:51 +08:00
jiaming743	6169d2ac90	Bug Fixes for v 2.4.4	2019-09-05 17:32:44 +08:00
jiaming743	786761f1ca	update todo	2019-09-05 11:55:25 +08:00
jiaming743	529b0154db	update dist	2019-09-04 11:24:03 +08:00
jiaming743	26a5c3cedd	add unit configuration item	2019-09-04 11:23:59 +08:00
jiaming743	10824d0c88	update version to 2.4.3	2019-09-04 11:23:41 +08:00
jiaming743	c34c493eb4	update changelog	2019-09-04 11:23:29 +08:00
jiaming743	1708d58215	update readme	2019-09-04 09:04:33 +08:00
jiaming743	948d6e0672	update readme	2019-09-04 08:56:40 +08:00
jiaming743	0a82102ec6	update readme	2019-09-04 08:54:48 +08:00
jiaming743	1aa5979968	add note	2019-09-03 16:02:07 +08:00
jiaming743	ff964f6b72	remove useless folder	2019-09-03 11:12:47 +08:00
jiaming743	b2b83d9474	Add import suffix	2019-09-03 11:08:17 +08:00
jiaming743	a1d7d4626d	update build process	2019-09-03 11:07:45 +08:00
jiaming743	170facb3fc	update dependencies	2019-09-03 11:07:26 +08:00
jiaming743	5224e80321	add feedback group img	2019-09-02 18:49:58 +08:00
jiaming743	1c4fa02e45	update readme	2019-09-02 18:49:37 +08:00
jiaming743	70164efe70	add TODO	2019-09-02 14:17:07 +08:00
jiaming743	7c0992e19f	update lib	2019-08-30 18:24:50 +08:00
jiaming743	66c9a542cf	update version to 2.4.2	2019-08-30 18:23:44 +08:00
jiaming743	47c2652ab4	update template	2019-08-30 14:40:45 +08:00
jiaming743	2c78715ff5	github template	2019-08-30 14:38:59 +08:00
jiaming743	4f078d984b	update change log	2019-08-30 12:54:58 +08:00
jiaming743	720fd878b1	Class name compatibility optimization	2019-08-30 12:54:10 +08:00
jiaming743	f64ed65d3a	update demo img	2019-08-30 12:53:43 +08:00
jiaming743	50fa3099a7	update readme	2019-08-30 12:53:31 +08:00
jiaming743	54bc52c1bf	update lib	2019-08-30 09:44:38 +08:00
jiaming743	24a0c8a9e8	update version to 2.4.1	2019-08-29 17:47:40 +08:00
jiaming743	7bac2c6760	update changelog for v 2.4.1	2019-08-29 17:47:35 +08:00
jiaming743	0f9b00b525	Adaptive display unit	2019-08-29 17:47:14 +08:00
jiaming743	5376f01e3c	add new component (borderBox10, capsuleChart)	2019-08-29 16:50:55 +08:00
jiaming743	8d1e0064a7	update lib	2019-08-29 16:50:19 +08:00
jiaming743	6adcd9c6cb	update readme	2019-08-29 16:49:17 +08:00
jiaming743	3464c6b254	update version to 2.4.0	2019-08-29 16:49:09 +08:00
jiaming743	bd88a27ddc	update change log for v2.4.0	2019-08-29 16:49:00 +08:00
jiaming743	bc0bf58baf	update readme	2019-08-27 18:42:33 +08:00
jiaming743	46c72a9a68	update readme	2019-08-27 18:40:06 +08:00
jiaming743	1c33d4d7b8	update readme	2019-08-27 18:38:18 +08:00
jiaming743	0d59ebcc04	update version to v 2.3.9	2019-08-27 18:34:02 +08:00
jiaming743	c47f6133f4	update readme and add demo img	2019-08-27 18:33:14 +08:00
jiaming743	f8870f763a	update change log for v 2.3.9	2019-08-27 18:27:54 +08:00
jiaming743	9f00506e73	Compatibility enhancement	2019-08-27 11:30:28 +08:00
jiaming743	e069d52544	Fixes: Style compatibility and gradient exceptions	2019-08-27 10:21:42 +08:00
jiaming743	4bd17d0a07	update version to 2.3.8	2019-08-27 10:21:02 +08:00
jiaming743	a1edd0d6f2	update change log for v 2.3.8	2019-08-27 10:20:52 +08:00
jiaming743	3cba31db56	Bug Fixes: bug #6 v 2.3.7	2019-08-26 17:07:00 +08:00
jiaming743	c6974cd2e4	update version to 2.3.7	2019-08-26 17:06:11 +08:00
jiaming743	56cc4534d1	update changelog for v 2.3.7	2019-08-26 17:06:01 +08:00
jiaming743	8884121c4c	update change log	2019-08-24 13:11:05 +08:00
jiaming743	60bf393fd7	svg animation compatibility enhancement	2019-08-24 13:05:15 +08:00
jiaming743	d497dfa7d7	update version to 2.3.6	2019-08-24 13:04:26 +08:00
jiaming743	37469f7097	update changelog	2019-08-24 13:04:17 +08:00
JM	104e636bd7	Merge pull request #5 from Xiaoleng123/master Bug Fixes: Enhance the animation compatibility of borderbox1 and fix spelling errors	2019-08-24 12:50:03 +08:00
冷先洋	0d1b1d9c29	🐛 animate compatible with Firefox	2019-08-23 22:20:40 +08:00
jiaming743	429e5b9478	update change log for v 2.3.5	2019-08-22 14:49:03 +08:00
jiaming743	e470b2ed8a	update note	2019-08-22 14:42:51 +08:00
jiaming743	fdf5b76fe0	update version to 2.3.5	2019-08-22 14:41:11 +08:00
jiaming743	93bc3615ea	add lib folder	2019-08-22 14:41:07 +08:00
jiaming743	e98f7caf96	update changelog for v2.3.5	2019-08-22 14:39:47 +08:00
jiaming743	7a2c0e7e4e	update ignore	2019-08-22 14:39:21 +08:00
jiaming743	b86fd4d222	remove lock file	2019-08-22 14:38:53 +08:00
jiaming743	3ee305df19	Merge branch 'master' of https://github.com/jiaming743/DataV	2019-08-22 14:29:38 +08:00
JM	26a05978f5	Merge pull request #3 from chenhui7373/master Fix 修复动态环图配置 color 环颜色无效	2019-08-22 14:26:57 +08:00
jiaming743	1ed7740a39	update color note	2019-08-22 14:07:34 +08:00
jiaming743	ec1bb34018	modify note	2019-08-22 14:01:35 +08:00
sunw31@163.com	4ab07bffcc	Fix 修复动态环图配置 color 环颜色无效感谢作者提供这么好的库	2019-08-22 11:28:10 +08:00
jiaming743	71ce19e303	update version to 2.3.4	2019-08-15 16:51:12 +08:00
jiaming743	0103850f87	update changelog for version V 2.3.4-alpha	2019-08-15 16:50:40 +08:00
jiaming743	a88685812d	Bux Fixes for V2.3.4-alpha (2019-00-15)	2019-08-15 16:50:12 +08:00
jiaming743	ae6a779561	update keywords	2019-07-31 10:31:31 +08:00
jiaming743	e108afaccf	update readme	2019-07-31 10:09:35 +08:00
jiaming743	d7b6afccfe	update changelog	2019-07-22 18:58:05 +08:00
jiaming743	a92e36067b	Fix potential namespace conflicts	2019-07-22 18:56:49 +08:00
jiaming743	2d316d3629	Error caused by namespace conflict.	2019-07-22 18:50:42 +08:00
jiaming743	f0fcefd08a	update changelog	2019-07-22 18:50:30 +08:00
jiaming743	38cb5e87de	update version to 2.3.3	2019-07-22 18:50:22 +08:00
jiaming743	9699837d0e	update publish process	2019-07-09 11:44:10 +08:00
jiaming743	132a817933	update readme	2019-07-05 16:25:54 +08:00
jiaming743	2408c821e7	update change log	2019-07-05 16:23:58 +08:00
jiaming743	af32755617	move components use statments	2019-07-05 16:19:18 +08:00
jiaming743	084f4c4c9c	add fun dirForEach	2019-07-05 16:18:40 +08:00
jiaming743	98536da7d1	Automatically add export statements	2019-07-05 16:18:29 +08:00
jiaming743	b755a487aa	update readme	2019-07-05 16:17:52 +08:00
jiaming743	46da621c70	update changelog	2019-07-05 16:17:33 +08:00
jiaming743	a86a4193ec	add README_CN.md	2019-07-05 16:17:15 +08:00
jiaming743	e33096164c	update version to v2.3.2	2019-07-05 13:52:20 +08:00
jiaming743	7edef8b9c8	update change log	2019-07-05 13:51:38 +08:00
jiaming743	6d4baac3b6	Explicitly set the SVG width and height	2019-07-05 13:49:42 +08:00
jiaming743	72433f8ff1	update version to 2.3.1	2019-07-04 17:12:29 +08:00
jiaming743	9c1ef5ed3b	update change log	2019-07-04 17:12:10 +08:00
jiaming743	4ac3ad8c5b	Fix potential rendering exceptions.	2019-07-04 17:12:04 +08:00
jiaming743	658537f155	Enhanced style compatibility.	2019-07-04 17:11:54 +08:00
jiaming743	6f784a3e36	Strengthen autoResize stability	2019-07-04 17:11:32 +08:00
jiaming743	3e5b960abd	update version to v2.3.0	2019-07-04 10:36:11 +08:00
jiaming743	52889640ad	update change log	2019-07-04 10:35:52 +08:00
jiaming743	3f22338861	perfect some style	2019-07-04 09:41:44 +08:00
JM	070a47011b	perfect prepublish process	2019-07-03 22:00:43 +08:00
JM	ca392ba2f7	update ignore	2019-07-03 21:59:59 +08:00
jiaming743	3fb3936aa9	update prepublish process	2019-07-03 18:56:55 +08:00
jiaming743	bfc7cc7c57	for prepublish	2019-07-03 18:34:58 +08:00
jiaming743	f7d702588c	update ignore	2019-07-03 18:34:31 +08:00
jiaming743	ee62dae22c	update package.json	2019-07-03 18:33:57 +08:00
jiaming743	23e19af8b9	update ignore	2019-07-03 18:33:19 +08:00
jiaming743	6c5b5593d4	Modify package structure	2019-07-03 18:32:59 +08:00
jiaming743	376d723a2b	update version to 2.2.0-alpha	2019-06-29 19:53:17 +08:00
jiaming743	562a262bf4	update change log	2019-06-29 19:52:57 +08:00
jiaming743	addf491d2b	add new component	2019-06-29 19:51:13 +08:00
jiaming743	a842010afd	Bug Fixes: Life cycle error	2019-06-28 20:18:30 +08:00
jiaming743	7b55614d43	remove slot because of occlusion	2019-06-28 20:17:59 +08:00
jiaming743	d586db9176	update version to v2.1.1-alpha	2019-06-28 20:16:32 +08:00
jiaming743	ad090aca3b	update changelog	2019-06-28 20:15:09 +08:00
jiaming743	b9a1f667ee	remove useless console	2019-06-27 19:50:50 +08:00