版本升级

删除冗余的renderer判断

.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版本
+- 浏览器版本
+- 其他

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,14 @@
+---
+name: Feature request
+about: 新特性建议
+---
+
+<!-- 创建新特性建议前请确定你的DataV是最新版的 -->
+
+## Feature request
+
+#### 这个特性解决了什么问题？
+
+#### 这个特性的实现形式？
+
+#### 是否愿意为此特性提交PR？

.github/ISSUE_TEMPLATE/new_component_request.md

@@ -0,0 +1,20 @@
+---
+name: Component request
+about: 新组件建议
+---
+
+<!-- 创建新组件建议前请确定你的DataV是最新版的 -->
+<!-- (将[ ]修改为[x]) -->
+
+## Component request
+
+#### 新组件的类型？
+
+* [ ] 边框
+* [ ] 装饰
+* [ ] 图表
+* [ ] 其他
+
+#### 这个组件的功能描述 (边框及装饰类，请提供样图)？
+
+#### 是否愿意为此组件提交PR？

.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请求
+
+**其他信息:**

.gitignore

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

CHANGELOG.md

@@ -1,3 +1,234 @@
+# 2.10.0-alpha (2020-09-09)
+
+### New
+
+- **decoration12:** New decoration(Radar scan).
+
+### Optmization
+
+- **decoration** add `dur` configuration.
+- **activeRingChart** add `digitalFlopUnit` configuration.
+
+# 2.9.9-alpha (2020-08-25)
+
+### Optmization
+
+- **borderBox:** Canonical class name.
+- **autoResize(mixin):** Add exception prompt.
+
+# 2.9.8-alpha (2020-08-20)
+
+### Optmization
+
+- **scrollRankingBoard:** Add value formatter.
+
+# 2.9.7-alpha (2020-08-19)
+
+### Optmization
+
+- **scrollBoard:** Optimize the update effect of updateRows.
+
+# 2.9.6-alpha (2020-08-05)
+
+### Bug Fixes
+
+- **scrollBoard:** Carousel is abnormal when carousel is page.
+- **scrollRankingBoard:** Carousel is abnormal when carousel is page.
+
+# 2.9.5-alpha (2020-08-05)
+
+### Optmization
+
+- **scrollBoard:** Reduce redundant node rendering.
+- **scrollRankingBoard:** Reduce redundant node rendering.
+- **scrollBoard:** Add api to update row data.
+
+# 2.9.4-alpha (2020-07-03)
+
+### Optmization
+
+- **scrollBoard:** Optimize key value [(#8)](https://github.com/DataV-Team/DataV-React/issues/8).
+
+# 2.9.3-alpha (2020-07-02)
+
+### Perfect
+
+- **uuid:** Optimization of `-` in uuid will cause abnormal svg animation [(#108)](https://github.com/DataV-Team/DataV/issues/108).
+
+# 2.9.2-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollBoard:** reset animationIndex when config upate.
+
+# 2.9.1-alpha (2020-06-16)
+
+### Bug Fixes
+
+- **scrollRankingBoard:** Calculation optimization of negative values [(#101)](https://github.com/DataV-Team/DataV/pull/101).
+
+### Perfect
+
+- **digitalFlop:** add number formatter.
+
+# 2.9.0-alpha (2020-06-10)
+
+### ScrollBoard
+
+- **hoverPause:** add `hoverPause` configuration [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+- **mouseover:** add `mouseover` event [(#96)](https://github.com/DataV-Team/DataV/pull/96).
+
+# 2.8.4-alpha (2020-05-25)
+
+### Perfect
+
+- **uuid:** Use uuid to produce unique id.
+
+# 2.8.3-alpha (2020-05-06)
+
+### Perfect
+
+- **activeRingChart:** add `showOriginValue` configuration.
+- **capsuleChart:** add `showValue` configuration.
+
+# 2.8.2-alpha (2020-05-06)
+
+### Perfect
+
+- **borderBox8:** add `reverse` configuration.
+
+# 2.8.1-alpha (2020-05-03)
+
+### Perfect
+
+- **digitalFlop:** Use `\n` to start a newline.
+- **digitalFlop:** `rowGap` configuration.
+
+# 2.7.4-alpha (2020-04-15)
+
+### Bug Fixes
+
+- **capsuleChart:** Calculate exception when min value is less 5 [(#59)](https://github.com/DataV-Team/DataV/pull/59).
+
+# 2.7.3-alpha (2020-01-16)
+
+### Bug Fixes
+
+- **activeRingChart:** `parseInt` precision lost.
+
+# 2.7.2-alpha (2020-01-10)
+
+### Perfect
+
+- **ativeRingChart:** Add digitalFlopToFixed configuration.
+
+# 2.7.1-alpha (2020-01-08)
+
+### Bug Fixes
+
+- **flylineChartEnhanced:** Exception when relative is false.
+
+# 2.7.0-alpha (2020-01-05)
+
+### New
+
+- **flylineChartEnhanced:** Enhanced flylineChart [(#12)](https://github.com/DataV-Team/DataV/issues/12).
+
+# 2.6.0-alpha (2019-12-25)
+
+### Perfect
+
+- **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

LICENSE

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

README.md

@@ -1,10 +1,12 @@
 [ENGLISH](./README_EN.md)
 
-<h1 align="center">DataV</h1>
-
 <p align="center">
-    <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
-      <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
+  <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" />
@@ -13,10 +15,10 @@
 
 ## DataV是干什么的?
 
-* DataV是一个基于**Vue**的数据可视化组件库.
-* 提供用于提升页面视觉效果的**SVG**边框和装饰.
-* 提供常用的**图表**如折线图等.
-* 飞线图/轮播表等其他组件.
+* DataV是一个基于**Vue**的数据可视化组件库（当然也有[React版本](https://github.com/DataV-Team/DataV-React)）
+* 提供用于提升页面视觉效果的**SVG**边框和装饰
+* 提供常用的**图表**如折线图等
+* 飞线图/轮播表等其他组件
 
 ### npm安装
 
@@ -37,4 +39,38 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+详细文档及示例请移步[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)

README_EN.md

@@ -1,10 +1,12 @@
 [中文](./README.md)
 
-<h1 align="center">DataV</h1>
-
 <p align="center">
-    <a href="https://github.com/jiaming743/datav/blob/master/LICENSE">
-      <img src="https://img.shields.io/github/license/jiaming743/datav.svg" alt="LICENSE" />
+  <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" />
@@ -13,7 +15,7 @@
 
 ## What is DataV?
 
-* DataV is a data **visualization** components library based on **Vue**.
+* DataV is a data **visualization** components library based on **Vue**（Of course there are also [React versions](https://github.com/DataV-Team/DataV-React)）.
 * Provide cool **SVG** borders and decorations.
 * Provide common **charts** such as line chart, etc..
 * flying line chart, carousel table and etc.
@@ -37,4 +39,49 @@ import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+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)

build/entry.js

@@ -0,0 +1,4 @@
+import Vue from 'vue'
+import datav from '../src/index'
+
+Vue.use(datav)

build/index.js

@@ -1,14 +1,17 @@
 const { copyDir, fileForEach, readFile, writeFile, unlinkDirFileByExtname, dirForEach } = require('@jiaminghi/fs')
 const print = require('./plugin/print')
 const path = require('path')
-const doExec = require('./plugin/exec')
+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) {
@@ -63,6 +66,27 @@ async function start () {
 
   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('-------------------------------------')
@@ -122,7 +146,7 @@ async function compileLessToCss () {
       maxBuffer: 1024 ** 5
     })
 
-    const compile = await doExec(execString)
+    const compile = await exec(execString)
 
     if (!compile) {
       print.error(execString + ' Error!')
@@ -180,6 +204,8 @@ async function addComponentsExport () {
   return write
 }
 
-module.exports = start
+async function compileUMDVersion () {
 
+}
 
+start()

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']
+}

build/rollup.terser.config.js

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

deploy/index.js

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

deploy/plugin/ftp.js

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

deploy/plugin/nodeParams.js

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

deploy/plugin/print.js

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

lib/components/activeRingChart/src/main.vue

@@ -11,7 +11,7 @@
 <script>
 import Charts from '@jiaminghi/charts'
 
-import dvDigitalFlop from '../../digitalFlop/src/main'
+import dvDigitalFlop from '../../digitalFlop/src/main.vue'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -78,6 +78,16 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
+        /**
+         * @description Digital flop toFixed
+         * @type {Number}
+         */
+        digitalFlopToFixed: 0,
+        /**
+         * @description Digital flop unit
+         * @type {String}
+         */
+        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -89,7 +99,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -102,33 +118,48 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue,
+        digitalFlopUnit
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
-        style: digitalFlopStyle
+        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
+        number: [displayValue],
+        style: digitalFlopStyle,
+        toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -137,7 +168,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -150,7 +181,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -159,26 +190,29 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -200,7 +234,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -211,14 +245,15 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -236,7 +271,7 @@ export default {
         }
       })
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       const { activeTimeGap } = option.series[0]
 
@@ -251,12 +286,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

lib/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -8,36 +19,36 @@
       :class="`${item} border`"
     >
       <polygon
-        fill="#4fd2dd"
+        :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="#4fd2dd;#235fa7;#4fd2dd"
+          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#235fa7"
+        :fill="mergedColor[1]"
         points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
       >
         <animate
           attributeName="fill"
-          values="#235fa7;#4fd2dd;#235fa7"
+          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#4fd2dd"
+        :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="#4fd2dd;#235fa7;transparent"
+          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -52,12 +63,54 @@
 </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 {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      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>

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)
+}

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 .dv-border-svg-container {
+  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%;
+}

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="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} dv-border-svg-container`"
+    >
+      <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>

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)
+}

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%;
+}

lib/components/borderBox11/src/main.vue

@@ -0,0 +1,280 @@
+<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 { uuid } from '../../../util/index'
+
+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 id = uuid()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${id}`,
+
+      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>

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)
+}

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%;
+}

lib/components/borderBox12/src/main.vue

@@ -0,0 +1,148 @@
+<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 { uuid } from '../../../util/index'
+
+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 id = uuid()
+    return {
+      ref: 'border-box-12',
+      filterId: `borderr-box-12-filterId-${id}`,
+
+      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>

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)
+}

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%;
+}

lib/components/borderBox13/src/main.vue

@@ -0,0 +1,92 @@
+<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 () {
+    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>

lib/components/borderBox2/src/main.css

@@ -10,19 +10,10 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-2 .dv-border-svg-container polyline {
+.dv-border-box-2 .dv-border-svg-container > polyline {
   fill: none;
   stroke-width: 1;
 }
-.dv-border-box-2 .dv-border-svg-container circle {
-  fill: #fff;
-}
-.dv-border-box-2 .dv-bb2-line1 {
-  stroke: #fff;
-}
-.dv-border-box-2 .dv-bb2-line2 {
-  stroke: rgba(255, 255, 255, 0.6);
-}
 .dv-border-box-2 .border-box-content {
   position: relative;
   width: 100%;

lib/components/borderBox2/src/main.vue

@@ -1,14 +1,22 @@
 <template>
   <div class="dv-border-box-2" :ref="ref">
     <svg class="dv-border-svg-container" :width="width" :height="height">
-      <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" />
+      <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">
@@ -20,13 +28,50 @@
 <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'
+      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>

lib/components/borderBox3/src/main.css

@@ -10,9 +10,8 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-3 .dv-border-svg-container polyline {
+.dv-border-box-3 .dv-border-svg-container > polyline {
   fill: none;
-  stroke: #2862b7;
 }
 .dv-border-box-3 .dv-bb3-line1 {
   stroke-width: 3;

lib/components/borderBox3/src/main.vue

@@ -1,14 +1,26 @@
 <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"
-        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+        :stroke="mergedColor[0]"
+        :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`" />
+        :stroke="mergedColor[1]"
+        :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`" />
+        :stroke="mergedColor[1]"
+        :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`" />
+        :stroke="mergedColor[1]"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`"
+      />
     </svg>
 
     <div class="border-box-content">
@@ -20,13 +32,50 @@
 <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'
+      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>

lib/components/borderBox4/src/main.css

@@ -13,15 +13,9 @@
   top: 0px;
   left: 0px;
 }
-.dv-border-box-4 .dv-border-svg-container polyline {
+.dv-border-box-4 .dv-border-svg-container > polyline {
   fill: none;
 }
-.dv-border-box-4 .sred {
-  stroke: red;
-}
-.dv-border-box-4 .sblue {
-  stroke: rgba(0, 0, 255, 0.8);
-}
 .dv-border-box-4 .sw1 {
   stroke-width: 1;
 }
@@ -30,48 +24,38 @@
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-1 {
-  stroke: red;
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-2 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-3 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-4 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-5 {
-  stroke: red;
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-6 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-7 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
 }
 .dv-border-box-4 .dv-bb4-line-8 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 3px;
   stroke-linecap: round;
 }
 .dv-border-box-4 .dv-bb4-line-9 {
-  stroke: red;
   stroke-width: 3px;
   stroke-linecap: round;
   stroke-dasharray: 100 250;
 }
 .dv-border-box-4 .dv-bb4-line-10 {
-  stroke: rgba(0, 0, 255, 0.8);
   stroke-width: 1;
   stroke-dasharray: 80 270;
 }

lib/components/borderBox4/src/main.vue

@@ -1,18 +1,30 @@
 <template>
   <div class="dv-border-box-4" :ref="ref">
     <svg :class="`dv-border-svg-container ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <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`" />
+      <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">
@@ -24,19 +36,54 @@
 <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],
-  data () {
-    return {
-      ref: 'border-box-4'
-    }
-  },
   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>

lib/components/borderBox5/src/main.css

@@ -6,32 +6,27 @@
 .dv-border-box-5 .dv-reverse {
   transform: rotate(180deg);
 }
-.dv-border-box-5 .dv-svg-container {
+.dv-border-box-5 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-5 .dv-svg-container polyline {
+.dv-border-box-5 .dv-border-svg-container > polyline {
   fill: none;
 }
-.dv-border-box-5 .dv-bb5-line-1 {
-  stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
-}
+.dv-border-box-5 .dv-bb5-line-1,
 .dv-border-box-5 .dv-bb5-line-2 {
-  stroke: rgba(255, 255, 255, 0.2);
+  stroke-width: 1;
 }
 .dv-border-box-5 .dv-bb5-line-3,
 .dv-border-box-5 .dv-bb5-line-6 {
   stroke-width: 5;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .dv-bb5-line-4,
 .dv-border-box-5 .dv-bb5-line-5 {
   stroke-width: 2;
-  stroke: rgba(255, 255, 255, 0.15);
 }
 .dv-border-box-5 .border-box-content {
   position: relative;

lib/components/borderBox5/src/main.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="dv-border-box-5" :ref="ref">
-    <svg :class="`dv-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
-      <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 :class="`dv-border-svg-container  ${reverse && 'dv-reverse'}`" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        10, 22 ${width - 22}, 22 ${width - 22}, ${height - 86} ${width - 84}, ${height - 24} 10, ${height - 24}
+      `" />
+
+      <polyline
+        class="dv-bb5-line-1"
+        :stroke="mergedColor[0]"
+        :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">
@@ -20,19 +32,54 @@
 <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],
-  data () {
-    return {
-      ref: 'border-box-5'
-    }
-  },
   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>

lib/components/borderBox6/src/main.css

@@ -3,20 +3,16 @@
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-svg-container {
+.dv-border-box-6 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-6 .dv-svg-container circle {
-  fill: gray;
-}
-.dv-border-box-6 .dv-svg-container polyline {
+.dv-border-box-6 .dv-border-svg-container > polyline {
   fill: none;
   stroke-width: 1;
-  stroke: rgba(255, 255, 255, 0.35);
 }
 .dv-border-box-6 .border-box-content {
   position: relative;

lib/components/borderBox6/src/main.vue

@@ -1,22 +1,26 @@
 <template>
   <div class="dv-border-box-6" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
-      <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 class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        9, 7 ${width - 9}, 7 ${width - 9}, ${height - 7} 9, ${height - 7}
+      `" />
+
+      <circle :fill="mergedColor[1]" cx="5" cy="5" r="2"/>
+      <circle :fill="mergedColor[1]" :cx="width - 5" cy="5" r="2" />
+      <circle :fill="mergedColor[1]" :cx="width - 5" :cy="height - 5" r="2" />
+      <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">
@@ -28,13 +32,50 @@
 <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'
+      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>

lib/components/borderBox7/src/main.css

@@ -2,26 +2,22 @@
   position: relative;
   width: 100%;
   height: 100%;
-  box-shadow: inset 0 0 40px rgba(128, 128, 128, 0.3);
-  border: 1px solid rgba(128, 128, 128, 0.3);
 }
-.dv-border-box-7 .dv-svg-container {
+.dv-border-box-7 .dv-border-svg-container {
   position: absolute;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
 }
-.dv-border-box-7 .dv-svg-container polyline {
+.dv-border-box-7 .dv-border-svg-container > polyline {
   fill: none;
   stroke-linecap: round;
 }
 .dv-border-box-7 .dv-bb7-line-width-2 {
-  stroke: rgba(128, 128, 128, 0.3);
   stroke-width: 2;
 }
 .dv-border-box-7 .dv-bb7-line-width-5 {
-  stroke: rgba(128, 128, 128, 0.5);
   stroke-width: 5;
 }
 .dv-border-box-7 .border-box-content {

lib/components/borderBox7/src/main.vue

@@ -1,15 +1,20 @@
-<template>
-  <div class="dv-border-box-7" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
-      <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}`" />
+<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-border-svg-container" :width="width" :height="height">
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`0, 25 0, 0 25, 0`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, 0 ${width}, 0 ${width}, 25`" />
+      <polyline class="dv-bb7-line-width-2" :stroke="mergedColor[0]" :points="`${width - 25}, ${height} ${width}, ${height} ${width}, ${height - 25}`" />
+      <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">
@@ -21,13 +26,50 @@
 <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'
+      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>

lib/components/borderBox8/src/main.css

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

lib/components/borderBox8/src/main.vue

@@ -1,10 +1,10 @@
 <template>
   <div class="dv-border-box-8" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <path
           :id="path"
-          :d="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+          :d="pathD"
           fill="transparent"
         />
         <radialGradient
@@ -24,8 +24,8 @@
         <mask :id="mask">
           <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
             <animateMotion
-              dur="3s"
-              :path="`M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`"
+              :dur="`${dur}s`"
+              :path="pathD"
               rotate="auto"
               repeatCount="indefinite"
             />
@@ -33,14 +33,16 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`5, 5 ${width - 5}, 5 ${width - 5} ${height - 5} 5, ${height - 5}`" />
+
       <use
-        stroke="#235fa7"
+        :stroke="mergedColor[0]"
         stroke-width="1"
         :xlink:href="`#${path}`"
       />
 
       <use
-        stroke="#4fd2dd"
+        :stroke="mergedColor[1]"
         stroke-width="3"
         :xlink:href="`#${path}`"
         :mask="`url(#${mask})`"
@@ -49,7 +51,7 @@
           attributeName="stroke-dasharray"
           :from="`0, ${length}`"
           :to="`${length}, 0`"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -63,16 +65,44 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+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 id = uuid()
     return {
       ref: 'border-box-8',
-      path: `border-box-8-path-${(new Date()).getTime()}`,
-      gradient: `border-box-8-gradient-${(new Date()).getTime()}`,
-      mask: `border-box-8-mask-${(new Date()).getTime()}`
+      path: `border-box-8-path-${id}`,
+      gradient: `border-box-8-gradient-${id}`,
+      mask: `border-box-8-mask-${id}`,
+
+      defaultColor: ['#235fa7', '#4fd2dd'],
+
+      mergedColor: []
     }
   },
   computed: {
@@ -80,7 +110,33 @@ export default {
       const { width, height } = this
 
       return (width + height - 5) * 2
+    },
+    pathD () {
+      const { reverse, width, height } = this
+
+      if (reverse) return `M 2.5, 2.5 L 2.5, ${height - 2.5} L ${width - 2.5}, ${height - 2.5} L ${width - 2.5}, 2.5 L 2.5, 2.5`
+
+      return `M2.5, 2.5 L${width - 2.5}, 2.5 L${width - 2.5}, ${height - 2.5} L2.5, ${height - 2.5} L2.5, 2.5`
     }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    }
+  },
+  methods: {
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/borderBox9/src/main.css

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

lib/components/borderBox9/src/main.vue

@@ -1,10 +1,42 @@
 <template>
   <div class="dv-border-box-9" :ref="ref">
-    <svg class="dv-svg-container" :width="width" :height="height">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
       <defs>
         <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
-          <stop offset="0%" stop-color="#11eefd" />
-          <stop offset="100%" stop-color="#0078d2" />
+          <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">
@@ -73,6 +105,15 @@
         </mask>
       </defs>
 
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${width * 0.1 + 1}, 9 ${width * 0.1 + 4}, 6 ${width * 0.52 + 2}, 6
+        ${width * 0.52 + 6}, 10 ${width * 0.58 - 7}, 10 ${width * 0.58 - 2}, 6
+        ${width * 0.9 + 2}, 6 ${width * 0.9 + 6}, 10 ${width - 10}, 10 ${width - 10}, ${height * 0.1 - 6}
+        ${width - 6}, ${height * 0.1 - 1} ${width - 6}, ${height * 0.8 + 1} ${width - 10}, ${height * 0.8 + 6}
+        ${width - 10}, ${height - 10} ${width * 0.92 + 7}, ${height - 10}  ${width * 0.92 + 2}, ${height - 6}
+        11, ${height - 6} 11, ${height * 0.15 - 2} 15, ${height * 0.15 - 7}
+      `" />
+
       <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
     </svg>
 
@@ -84,17 +125,56 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+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 id = uuid()
     return {
       ref: 'border-box-9',
 
-      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
-      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+      gradientId: `border-box-9-gradient-${id}`,
+      maskId: `border-box-9-mask-${id}`,
+
+      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>

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)
+}

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;
+}

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>

lib/components/charts/src/main.vue

@@ -5,6 +5,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
@@ -19,9 +21,10 @@ export default {
     }
   },
   data () {
+    const id = uuid()
     return {
-      ref: `charts-container-${(new Date()).getTime()}`,
-      chartRef: `chart-${(new Date()).getTime()}`,
+      ref: `charts-container-${id}`,
+      chartRef: `chart-${id}`,
 
       chart: null
     }
@@ -34,7 +37,7 @@ export default {
 
       if (!option) option = {}
 
-      chart.setOption(option)
+      chart.setOption(option, true)
     }
   },
   methods: {

lib/components/decoration1/src/main.vue

@@ -8,7 +8,7 @@
         <rect
           v-if="Math.random() > 0.6"
           :key="i"
-          fill="#fff"
+          :fill="mergedColor[0]"
           :x="point[0] - halfPointSideLength"
           :y="point[1] - halfPointSideLength"
           :width="pointSideLength"
@@ -17,7 +17,7 @@
           <animate
             v-if="Math.random() > 0.6"
             attributeName="fill"
-            values="#fff;transparent"
+            :values="`${mergedColor[0]};transparent`"
             dur="1s"
             :begin="Math.random() * 2"
             repeatCount="indefinite"
@@ -27,7 +27,7 @@
 
       <rect
         v-if="rects[0]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[0][0] - pointSideLength"
         :y="rects[0][1] - pointSideLength"
         :width="pointSideLength * 2"
@@ -61,7 +61,7 @@
 
       <rect
         v-if="rects[1]"
-        fill="#0de7c2"
+        :fill="mergedColor[1]"
         :x="rects[1][0] - 40"
         :y="rects[1][1] - pointSideLength"
         :width="40"
@@ -87,9 +87,19 @@
 <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
 
@@ -108,7 +118,18 @@ export default {
 
       points: [],
 
-      rects: []
+      rects: [],
+
+      defaultColor: ['#fff', '#0de7c2'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -160,7 +181,17 @@ export default {
       const { calcSVGData } = this
 
       calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration10/src/main.vue

@@ -2,13 +2,13 @@
   <div class="dv-decoration-10" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="rgba(0, 194, 255, 0.3)"
+        :stroke="mergedColor[1]"
         stroke-width="2"
         :points="`0, ${height / 2} ${width}, ${height / 2}`"
       />
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -32,7 +32,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :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}`"
@@ -55,7 +55,7 @@
       </polyline>
 
       <polyline
-        stroke="rgba(0, 194, 255, 1)"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
         :stroke-dasharray="`0, ${width * 0.2}`"
@@ -77,65 +77,65 @@
         />
       </polyline>
 
-      <circle cx="2" :cy="height / 2" r="2" fill="#03709f">
+      <circle cx="2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId1"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :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="#03709f">
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId3"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId2}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :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="#03709f">
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId5"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId4}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
         />
       </circle>
 
-      <circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
+      <circle :cx="width - 2" :cy="height / 2" r="2" :fill="mergedColor[1]">
         <animate
           :id="animationId7"
           attributeName="fill"
-          values="#03709f;#00c2ff"
+          :values="`${mergedColor[1]};${mergedColor[0]}`"
           :begin="`${animationId6}.end`"
           dur="0.3s"
           fill="freeze"
         />
         <animate
           attributeName="fill"
-          values="#03709f;#03709f"
+          :values="`${mergedColor[1]};${mergedColor[1]}`"
           dur="0.01s"
           :begin="`${animationId7}.end`"
           fill="freeze"
@@ -147,22 +147,57 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+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 id = uuid()
     return {
       ref: 'decoration-10',
 
-      animationId1: `d10ani1${(new Date()).getTime()}`,
-      animationId2: `d10ani2${(new Date()).getTime()}`,
-      animationId3: `d10ani3${(new Date()).getTime()}`,
-      animationId4: `d10ani4${(new Date()).getTime()}`,
-      animationId5: `d10ani5${(new Date()).getTime()}`,
-      animationId6: `d10ani6${(new Date()).getTime()}`,
-      animationId7: `d10ani7${(new Date()).getTime()}`
+      animationId1: `d10ani1${id}`,
+      animationId2: `d10ani2${id}`,
+      animationId3: `d10ani3${id}`,
+      animationId4: `d10ani4${id}`,
+      animationId5: `d10ani5${id}`,
+      animationId6: `d10ani6${id}`,
+      animationId7: `d10ani7${id}`,
+
+      defaultColor: ['#00c2ff', 'rgba(0, 194, 255, 0.3)'],
+
+      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>

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)
+}

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;
+}

lib/components/decoration11/src/main.vue

@@ -0,0 +1,104 @@
+<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 () {
+    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>

lib/components/decoration12/index.js

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

lib/components/decoration12/src/main.css

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

lib/components/decoration12/src/main.vue

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

lib/components/decoration2/src/main.vue

@@ -1,12 +1,12 @@
 <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="#3faacb">
+      <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"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines=".42,0,.58,1"
@@ -14,12 +14,12 @@
         />
       </rect>
 
-      <rect :x="x" :y="y" width="1" height="1" fill="#fff">
+      <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"
+          :dur="`${dur}s`"
           calcMode="spline"
           keyTimes="0;1"
           keySplines="0.42,0,0.58,1"
@@ -33,13 +33,25 @@
 <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
+    },
+    dur: {
+      type: Number,
+      default: 6
     }
   },
   data () {
@@ -50,10 +62,19 @@ export default {
       y: 0,
 
       w: 0,
-      h: 0
+      h: 0,
+
+      defaultColor: ['#3faacb', '#fff'],
+
+      mergedColor: []
     }
   },
   watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
+    },
     reverse () {
       const { calcSVGData } = this
 
@@ -85,7 +106,17 @@ export default {
       const { calcSVGData } = this
 
       calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration3/src/main.vue

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

lib/components/decoration4/src/main.css

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

lib/components/decoration4/src/main.vue

@@ -2,16 +2,16 @@
   <div class="dv-decoration-4" :ref="ref">
     <div
       :class="`container ${reverse ? 'reverse' : 'normal'}`"
-      :style="reverse ? `width:${width}px;height:5px` : `width:5px;height:${height}px;`"
+      :style="reverse ? `width:${width}px;height:5px;animation-duration:${dur}s` : `width:5px;height:${height}px;animation-duration:${dur}s`"
     >
       <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
         <polyline
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[0]"
           :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
         />
         <polyline
           class="bold-line"
-          stroke="rgba(255, 255, 255, 0.3)"
+          :stroke="mergedColor[1]"
           stroke-width="3"
           stroke-dasharray="20, 80"
           stroke-dashoffset="-30"
@@ -25,14 +25,54 @@
 <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: 'DvDecoration4',
   mixins: [autoResize],
-  props: ['reverse'],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    reverse: {
+      type: Boolean,
+      default: false
+    },
+    dur: {
+      type: Number,
+      default: 3
+    }
+  },
   data () {
     return {
-      ref: 'decoration-4'
+      ref: 'decoration-4',
+
+      defaultColor: ['rgba(255, 255, 255, 0.3)', 'rgba(255, 255, 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>

lib/components/decoration5/src/main.vue

@@ -3,7 +3,7 @@
     <svg :width="width" :height="height">
       <polyline
         fill="transparent"
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="3"
         :points="line1Points"
       >
@@ -12,7 +12,7 @@
           attributeType="XML"
           :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
           :to="`0, 0, ${line1Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -22,7 +22,7 @@
       </polyline>
       <polyline
         fill="transparent"
-        stroke="#3f96a5"
+        :stroke="mergedColor[1]"
         stroke-width="2"
         :points="line2Points"
       >
@@ -31,7 +31,7 @@
           attributeType="XML"
           :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
           :to="`0, 0, ${line2Length}, 0`"
-          dur="1.2s"
+          :dur="`${dur}s`"
           begin="0s"
           calcMode="spline"
           keyTimes="0;1"
@@ -48,9 +48,23 @@ import autoResize from '../../../mixin/autoResize'
 
 import { getPolylineLength } from '@jiaminghi/charts/lib/util'
 
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
   name: 'DvDecoration5',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 1.2
+    }
+  },
   data () {
     return {
       ref: 'decoration-5',
@@ -59,7 +73,18 @@ export default {
       line2Points: '',
 
       line1Length: 0,
-      line2Length: 0
+      line2Length: 0,
+
+      defaultColor: ['#3f96a5', '#3f96a5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -97,7 +122,17 @@ export default {
       const { calcSVGData } = this
 
       calcSVGData()
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration6/src/main.vue

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

lib/components/decoration7/src/main.vue

@@ -4,13 +4,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="10, 0 19, 10 10, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="2, 0 11, 10 2, 20"
       />
     </svg>
@@ -19,13 +19,13 @@
       <polyline
         stroke-width="4"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[0]"
         points="11, 0 2, 10 11, 20"
       />
       <polyline
         stroke-width="2"
         fill="transparent"
-        stroke="#1dc1f5"
+        :stroke="mergedColor[1]"
         points="19, 0 10, 10 19, 20"
       />
     </svg>
@@ -33,7 +33,43 @@
 </template>
 
 <script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
 export default {
-  name: 'DvDecoration7'
+  name: 'DvDecoration7',
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    }
+  },
+  data () {
+    return {
+      defaultColor: ['#1dc1f5', '#1dc1f5'],
+
+      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>

lib/components/decoration8/src/main.vue

@@ -2,21 +2,21 @@
   <div class="dv-decoration-8" :ref="ref">
     <svg :width="width" :height="height">
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[0]"
         stroke-width="2"
         fill="transparent"
         :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
       />
 
       <polyline
-        stroke="#3f96a5"
+        :stroke="mergedColor[1]"
         fill="transparent"
         stroke-width="3"
         :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
@@ -28,10 +28,18 @@
 <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: 'DvDecoration8',
   mixins: [autoResize],
   props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
     reverse: {
       type: Boolean,
       default: false
@@ -39,7 +47,18 @@ export default {
   },
   data () {
     return {
-      ref: 'decoration-8'
+      ref: 'decoration-8',
+
+      defaultColor: ['#3f96a5', '#3f96a5'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -49,7 +68,17 @@ export default {
       if (!reverse) return pos
 
       return width - pos
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
     }
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/decoration9/src/main.vue

@@ -10,7 +10,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.5)"
+        :stroke="mergedColor[1]"
         stroke-width="10"
         stroke-dasharray="80, 100, 30, 100"
       >
@@ -18,7 +18,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -28,7 +28,7 @@
         cy="50"
         r="45"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.8)"
+        :stroke="mergedColor[0]"
         stroke-width="6"
         stroke-dasharray="50, 66, 100, 66"
       >
@@ -36,7 +36,7 @@
           attributeName="transform"
           type="rotate"
           values="0 50 50;-360 50 50"
-          dur="3s"
+          :dur="`${dur}s`"
           repeatCount="indefinite"
         />
       </circle>
@@ -46,7 +46,7 @@
         cy="50"
         r="38"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -55,15 +55,15 @@
         v-for="(foo, i) in new Array(20).fill(0)"
         :key="i"
         :xlink:href="`#${polygonId}`"
-        stroke="rgba(3, 166, 224, 0.6)"
-        :fill="Math.random() > 0.4 ? 'transparent' : 'rgba(3, 166, 224, 0.8)'"
+        :stroke="mergedColor[1]"
+        :fill="Math.random() > 0.4 ? 'transparent' : mergedColor[0]"
       >
         <animateTransform
           attributeName="transform"
           type="rotate"
           values="0 50 50;360 50 50"
-          dur="3s"
-          :begin="`${i * 0.15}s`"
+          :dur="`${dur}s`"
+          :begin="`${i * dur / 20}s`"
           repeatCount="indefinite"
         />
       </use>
@@ -73,7 +73,7 @@
         cy="50"
         r="26"
         fill="transparent"
-        stroke="rgba(3, 166, 224, 0.2)"
+        :stroke="fade(mergedColor[1] || defaultColor[1], 30)"
         stroke-width="1"
         stroke-dasharray="5, 1"
       />
@@ -85,19 +85,48 @@
 
 <script>
 import autoResize from '../../../mixin/autoResize'
+import { uuid } from '../../../util/index'
+
+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: 'DvDecoration9',
   mixins: [autoResize],
+  props: {
+    color: {
+      type: Array,
+      default: () => ([])
+    },
+    dur: {
+      type: Number,
+      default: 3
+    }
+  },
   data () {
+    const id = uuid()
     return {
       ref: 'decoration-9',
 
-      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+      polygonId: `decoration-9-polygon-${id}`,
 
       svgWH: [100, 100],
 
-      svgScale: [1, 1]
+      svgScale: [1, 1],
+
+      defaultColor: ['rgba(3, 166, 224, 0.8)', 'rgba(3, 166, 224, 0.5)'],
+
+      mergedColor: []
+    }
+  },
+  watch: {
+    color () {
+      const { mergeColor } = this
+
+      mergeColor()
     }
   },
   methods: {
@@ -117,7 +146,18 @@ export default {
       const { calcScale } = this
 
       calcScale()
-    }
+    },
+    mergeColor () {
+      const { color, defaultColor } = this
+
+      this.mergedColor = deepMerge(deepClone(defaultColor, true), color || [])
+    },
+    fade
+  },
+  mounted () {
+    const { mergeColor } = this
+
+    mergeColor()
   }
 }
 </script>

lib/components/digitalFlop/src/main.vue

@@ -53,6 +53,12 @@ export default {
          * @example textAlign = 'center' | 'left' | 'right'
          */
         textAlign: 'center',
+        /**
+         * @description rowGap
+         * @type {Number}
+         @default rowGap = 0
+         */
+        rowGap: 0,
         /**
          * @description Text style configuration
          * @type {Object} {CRender Class Style}
@@ -61,6 +67,11 @@ export default {
           fontSize: 30,
           fill: '#3de7c9'
         },
+        /**
+         * @description Number formatter
+         * @type {Null|Function}
+         */
+        formatter: undefined,
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -124,7 +135,7 @@ export default {
       })
     },
     getShape () {
-      const { number, content, toFixed, textAlign } = this.mergedConfig
+      const { number, content, toFixed, textAlign, rowGap, formatter } = this.mergedConfig
 
       const [w, h] = this.renderer.area
 
@@ -137,7 +148,9 @@ export default {
         number,
         content,
         toFixed,
-        position
+        position,
+        rowGap,
+        formatter
       }
     },
     getStyle () {
@@ -151,6 +164,8 @@ export default {
     update () {
       const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
 
+      graph.animationEnd()
+
       mergeConfig()
 
       if (!graph) return

lib/components/flylineChart/src/main.vue

@@ -153,7 +153,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../../util/index'
+import { randomExtend, getPointDistance, uuid } from '../../../util/index'
 
 import autoResize from '../../../mixin/autoResize'
 
@@ -171,13 +171,14 @@ export default {
     }
   },
   data () {
+    const id = uuid()
     return {
       ref: 'dv-flyline-chart',
       unique: Math.random(),
-      maskId: `flyline-mask-id-${(new Date()).getTime()}`,
-      maskCircleId: `mask-circle-id-${(new Date()).getTime()}`,
-      gradientId: `gradient-id-${(new Date()).getTime()}`,
-      gradient2Id: `gradient2-id-${(new Date()).getTime()}`,
+      maskId: `flyline-mask-id-${id}`,
+      maskCircleId: `mask-circle-id-${id}`,
+      gradientId: `gradient-id-${id}`,
+      gradient2Id: `gradient2-id-${id}`,
 
       defaultConfig: {
         /**

lib/components/flylineChartEnhanced/index.js

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

lib/components/flylineChartEnhanced/src/main.css

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

lib/components/flylineChartEnhanced/src/main.vue

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

lib/components/percentPond/src/main.css

@@ -1,7 +1,15 @@
 .dv-percent-pond {
+  position: relative;
   display: flex;
   flex-direction: column;
 }
+.dv-percent-pond svg {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
 .dv-percent-pond polyline {
   transition: all 0.3s;
 }

lib/components/percentPond/src/main.vue

@@ -4,13 +4,13 @@
       <defs>
         <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
 
         <linearGradient :id="gradientId2" x1="0%" y1="0%" :x2="gradient2XPos" y2="0%">
           <stop v-for="lc in linearGradient" :key="lc[0]"
-            :offset="lc[0]"
+            :offset="`${lc[0]}%`"
             :stop-color="lc[1]" />
         </linearGradient>
       </defs>
@@ -22,8 +22,8 @@
         fill="transparent"
         :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
         :stroke="`url(#${gradientId1})`"
-        :width="rectWidth"
-        :height="rectHeight"
+        :width="rectWidth > 0 ? rectWidth : 0"
+        :height="rectHeight > 0 ? rectHeight : 0"
       />
       <polyline
         :stroke-width="polylineWidth"
@@ -44,6 +44,8 @@
 </template>
 
 <script>
+import { uuid } from '../../../util/index'
+
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
@@ -57,9 +59,10 @@ export default {
     }
   },
   data () {
+    const id = uuid()
     return {
-      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
-      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+      gradientId1: `percent-pond-gradientId1-${id}`,
+      gradientId2: `percent-pond-gradientId2-${id}`,
 
       width: 0,
       height: 0,
@@ -233,13 +236,13 @@ export default {
 
       await $nextTick()
 
-      const dom = $refs['percent-pond']
+      const { clientWidth, clientHeight } = $refs['percent-pond']
 
-      this.width = dom.clientWidth
-      this.height = dom.clientHeight
+      this.width = clientWidth
+      this.height = clientHeight
     },
     mergeConfig () {
-      let { config, defaultConfig } = this
+      const { config, defaultConfig } = this
 
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     }

lib/components/scrollBoard/src/main.vue

@@ -4,7 +4,7 @@
       <div
         class="header-item"
         v-for="(headerItem, i) in header"
-        :key="headerItem + i"
+        :key="`${headerItem}${i}`"
         :style="`
           height: ${mergedConfig.headerHeight}px;
           line-height: ${mergedConfig.headerHeight}px;
@@ -23,7 +23,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.scroll"
+        :key="`${row.toString()}${row.scroll}`"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -33,11 +33,13 @@
         <div
           class="ceil"
           v-for="(ceil, ci) in row.ceils"
-          :key="ceil + ri + ci"
+          :key="`${ceil}${ri}${ci}`"
           :style="`width: ${widths[ci]}px;`"
           :align="aligns[ci]"
           v-html="ceil"
-          @click="emitEvent(ri, ci, row, ceil)"
+          @click="emitEvent('click', ri, ci, row, ceil)"
+          @mouseenter="handleHover(true, ri, ci, row, ceil)"
+          @mouseleave="handleHover(false)"
         />
 
       </div>
@@ -134,13 +136,26 @@ export default {
          * @default index = false
          */
         index: false,
+        /**
+         * @description index Header
+         * @type {String}
+         * @default indexHeader = '#'
+         */
+        indexHeader: '#',
         /**
          * @description Carousel type
          * @type {String}
          * @default carousel = 'single'
          * @example carousel = 'single' | 'page'
          */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Pause scroll when mouse hovered
+         * @type {Boolean}
+         * @default hoverPause = true
+         * @example hoverPause = true | false
+         */
+        hoverPause: true
       },
 
       mergedConfig: null,
@@ -161,7 +176,11 @@ export default {
 
       animationIndex: 0,
 
-      animationHandler: ''
+      animationHandler: '',
+
+      updater: 0,
+
+      needCalc: false
     }
   },
   watch: {
@@ -170,10 +189,24 @@ export default {
 
       stopAnimation()
 
+      this.animationIndex = 0
+
       calcData()
     }
   },
   methods: {
+    handleHover(enter, ri, ci, row, ceil){
+      const { mergedConfig, emitEvent, stopAnimation, animation } = this
+
+      if (enter) emitEvent('mouseover', ri, ci, row, ceil)
+      if (!mergedConfig.hoverPause) return
+
+      if (enter) {
+        stopAnimation()
+      } else {
+        animation(true)
+      }
+    },
     afterAutoResizeMixinInit () {
       const { calcData } = this
 
@@ -215,7 +248,7 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     calcHeaderData () {
-      let { header, index } = this.mergedConfig
+      let { header, index, indexHeader} = this.mergedConfig
 
       if (!header.length) {
         this.header = []
@@ -225,7 +258,7 @@ export default {
 
       header = [...header]
 
-      if (index) header.unshift('#')
+      if (index) header.unshift(indexHeader)
 
       this.header = header
     },
@@ -236,7 +269,7 @@ export default {
         data = data.map((row, i) => {
           row = [...row]
 
-          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</span>`
 
           row.unshift(indexTag)
 
@@ -260,11 +293,16 @@ export default {
     calcWidths () {
       const { width, mergedConfig, rowsData } = this
 
-      const { columnWidth } = mergedConfig
+      const { columnWidth, header } = mergedConfig
 
       const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
 
-      const columnNum = rowsData[0] ? rowsData[0].ceils.length : 0
+      let columnNum = 0
+      if (rowsData[0]) {
+        columnNum = rowsData[0].ceils.length
+      } else if (header.length) {
+        columnNum = header.length
+      }
 
       const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)
 
@@ -299,7 +337,15 @@ export default {
       this.aligns = deepMerge(aligns, align)
     },
     async animation (start = false) {
-      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+      const { needCalc, calcHeights, calcRowsData } = this
+
+      if (needCalc) {
+        calcRowsData()
+        calcHeights()
+        this.needCalc = false
+      }
+
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
 
@@ -307,17 +353,21 @@ export default {
 
       if (rowNum >= rowLength) return
 
-      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
 
       const animationNum = carousel === 'single' ? 1 : rowNum
 
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, carousel === 'page' ? rowNum * 2 : rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
 
       this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
 
@@ -330,21 +380,36 @@ export default {
       this.animationHandler = setTimeout(animation, waitTime - 300)
     },
     stopAnimation () {
-      const { animationHandler } = this
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
 
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
     },
-    emitEvent (ri, ci, row, ceil) {
+    emitEvent (type, ri, ci, row, ceil) {
       const { ceils, rowIndex } = row
 
-      this.$emit('click', {
+      this.$emit(type, {
         row: ceils,
         ceil,
         rowIndex,
         columnIndex: ci
       })
+    },
+    updateRows(rows, animationIndex) {
+      const { mergedConfig, animationHandler, animation } = this
+
+      this.mergedConfig = {
+        ...mergedConfig,
+        data: [...rows]
+      }
+
+      this.needCalc = true
+
+      if (typeof animationIndex === 'number') this.animationIndex = animationIndex
+      if (!animationHandler) animation(true)
     }
   },
   destroyed () {

lib/components/scrollRankingBoard/src/main.vue

@@ -8,8 +8,8 @@
     >
       <div class="ranking-info">
         <div class="rank">No.{{ item.ranking }}</div>
-        <div class="info-name">{{ item.name }}</div>
-        <div class="ranking-value">{{ item.value }}</div>
+        <div class="info-name" v-html="item.name" />
+        <div class="ranking-value">{{ mergedConfig.valueFormatter ? mergedConfig.valueFormatter(item) : item.value + mergedConfig.unit }}</div>
       </div>
 
       <div class="ranking-column">
@@ -69,7 +69,26 @@ export default {
          * @default carousel = 'single'
          * @example carousel = 'single' | 'page'
          */
-        carousel: 'single'
+        carousel: 'single',
+        /**
+         * @description Value unit
+         * @type {String}
+         * @default unit = ''
+         * @example unit = 'ton'
+         */
+        unit: '',
+        /**
+         * @description Auto sort by value
+         * @type {Boolean}
+         * @default sort = true
+         */
+        sort: true,
+        /**
+         * @description Value formatter
+         * @type {Function}
+         * @default valueFormatter = null
+         */
+        valueFormatter: null
       },
 
       mergedConfig: null,
@@ -82,7 +101,9 @@ export default {
 
       animationIndex: 0,
 
-      animationHandler: ''
+      animationHandler: '',
+
+      updater: 0
     }
   },
   watch: {
@@ -128,19 +149,29 @@ export default {
       this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
     },
     calcRowsData () {
-      let { data, rowNum } = this.mergedConfig
+      let { data, rowNum, sort } = this.mergedConfig
 
-      data.sort(({ value: a }, { value: b }) => {
+      sort && data.sort(({ value: a }, { value: b }) => {
         if (a > b) return -1
         if (a < b) return 1
         if (a === b) return 0
       })
 
       const value = data.map(({ value }) => value)
+      
+      const min = Math.min(...value) || 0
+
+      // abs of min
+      const minAbs = Math.abs(min)
 
       const max = Math.max(...value) || 0
 
-      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
+      // abs of max
+      const maxAbs = Math.abs(max)
+
+      const total = max + minAbs
+
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: (row.value + minAbs) / total * 100 }))
 
       const rowLength = data.length
 
@@ -165,7 +196,7 @@ export default {
       if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
     },
     async animation (start = false) {
-      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation, updater } = this
 
       const { waitTime, carousel, rowNum } = mergedConfig
 
@@ -173,17 +204,21 @@ export default {
 
       if (rowNum >= rowLength) return
 
-      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+      if (start) {
+        await new Promise(resolve => setTimeout(resolve, waitTime))
+        if (updater !== this.updater) return
+      }
 
       const animationNum = carousel === 'single' ? 1 : rowNum
 
       let rows = rowsData.slice(animationIndex)
       rows.push(...rowsData.slice(0, animationIndex))
 
-      this.rows = rows
+      this.rows = rows.slice(0, rowNum + 1)
       this.heights = new Array(rowLength).fill(avgHeight)
 
       await new Promise(resolve => setTimeout(resolve, 300))
+      if (updater !== this.updater) return
 
       this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
 
@@ -196,12 +231,14 @@ export default {
       this.animationHandler = setTimeout(animation, waitTime - 300)
     },
     stopAnimation () {
-      const { animationHandler } = this
+      const { animationHandler, updater } = this
+
+      this.updater = (updater + 1) % 999999
 
       if (!animationHandler) return
 
       clearTimeout(animationHandler)
-    }
+    },
   },
   destroyed () {
     const { stopAnimation } = this

lib/components/waterLevelPond/src/main.vue

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

lib/index.js

@@ -3,6 +3,10 @@
  */
 export { default as activeRingChart } from './components/activeRingChart/index'
 export { default as borderBox1 } from './components/borderBox1/index'
+export { default as borderBox10 } from './components/borderBox10/index'
+export { default as borderBox11 } from './components/borderBox11/index'
+export { default as borderBox12 } from './components/borderBox12/index'
+export { default as borderBox13 } from './components/borderBox13/index'
 export { default as borderBox2 } from './components/borderBox2/index'
 export { default as borderBox3 } from './components/borderBox3/index'
 export { default as borderBox4 } from './components/borderBox4/index'
@@ -11,10 +15,13 @@ export { default as borderBox6 } from './components/borderBox6/index'
 export { default as borderBox7 } from './components/borderBox7/index'
 export { default as borderBox8 } from './components/borderBox8/index'
 export { default as borderBox9 } from './components/borderBox9/index'
+export { default as capsuleChart } from './components/capsuleChart/index'
 export { default as charts } from './components/charts/index'
 export { default as conicalColumnChart } from './components/conicalColumnChart/index'
 export { default as decoration1 } from './components/decoration1/index'
 export { default as decoration10 } from './components/decoration10/index'
+export { default as decoration11 } from './components/decoration11/index'
+export { default as decoration12 } from './components/decoration12/index'
 export { default as decoration2 } from './components/decoration2/index'
 export { default as decoration3 } from './components/decoration3/index'
 export { default as decoration4 } from './components/decoration4/index'
@@ -25,6 +32,7 @@ export { default as decoration8 } from './components/decoration8/index'
 export { default as decoration9 } from './components/decoration9/index'
 export { default as digitalFlop } from './components/digitalFlop/index'
 export { default as flylineChart } from './components/flylineChart/index'
+export { default as flylineChartEnhanced } from './components/flylineChartEnhanced/index'
 export { default as fullScreenContainer } from './components/fullScreenContainer/index'
 export { default as loading } from './components/loading/index'
 export { default as percentPond } from './components/percentPond/index'
@@ -47,6 +55,10 @@ import borderBox6 from './components/borderBox6/index'
 import borderBox7 from './components/borderBox7/index'
 import borderBox8 from './components/borderBox8/index'
 import borderBox9 from './components/borderBox9/index'
+import borderBox10 from './components/borderBox10/index'
+import borderBox11 from './components/borderBox11/index'
+import borderBox12 from './components/borderBox12/index'
+import borderBox13 from './components/borderBox13/index'
 
 // decoration
 import decoration1 from './components/decoration1/index'
@@ -59,14 +71,18 @@ import decoration7 from './components/decoration7/index'
 import decoration8 from './components/decoration8/index'
 import decoration9 from './components/decoration9/index'
 import decoration10 from './components/decoration10/index'
+import decoration11 from './components/decoration11/index'
+import decoration12 from './components/decoration12/index'
 
 // charts
 import charts from './components/charts/index'
 
 import activeRingChart from './components/activeRingChart'
+import capsuleChart from './components/capsuleChart'
 import waterLevelPond from './components/waterLevelPond/index'
 import percentPond from './components/percentPond/index'
 import flylineChart from './components/flylineChart'
+import flylineChartEnhanced from './components/flylineChartEnhanced'
 import conicalColumnChart from './components/conicalColumnChart'
 import digitalFlop from './components/digitalFlop'
 import scrollBoard from './components/scrollBoard/index'
@@ -89,6 +105,10 @@ export default function (Vue) {
   Vue.use(borderBox7)
   Vue.use(borderBox8)
   Vue.use(borderBox9)
+  Vue.use(borderBox10)
+  Vue.use(borderBox11)
+  Vue.use(borderBox12)
+  Vue.use(borderBox13)
 
   // decoration
   Vue.use(decoration1)
@@ -101,14 +121,18 @@ export default function (Vue) {
   Vue.use(decoration8)
   Vue.use(decoration9)
   Vue.use(decoration10)
+  Vue.use(decoration11)
+  Vue.use(decoration12)
 
   // charts
   Vue.use(charts)
 
   Vue.use(activeRingChart)
+  Vue.use(capsuleChart)
   Vue.use(waterLevelPond)
   Vue.use(percentPond)
   Vue.use(flylineChart)
+  Vue.use(flylineChartEnhanced)
   Vue.use(conicalColumnChart)
   Vue.use(digitalFlop)
   Vue.use(scrollBoard)

lib/mixin/autoResize.js

@@ -29,11 +29,17 @@ export default {
       const { $nextTick, $refs, ref, onResize } = this
 
       return new Promise(resolve => {
-        $nextTick(e => {
+        $nextTick(_ => {
           const dom = this.dom = $refs[ref]
 
-          this.width = dom.clientWidth
-          this.height = dom.clientHeight
+          this.width = dom ? dom.clientWidth : 0
+          this.height = dom ? dom.clientHeight : 0
+
+          if (!dom) {
+            console.warn('DataV: Failed to get dom node, component rendering may be abnormal!')
+          } else if (!this.width || !this.height) {
+            console.warn('DataV: Component width or height is 0px, rendering abnormality may occur!')
+          }
 
           if (typeof onResize === 'function' && resize) onResize()
 
@@ -56,6 +62,8 @@ export default {
     unbindDomResizeCallback () {
       let { domObserver, debounceInitWHFun } = this
 
+      if (!domObserver) return
+
       domObserver.disconnect()
       domObserver.takeRecords()
       domObserver = null

lib/util/index.js

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

package.json

@@ -1,21 +1,22 @@
 {
-  "name": "@jiaminghi/data-view",
-  "version": "2.3.7",
-  "author": "JiaMing <743192023@qq.com>",
+  "name": "@ykxiao/demu-mes-data-v",
+  "version": "1.0.1",
+  "author": "Longlong <long@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/jiaming743/DataV.git"
+    "url": "https://git.tool.dwoodauto.com/ykxiao/DemuMesDataV.git"
   },
   "scripts": {
-    "compile": "node publish.js",
-    "prepublish": "npm run compile",
+    "build": "node build/index.js",
+    "prepublish": "npm run build",
+    "deploy": "node deploy/index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/jiaming743/DataV/issues"
+    "url": "https://github.com/DataV-Team/DataV/issues"
   },
   "keywords": [
     "vue",
@@ -24,10 +25,22 @@
     "datavisual"
   ],
   "dependencies": {
-    "@jiaminghi/charts": "*"
+    "@jiaminghi/charts": "*",
+    "@babel/runtime": "^7.5.5"
   },
-  "homepage": "https://github.com/jiaming743/DataV#readme",
+  "homepage": "https://github.com/DataV-Team/DataV#readme",
   "devDependencies": {
-    "@jiaminghi/fs": "0.0.1"
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-transform-runtime": "^7.5.5",
+    "@babel/preset-env": "^7.5.5",
+    "@jiaminghi/fs": "0.0.1",
+    "ftp": "^0.3.10",
+    "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-terser": "^5.1.1",
+    "rollup-plugin-vue": "^5.0.1",
+    "vue-template-compiler": "^2.6.10"
   }
 }

publish.js

@@ -1,3 +0,0 @@
-const start = require('./publish/index')
-
-start()

src/components/activeRingChart/src/main.vue

@@ -11,7 +11,7 @@
 <script>
 import Charts from '@jiaminghi/charts'
 
-import dvDigitalFlop from '../../digitalFlop/src/main'
+import dvDigitalFlop from '../../digitalFlop/src/main.vue'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
@@ -28,7 +28,7 @@ export default {
       default: () => ({})
     }
   },
-  data () {
+  data() {
     return {
       defaultConfig: {
         /**
@@ -78,6 +78,16 @@ export default {
           fontSize: 25,
           fill: '#fff'
         },
+        /**
+         * @description Digital flop toFixed
+         * @type {Number}
+         */
+        digitalFlopToFixed: 0,
+        /**
+         * @description Digital flop unit
+         * @type {String}
+         */
+        digitalFlopUnit: '',
         /**
          * @description CRender animationCurve
          * @type {String}
@@ -89,7 +99,13 @@ export default {
          * @type {String}
          * @default animationFrame = 50
          */
-        animationFrame: 50
+        animationFrame: 50,
+        /**
+         * @description showOriginValue
+         * @type {Boolean}
+         * @default showOriginValue = false
+         */
+        showOriginValue: false
       },
 
       mergedConfig: null,
@@ -102,33 +118,48 @@ export default {
     }
   },
   computed: {
-    digitalFlop () {
+    digitalFlop() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return {}
 
-      const { digitalFlopStyle, data } = mergedConfig
+      const {
+        digitalFlopStyle,
+        digitalFlopToFixed,
+        data,
+        showOriginValue,
+        digitalFlopUnit
+      } = mergedConfig
 
       const value = data.map(({ value }) => value)
 
-      const sum = value.reduce((all, v) => all + v, 0)
+      let displayValue
 
-      const percent = parseInt(value[activeIndex] / sum * 100)
+      if (showOriginValue) {
+        displayValue = value[activeIndex]
+      } else {
+        const sum = value.reduce((all, v) => all + v, 0)
+
+        const percent = parseFloat((value[activeIndex] / sum) * 100) || 0
+
+        displayValue = percent
+      }
 
       return {
-        content: '{nt}%',
-        number: [percent],
-        style: digitalFlopStyle
+        content: showOriginValue ? `{nt}${digitalFlopUnit}` : `{nt}${digitalFlopUnit || '%'}`,
+        number: [displayValue],
+        style: digitalFlopStyle,
+        toFixed: digitalFlopToFixed
       }
     },
-    ringName () {
+    ringName() {
       const { mergedConfig, activeIndex } = this
 
       if (!mergedConfig) return ''
 
       return mergedConfig.data[activeIndex].name
     },
-    fontSize () {
+    fontSize() {
       const { mergedConfig } = this
 
       if (!mergedConfig) return ''
@@ -137,7 +168,7 @@ export default {
     }
   },
   watch: {
-    config () {
+    config() {
       const { animationHandler, mergeConfig, setRingOption } = this
 
       clearTimeout(animationHandler)
@@ -150,7 +181,7 @@ export default {
     }
   },
   methods: {
-    init () {
+    init() {
       const { initChart, mergeConfig, setRingOption } = this
 
       initChart()
@@ -159,26 +190,29 @@ export default {
 
       setRingOption()
     },
-    initChart () {
+    initChart() {
       const { $refs } = this
 
       this.chart = new Charts($refs['active-ring-chart'])
     },
-    mergeConfig () {
+    mergeConfig() {
       const { defaultConfig, config } = this
 
-      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+      this.mergedConfig = deepMerge(
+        deepClone(defaultConfig, true),
+        config || {}
+      )
     },
-    setRingOption () {
+    setRingOption() {
       const { getRingOption, chart, ringAnimation } = this
 
       const option = getRingOption()
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       ringAnimation()
     },
-    getRingOption () {
+    getRingOption() {
       const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -200,7 +234,7 @@ export default {
         color: mergedConfig.color
       }
     },
-    getRealRadius (active = false) {
+    getRealRadius(active = false) {
       const { mergedConfig, chart } = this
 
       const { radius, activeRadius, lineWidth } = mergedConfig
@@ -211,14 +245,15 @@ export default {
 
       let realRadius = active ? activeRadius : radius
 
-      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+      if (typeof realRadius !== 'number')
+        realRadius = (parseInt(realRadius) / 100) * maxRadius
 
       const insideRadius = realRadius - halfLineWidth
       const outSideRadius = realRadius + halfLineWidth
 
       return [insideRadius, outSideRadius]
     },
-    ringAnimation () {
+    ringAnimation() {
       let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
@@ -236,7 +271,7 @@ export default {
         }
       })
 
-      chart.setOption(option)
+      chart.setOption(option, true)
 
       const { activeTimeGap } = option.series[0]
 
@@ -251,12 +286,12 @@ export default {
       }, activeTimeGap)
     }
   },
-  mounted () {
+  mounted() {
     const { init } = this
 
     init()
   },
-  beforeDestroy () {
+  beforeDestroy() {
     const { animationHandler } = this
 
     clearTimeout(animationHandler)

src/components/borderBox1/src/main.vue

@@ -1,5 +1,16 @@
 <template>
-  <div class="dv-border-box-1">
+  <div class="dv-border-box-1" :ref="ref">
+    <svg class="border" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${height - 27} 13, ${height - 24} 13, ${height - 21} 24, ${height - 11}
+      38, ${height - 11} 41, ${height - 8} 73, ${height - 8} 75, ${height - 10} 81, ${height - 10}
+      85, ${height - 6} ${width - 85}, ${height - 6} ${width - 81}, ${height - 10} ${width - 75}, ${height - 10}
+      ${width - 73}, ${height - 8} ${width - 41}, ${height - 8} ${width - 38}, ${height - 11}
+      ${width - 24}, ${height - 11} ${width - 13}, ${height - 21} ${width - 13}, ${height - 24}
+      ${width - 10}, ${height - 27} ${width - 10}, 27 ${width - 13}, 25 ${width - 13}, 21
+      ${width - 24}, 11 ${width - 38}, 11 ${width - 41}, 8 ${width - 73}, 8 ${width - 75}, 10
+      ${width - 81}, 10 ${width - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`" />
+    </svg>
+
     <svg
       width="150px"
       height="150px"
@@ -8,36 +19,36 @@
       :class="`${item} border`"
     >
       <polygon
-        fill="#4fd2dd"
+        :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="#4fd2dd;#235fa7;#4fd2dd"
+          :values="`${mergedColor[0]};${mergedColor[1]};${mergedColor[0]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#235fa7"
+        :fill="mergedColor[1]"
         points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
       >
         <animate
           attributeName="fill"
-          values="#235fa7;#4fd2dd;#235fa7"
+          :values="`${mergedColor[1]};${mergedColor[0]};${mergedColor[1]}`"
           dur="0.5s"
           begin="0s"
           repeatCount="indefinite"
         />
       </polygon>
       <polygon
-        fill="#4fd2dd"
+        :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="#4fd2dd;#235fa7;transparent"
+          :values="`${mergedColor[0]};${mergedColor[1]};transparent`"
           dur="1s"
           begin="0s"
           repeatCount="indefinite"
@@ -52,12 +63,54 @@
 </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 {
-      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+      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>

src/components/borderBox10/index.js

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

src/components/borderBox10/src/main.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="dv-border-box-10" :ref="ref" :style="`box-shadow: inset 0 0 25px 3px ${mergedColor[0]}`">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polygon :fill="backgroundColor" :points="`
+        4, 0 ${width - 4}, 0 ${width}, 4 ${width}, ${height - 4} ${width - 4}, ${height}
+        4, ${height} 0, ${height - 4} 0, 4
+      `" />
+    </svg>
+
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} dv-border-svg-container`"
+    >
+      <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>
+
+<style lang="less">
+.dv-border-box-10 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+
+  .dv-border-svg-container {
+    position: absolute;
+    display: block;
+  }
+
+  .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>

src/components/borderBox11/index.js

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

src/components/borderBox11/src/main.vue

@@ -0,0 +1,307 @@
+<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 { uuid } from '../../../util/index'
+
+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 id = uuid()
+    return {
+      ref: 'border-box-11',
+      filterId: `border-box-11-filterId-${id}`,
+
+      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>
+
+<style lang="less">
+.dv-border-box-11 {
+  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;
+    }
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/components/borderBox12/index.js

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

src/components/borderBox12/src/main.vue

@@ -0,0 +1,170 @@
+<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 { uuid } from '../../../util/index'
+
+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 id = uuid()
+    return {
+      ref: 'border-box-12',
+      filterId: `borderr-box-12-filterId-${id}`,
+
+      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>
+
+<style lang="less">
+.dv-border-box-12 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .dv-border-svg-container {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    left: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>