update version to 2.4.1

Bug Fixes: Enhance the animation compatibility of borderbox1 and fix spelling errors

.gitignore

@@ -1,9 +1,6 @@
 .DS_Store
 node_modules
-/lib
-/dist
-/.svn
-/DataV
+package-lock.json
 
 # local env files
 .env.local

.npmignore

@@ -1,7 +0,0 @@
-src/
-publish/
-
-package-lock.json
-
-prepublish.js
-publish.js

CHANGELOG.md

@@ -1,3 +1,63 @@
+# 2.4.1-alpha (2019-08-29)
+
+### Perfect
+
+- **capsuleChart:** Adaptive display unit.
+
+# 2.4.0-alpha (2019-08-29)
+
+### New
+
+- **borderBox10**
+- **capsuleChart**
+
+# 2.3.9-alpha (2019-08-27)
+
+### Perfect
+
+- **percentPond:** Compatibility enhancement. 
+
+# 2.3.8-alpha (2019-08-27)
+
+### Bug Fixes
+
+- **percentPond:** Style compatibility and gradient exceptions. 
+
+# 2.3.7-alpha (2019-08-26)
+
+### Bug Fixes
+
+- **borderBox1:** Parent container setting `text-align: center` to cause display exception [(#6)](https://github.com/jiaming743/DataV/issues/6). 
+
+# 2.3.6-alpha (2019-08-24)
+
+### Bug Fixes
+
+- **borderBox1:** Animation exception caused by incompatible syntax and spelling mistake [(#4)](https://github.com/jiaming743/DataV/issues/4)[(#5)](https://github.com/jiaming743/DataV/pull/5). 
+
+### Perfect
+
+- **svg:** Svg animation compatibility enhancement.
+
+# 2.3.5-alpha (2019-08-22)
+
+### Bug Fixes
+
+- **activeRingChart:** Color configuration does not take effect [(#3)](https://github.com/jiaming743/DataV/pull/3). 
+
+# 2.3.4-alpha (2019-08-15)
+
+### Bug Fixes
+
+- **package.json:** Import exception caused by incorrect entry path configuration.
+
+# 2.3.3-alpha (2019-07-22)
+
+### Bug Fixes
+
+- **waterPondLevel:** Potential namespace conflict.
+- **digitalFlop:** Potential namespace conflict.
+
 # 2.3.2-alpha (2019-07-05)
 
 ### Perfect
@@ -6,7 +66,7 @@
 - **Introduced on demand**
 
   ```js
-  import borderBox1 from '@jiaminghi/data-view'
+  import { borderBox1 } from '@jiaminghi/data-view'
 
   Vue.use(borderBox1)
   ```

README.md

@@ -1,30 +1,29 @@
-[中文](./README_CN.md)
+[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" />
     </a>
-    <a href="https://www.npmjs.com/package/@jiaminghi/datav">
+    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
       <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
     </a>
 </p>
 
-## What is DataV?
+## DataV是干什么的?
 
-* DataV is a data **visualization** components library based on **Vue**.
-* Provide cool **SVG** borders and decorations.
-* Provide common **charts** such as line chart, etc..
-* flying line chart, carousel table and etc.
+* DataV是一个基于**Vue**的数据可视化组件库.
+* 提供用于提升页面视觉效果的**SVG**边框和装饰.
+* 提供常用的**图表**如折线图等.
+* 飞线图/轮播表等其他组件.
 
-### Install with npm
+### npm安装
 
 ```shell
 $ npm install @jiaminghi/data-view
 ```
 
-### use
+### 使用
 
 ```js
 import Vue from 'vue'
@@ -32,9 +31,21 @@ import DataV from '@jiaminghi/data-view'
 
 Vue.use(DataV)
 
-// Introduced on demand
+// 按需引入
 import { borderBox1 } from '@jiaminghi/data-view'
 Vue.use(borderBox1)
 ```
 
-Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).
+
+### 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)

README_CN.md

@@ -1,40 +0,0 @@
-[ENGLISH](./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" />
-    </a>
-    <a href="https://www.npmjs.com/package/@jiaminghi/datav">
-      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
-    </a>
-</p>
-
-## DataV是干什么的?
-
-* DataV是一个基于**Vue**的数据可视化组件库.
-* 提供用于提升页面视觉效果的**SVG**边框和装饰.
-* 提供常用的**图表**如折线图等.
-* 飞线图/轮播表等其他组件.
-
-### npm安装
-
-```shell
-$ npm install @jiaminghi/data-view
-```
-
-### 使用
-
-```js
-import Vue from 'vue'
-import DataV from '@jiaminghi/data-view'
-
-Vue.use(DataV)
-
-// 按需引入
-import { borderBox1 } from '@jiaminghi/data-view'
-Vue.use(borderBox1)
-```
-
-详细文档及示例请移步[HomePage](http://datav.jiaminghi.com).

README_EN.md

@@ -0,0 +1,52 @@
+[中文](./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" />
+    </a>
+    <a href="https://www.npmjs.com/package/@jiaminghi/data-view">
+      <img src="https://img.shields.io/npm/v/@jiaminghi/data-view.svg" alt="LICENSE" />
+    </a>
+</p>
+
+## What is DataV?
+
+* DataV is a data **visualization** components library based on **Vue**.
+* Provide cool **SVG** borders and decorations.
+* Provide common **charts** such as line chart, etc..
+* flying line chart, carousel table and etc.
+
+### Install with npm
+
+```shell
+$ npm install @jiaminghi/data-view
+```
+
+### use
+
+```js
+import Vue from 'vue'
+import DataV from '@jiaminghi/data-view'
+
+Vue.use(DataV)
+
+// Introduced on demand
+import { borderBox1 } from '@jiaminghi/data-view'
+Vue.use(borderBox1)
+```
+
+Detailed documents and examples can be viewed on the [HomePage](http://datav.jiaminghi.com).
+
+### 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)

lib/components/activeRingChart/index.js

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

lib/components/activeRingChart/src/main.css

@@ -0,0 +1,32 @@
+.dv-active-ring-chart {
+  position: relative;
+}
+.dv-active-ring-chart .active-ring-chart-container {
+  width: 100%;
+  height: 100%;
+}
+.dv-active-ring-chart .active-ring-info {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dv-active-ring-chart .active-ring-info .dv-digital-flop {
+  width: 100px;
+  height: 30px;
+}
+.dv-active-ring-chart .active-ring-info .active-ring-name {
+  width: 100px;
+  height: 30px;
+  color: #fff;
+  text-align: center;
+  vertical-align: middle;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}

lib/components/activeRingChart/src/main.vue

@@ -0,0 +1,265 @@
+<template>
+  <div class="dv-active-ring-chart">
+    <div class="active-ring-chart-container" ref="active-ring-chart" />
+    <div class="active-ring-info">
+      <dv-digital-flop :config="digitalFlop" />
+      <div class="active-ring-name" :style="fontSize">{{ ringName }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Charts from '@jiaminghi/charts'
+
+import dvDigitalFlop from '../../digitalFlop/src/main'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvActiveRingChart',
+  components: {
+    dvDigitalFlop
+  },
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      defaultConfig: {
+        /**
+         * @description Ring radius
+         * @type {String|Number}
+         * @default radius = '50%'
+         * @example radius = '50%' | 100
+         */
+        radius: '50%',
+        /**
+         * @description Active ring radius
+         * @type {String|Number}
+         * @default activeRadius = '55%'
+         * @example activeRadius = '55%' | 110
+         */
+        activeRadius: '55%',
+        /**
+         * @description Ring data
+         * @type {Array<Object>}
+         * @default data = [{ name: '', value: 0 }]
+         */
+        data: [{ name: '', value: 0 }],
+        /**
+         * @description Ring line width
+         * @type {Number}
+         * @default lineWidth = 20
+         */
+        lineWidth: 20,
+        /**
+         * @description Active time gap (ms)
+         * @type {Number}
+         * @default activeTimeGap = 3000
+         */
+        activeTimeGap: 3000,
+        /**
+         * @description Ring color (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @default color = [Charts Default Color]
+         * @example color = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        color: [],
+        /**
+         * @description Digital flop style
+         * @type {Object}
+         */
+        digitalFlopStyle: {
+          fontSize: 25,
+          fill: '#fff'
+        },
+        /**
+         * @description CRender animationCurve
+         * @type {String}
+         * @default animationCurve = 'easeOutCubic'
+         */
+        animationCurve: 'easeOutCubic',
+        /**
+         * @description CRender animationFrame
+         * @type {String}
+         * @default animationFrame = 50
+         */
+        animationFrame: 50
+      },
+
+      mergedConfig: null,
+
+      chart: null,
+
+      activeIndex: 0,
+
+      animationHandler: ''
+    }
+  },
+  computed: {
+    digitalFlop () {
+      const { mergedConfig, activeIndex } = this
+
+      if (!mergedConfig) return {}
+
+      const { digitalFlopStyle, data } = mergedConfig
+
+      const value = data.map(({ value }) => value)
+
+      const sum = value.reduce((all, v) => all + v, 0)
+
+      const percent = parseInt(value[activeIndex] / sum * 100)
+
+      return {
+        content: '{nt}%',
+        number: [percent],
+        style: digitalFlopStyle
+      }
+    },
+    ringName () {
+      const { mergedConfig, activeIndex } = this
+
+      if (!mergedConfig) return ''
+
+      return mergedConfig.data[activeIndex].name
+    },
+    fontSize () {
+      const { mergedConfig } = this
+
+      if (!mergedConfig) return ''
+
+      return `font-size: ${mergedConfig.digitalFlopStyle.fontSize}px;`
+    }
+  },
+  watch: {
+    config () {
+      const { animationHandler, mergeConfig, setRingOption } = this
+
+      clearTimeout(animationHandler)
+
+      this.activeIndex = 0
+
+      mergeConfig()
+
+      setRingOption()
+    }
+  },
+  methods: {
+    init () {
+      const { initChart, mergeConfig, setRingOption } = this
+
+      initChart()
+
+      mergeConfig()
+
+      setRingOption()
+    },
+    initChart () {
+      const { $refs } = this
+
+      this.chart = new Charts($refs['active-ring-chart'])
+    },
+    mergeConfig () {
+      const { defaultConfig, config } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    setRingOption () {
+      const { getRingOption, chart, ringAnimation } = this
+
+      const option = getRingOption()
+
+      chart.setOption(option)
+
+      ringAnimation()
+    },
+    getRingOption () {
+      const { mergedConfig, getRealRadius } = this
+
+      const radius = getRealRadius()
+
+      mergedConfig.data.forEach(dataItem => {
+        dataItem.radius = radius
+      })
+
+      return {
+        series: [
+          {
+            type: 'pie',
+            ...mergedConfig,
+            outsideLabel: {
+              show: false
+            }
+          }
+        ],
+        color: mergedConfig.color
+      }
+    },
+    getRealRadius (active = false) {
+      const { mergedConfig, chart } = this
+
+      const { radius, activeRadius, lineWidth } = mergedConfig
+
+      const maxRadius = Math.min(...chart.render.area) / 2
+
+      const halfLineWidth = lineWidth / 2
+
+      let realRadius = active ? activeRadius : radius
+
+      if (typeof realRadius !== 'number') realRadius = parseInt(realRadius) / 100 * maxRadius
+
+      const insideRadius = realRadius - halfLineWidth
+      const outSideRadius = realRadius + halfLineWidth
+
+      return [insideRadius, outSideRadius]
+    },
+    ringAnimation () {
+      let { activeIndex, getRingOption, chart, getRealRadius } = this
+
+      const radius = getRealRadius()
+      const active = getRealRadius(true)
+
+      const option = getRingOption()
+
+      const { data } = option.series[0]
+
+      data.forEach((dataItem, i) => {
+        if (i === activeIndex) {
+          dataItem.radius = active
+        } else {
+          dataItem.radius = radius
+        }
+      })
+
+      chart.setOption(option)
+
+      const { activeTimeGap } = option.series[0]
+
+      this.animationHandler = setTimeout(foo => {
+        activeIndex += 1
+
+        if (activeIndex >= data.length) activeIndex = 0
+
+        this.activeIndex = activeIndex
+
+        this.ringAnimation()
+      }, activeTimeGap)
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  },
+  beforeDestroy () {
+    const { animationHandler } = this
+
+    clearTimeout(animationHandler)
+  }
+}
+</script>

lib/components/borderBox1/index.js

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

lib/components/borderBox1/src/main.css

@@ -0,0 +1,27 @@
+.dv-border-box-1 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-1 .border {
+  position: absolute;
+  display: block;
+}
+.dv-border-box-1 .right-top {
+  right: 0px;
+  transform: rotateY(180deg);
+}
+.dv-border-box-1 .left-bottom {
+  bottom: 0px;
+  transform: rotateX(180deg);
+}
+.dv-border-box-1 .right-bottom {
+  right: 0px;
+  bottom: 0px;
+  transform: rotateX(180deg) rotateY(180deg);
+}
+.dv-border-box-1 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox1/src/main.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="dv-border-box-1">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        fill="#4fd2dd"
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+      >
+        <animate
+          attributeName="fill"
+          values="#4fd2dd;#235fa7;#4fd2dd"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        fill="#235fa7"
+        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
+      >
+        <animate
+          attributeName="fill"
+          values="#235fa7;#4fd2dd;#235fa7"
+          dur="0.5s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        fill="#4fd2dd"
+        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+      >
+        <animate
+          attributeName="fill"
+          values="#4fd2dd;#235fa7;transparent"
+          dur="1s"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvBorderBox1',
+  data () {
+    return {
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+    }
+  }
+}
+</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,29 @@
+.dv-border-box-10 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  box-shadow: inset 0 0 25px 3px #1d48c4;
+  border-radius: 6px;
+}
+.dv-border-box-10 .border {
+  position: absolute;
+  display: block;
+}
+.dv-border-box-10 .right-top {
+  right: 0px;
+  transform: rotateY(180deg);
+}
+.dv-border-box-10 .left-bottom {
+  bottom: 0px;
+  transform: rotateX(180deg);
+}
+.dv-border-box-10 .right-bottom {
+  right: 0px;
+  bottom: 0px;
+  transform: rotateX(180deg) rotateY(180deg);
+}
+.dv-border-box-10 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox10/src/main.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="dv-border-box-10">
+    <svg
+      width="150px"
+      height="150px"
+      :key="item"
+      v-for="item in border"
+      :class="`${item} border`"
+    >
+      <polygon
+        fill="#d3e1f8"
+        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>
+export default {
+  name: 'DvBorderBox10',
+  data () {
+    return {
+      border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+    }
+  }
+}
+</script>

lib/components/borderBox2/index.js

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

lib/components/borderBox2/src/main.css

@@ -0,0 +1,30 @@
+.dv-border-box-2 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-2 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-2 .dv-border-svg-container polyline {
+  fill: none;
+  stroke-width: 1;
+}
+.dv-border-box-2 .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%;
+  height: 100%;
+}

lib/components/borderBox2/src/main.vue

@@ -0,0 +1,32 @@
+<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" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox2',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-2'
+    }
+  }
+}
+</script>

lib/components/borderBox3/index.js

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

lib/components/borderBox3/src/main.css

@@ -0,0 +1,27 @@
+.dv-border-box-3 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-3 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-3 .dv-border-svg-container polyline {
+  fill: none;
+  stroke: #2862b7;
+}
+.dv-border-box-3 .dv-bb3-line1 {
+  stroke-width: 3;
+}
+.dv-border-box-3 .dv-bb3-line2 {
+  stroke-width: 1;
+}
+.dv-border-box-3 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox3/src/main.vue

@@ -0,0 +1,32 @@
+<template>
+  <div class="dv-border-box-3" :ref="ref">
+    <svg class="dv-border-svg-container" :width="width" :height="height">
+      <polyline class="dv-bb3-line1"
+        :points="`4, 4 ${width - 22} ,4 ${width - 22}, ${height - 22} 4, ${height - 22} 4, 4`" />
+      <polyline class="dv-bb3-line2"
+        :points="`10, 10 ${width - 16}, 10 ${width - 16}, ${height - 16} 10, ${height - 16} 10, 10`" />
+      <polyline class="dv-bb3-line2"
+        :points="`16, 16 ${width - 10}, 16 ${width - 10}, ${height - 10} 16, ${height - 10} 16, 16`" />
+      <polyline class="dv-bb3-line2"
+        :points="`22, 22 ${width - 4}, 22 ${width - 4}, ${height - 4} 22, ${height - 4} 22, 22`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox3',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-3'
+    }
+  }
+}
+</script>

lib/components/borderBox4/index.js

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

lib/components/borderBox4/src/main.css

@@ -0,0 +1,82 @@
+.dv-border-box-4 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-4 .dv-reverse {
+  transform: rotate(180deg);
+}
+.dv-border-box-4 .dv-border-svg-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0px;
+  left: 0px;
+}
+.dv-border-box-4 .dv-border-svg-container polyline {
+  fill: none;
+}
+.dv-border-box-4 .sred {
+  stroke: red;
+}
+.dv-border-box-4 .sblue {
+  stroke: rgba(0, 0, 255, 0.8);
+}
+.dv-border-box-4 .sw1 {
+  stroke-width: 1;
+}
+.dv-border-box-4 .sw3 {
+  stroke-width: 3px;
+  stroke-linecap: round;
+}
+.dv-border-box-4 .dv-bb4-line-1 {
+  stroke: 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;
+}
+.dv-border-box-4 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox4/src/main.vue

@@ -0,0 +1,42 @@
+<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`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox4',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-4'
+    }
+  },
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

lib/components/borderBox5/index.js

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

lib/components/borderBox5/src/main.css

@@ -0,0 +1,40 @@
+.dv-border-box-5 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-5 .dv-reverse {
+  transform: rotate(180deg);
+}
+.dv-border-box-5 .dv-svg-container {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-5 .dv-svg-container polyline {
+  fill: none;
+}
+.dv-border-box-5 .dv-bb5-line-1 {
+  stroke-width: 1;
+  stroke: rgba(255, 255, 255, 0.35);
+}
+.dv-border-box-5 .dv-bb5-line-2 {
+  stroke: rgba(255, 255, 255, 0.2);
+}
+.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;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox5/src/main.vue

@@ -0,0 +1,38 @@
+<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>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox5',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-5'
+    }
+  },
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>

lib/components/borderBox6/index.js

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

lib/components/borderBox6/src/main.css

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

lib/components/borderBox6/src/main.vue

@@ -0,0 +1,40 @@
+<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>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize.js'
+
+export default {
+  name: 'DvBorderBox6',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-6'
+    }
+  }
+}
+</script>

lib/components/borderBox7/index.js

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

lib/components/borderBox7/src/main.css

@@ -0,0 +1,31 @@
+.dv-border-box-7 {
+  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 {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-7 .dv-svg-container polyline {
+  fill: none;
+  stroke-linecap: round;
+}
+.dv-border-box-7 .dv-bb7-line-width-2 {
+  stroke: 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 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox7/src/main.vue

@@ -0,0 +1,33 @@
+<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}`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox7',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-7'
+    }
+  }
+}
+</script>

lib/components/borderBox8/index.js

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

lib/components/borderBox8/src/main.css

@@ -0,0 +1,17 @@
+.dv-border-box-8 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-8 svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+.dv-border-box-8 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox8/src/main.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="dv-border-box-8" :ref="ref">
+    <svg class="dv-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`"
+          fill="transparent"
+        />
+        <radialGradient
+          :id="gradient"
+          cx="50%" cy="50%" r="50%"
+        >
+          <stop
+            offset="0%" stop-color="#fff"
+            stop-opacity="1"
+          />
+          <stop
+            offset="100%" stop-color="#fff"
+            stop-opacity="0"
+          />
+        </radialGradient>
+
+        <mask :id="mask">
+          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+            <animateMotion
+              dur="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`"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+      </defs>
+
+      <use
+        stroke="#235fa7"
+        stroke-width="1"
+        :xlink:href="`#${path}`"
+      />
+
+      <use
+        stroke="#4fd2dd"
+        stroke-width="3"
+        :xlink:href="`#${path}`"
+        :mask="`url(#${mask})`"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          :from="`0, ${length}`"
+          :to="`${length}, 0`"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox8',
+  mixins: [autoResize],
+  data () {
+    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()}`
+    }
+  },
+  computed: {
+    length () {
+      const { width, height } = this
+
+      return (width + height - 5) * 2
+    }
+  }
+}
+</script>

lib/components/borderBox9/index.js

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

lib/components/borderBox9/src/main.css

@@ -0,0 +1,17 @@
+.dv-border-box-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-border-box-9 svg {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0px;
+  top: 0px;
+}
+.dv-border-box-9 .border-box-content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}

lib/components/borderBox9/src/main.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="dv-border-box-9" :ref="ref">
+    <svg class="dv-svg-container" :width="width" :height="height">
+      <defs>
+        <linearGradient :id="gradientId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <stop offset="0%" stop-color="#11eefd" />
+          <stop offset="100%" stop-color="#0078d2" />
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.4} 8, 3, ${width * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="
+              `8, ${height * 0.15} 8, 3, ${width * 0.1 + 7}, 3
+              ${width * 0.1}, 8 14, 8 14, ${height * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.5}, 3 ${width - 3}, 3, ${width - 3}, ${height * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.52}, 3 ${width * 0.58}, 3
+              ${width * 0.58 - 7}, 9 ${width * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.9}, 3 ${width - 3}, 3 ${width - 3}, ${height * 0.1}
+              ${width - 9}, ${height * 0.1 - 7} ${width - 9}, 9 ${width * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${height * 0.5} 8, ${height - 3} ${width * 0.3 + 7}, ${height - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${height * 0.55} 8, ${height * 0.7}
+              2, ${height * 0.7 - 7} 2, ${height * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${width * 0.35}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.35}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${width * 0.92}, ${height - 3} ${width - 3}, ${height - 3} ${width - 3}, ${height * 0.8}
+              ${width - 9}, ${height * 0.8 + 7} ${width - 9}, ${height - 9} ${width * 0.92 + 7}, ${height - 9}
+            `"
+          />
+        </mask>
+      </defs>
+
+      <rect x="0" y="0" :width="width" :height="height" :fill="`url(#${gradientId})`" :mask="`url(#${maskId})`" />
+    </svg>
+
+    <div class="border-box-content">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvBorderBox9',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'border-box-9',
+
+      gradientId: `border-box-9-gradient-${(new Date()).getTime()}`,
+      maskId: `border-box-9-mask-${(new Date()).getTime()}`
+    }
+  }
+}
+</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,55 @@
+.capsule-chart {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  box-sizing: border-box;
+  padding: 10px;
+  color: #fff;
+}
+.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;
+}
+.capsule-chart .label-column div {
+  height: 20px;
+  line-height: 20px;
+}
+.capsule-chart .capsule-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.capsule-chart .capsule-item {
+  box-shadow: 0 0 3px #999;
+  height: 10px;
+  margin: 5px 0px;
+  border-radius: 5px;
+}
+.capsule-chart .capsule-item div {
+  height: 8px;
+  margin-top: 1px;
+  border-radius: 5px;
+  transition: all 0.3s;
+}
+.capsule-chart .unit-label {
+  display: flex;
+  flex-direction: row;
+  line-height: 20px;
+  font-size: 12px;
+}
+.capsule-chart .unit-text {
+  width: 30px;
+  text-align: right;
+}
+.capsule-chart .unit-container {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}

lib/components/capsuleChart/src/main.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="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"
+          :style="`width: calc(100% - ${mergedConfig.unit ? 30 : 0}px)`"
+        >
+          <div :style="`width: ${capsule * 100}%; background-color: ${mergedConfig.colors[index % mergedConfig.colors.length]};`"></div>
+        </div>
+
+        <div class="unit-label">
+          <div class="unit-container">
+            <div v-for="(label, index) in labelData" :key="label + index">{{ label }}</div>
+          </div>
+          <div class="unit-text" v-if="mergedConfig.unit">{{ mergedConfig.unit }}</div>
+        </div>
+      </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: ''
+      },
+
+      mergedConfig: null,
+
+      capsuleLength: [],
+      labelData: []
+    }
+  },
+  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.capsuleLength = capsuleValue.map(v => maxValue ? v / maxValue : 0)
+
+      const oneFifth = maxValue / 5
+
+      this.labelData = new Array(6).fill(0).map((v, i) => Math.ceil(i * oneFifth))
+    }
+  },
+  mounted () {
+    const { calcData } = this
+
+    calcData()
+  }
+}
+</script>

lib/components/charts/index.js

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

lib/components/charts/src/main.css

@@ -0,0 +1,9 @@
+.dv-charts-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.dv-charts-container .charts-canvas-container {
+  width: 100%;
+  height: 100%;
+}

lib/components/charts/src/main.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="dv-charts-container" :ref="ref">
+    <div class="charts-canvas-container" :ref="chartRef" />
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import Charts from '@jiaminghi/charts'
+
+export default {
+  name: 'DvCharts',
+  mixins: [autoResize],
+  props: {
+    option: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      ref: `charts-container-${(new Date()).getTime()}`,
+      chartRef: `chart-${(new Date()).getTime()}`,
+
+      chart: null
+    }
+  },
+  watch: {
+    option () {
+      let { chart, option } = this
+
+      if (!chart) return
+
+      if (!option) option = {}
+
+      chart.setOption(option)
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { initChart } = this
+
+      initChart()
+    },
+    initChart () {
+      const { $refs, chartRef, option } = this
+
+      const chart = this.chart = new Charts($refs[chartRef])
+
+      if (!option) return
+
+      chart.setOption(option)
+    },
+    onResize () {
+      const { chart } = this
+
+      if (!chart) return
+
+      chart.resize()
+    }
+  }
+}
+</script>

lib/components/conicalColumnChart/index.js

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

lib/components/conicalColumnChart/src/main.css

@@ -0,0 +1,7 @@
+.dv-conical-column-chart {
+  width: 100%;
+  height: 100%;
+}
+.dv-conical-column-chart text {
+  text-anchor: middle;
+}

lib/components/conicalColumnChart/src/main.vue

@@ -0,0 +1,208 @@
+<template>
+  <div class="dv-conical-column-chart" :ref="ref">
+    <svg :width="width" :height="height">
+      <g
+        v-for="(item, i) in column"
+        :key="i"
+      >
+        <path
+          :d="item.d"
+          :fill="mergedConfig.columnColor"
+        />
+        <text
+          :style="`fontSize:${mergedConfig.fontSize}px`"
+          :fill="mergedConfig.textColor"
+          :x="item.x"
+          :y="height - 4"
+        >
+          {{ item.name }}
+        </text>
+        <image
+          v-if="mergedConfig.img.length"
+          :xlink:href="mergedConfig.img[i % mergedConfig.img.length]"
+          :width="mergedConfig.imgSideLength"
+          :height="mergedConfig.imgSideLength"
+          :x="item.x - mergedConfig.imgSideLength / 2"
+          :y="item.y - mergedConfig.imgSideLength"
+        />
+        <text
+          v-if="mergedConfig.showValue"
+          :style="`fontSize:${mergedConfig.fontSize}px`"
+          :fill="mergedConfig.textColor"
+          :x="item.x"
+          :y="item.textY"
+        >
+          {{ item.value }}
+        </text>
+      </g>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvConicalColumnChart',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      ref: 'conical-column-chart',
+
+      defaultConfig: {
+        /**
+         * @description Chart data
+         * @type {Array<Object>}
+         * @default data = []
+         */
+        data: [],
+        /**
+         * @description Chart img
+         * @type {Array<String>}
+         * @default img = []
+         */
+        img: [],
+        /**
+         * @description Chart font size
+         * @type {Number}
+         * @default fontSize = 12
+         */
+        fontSize: 12,
+        /**
+         * @description Img side length
+         * @type {Number}
+         * @default imgSideLength = 30
+         */
+        imgSideLength: 30,
+        /**
+         * @description Column color
+         * @type {String}
+         * @default columnColor = 'rgba(0, 194, 255, 0.4)'
+         */
+        columnColor: 'rgba(0, 194, 255, 0.4)',
+        /**
+         * @description Text color
+         * @type {String}
+         * @default textColor = '#fff'
+         */
+        textColor: '#fff',
+        /**
+         * @description Show value
+         * @type {Boolean}
+         * @default showValue = false
+         */
+        showValue: false
+      },
+
+      mergedConfig: null,
+
+      column: []
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { calcData } = this
+
+      calcData()
+    },
+    calcData () {
+      const { mergeConfig, initData, calcSVGPath } = this
+
+      mergeConfig()
+
+      initData()
+
+      calcSVGPath()
+    },
+    mergeConfig () {
+      const { defaultConfig, config } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    initData () {
+      const { mergedConfig } = this
+      let { data } = mergedConfig
+
+      data = deepClone(data, true)
+
+      data.sort(({ value: a }, { value: b }) => {
+        if (a > b) return -1
+        if (a < b) return 1
+        if (a === b) return 0
+      })
+
+      const max = data[0] ? data[0].value : 10
+
+      data = data.map(item => ({
+        ...item,
+        percent: item.value / max
+      }))
+
+      mergedConfig.data = data
+    },
+    calcSVGPath () {
+      const { mergedConfig, width, height } = this
+
+      const { imgSideLength, fontSize, data } = mergedConfig
+
+      const itemNum = data.length
+      const gap = width / (itemNum + 1)
+
+      const useAbleHeight = height - imgSideLength - fontSize - 5
+      const svgBottom = height - fontSize - 5
+
+      this.column = data.map((item, i) => {
+        const { percent } = item
+
+        const middleXPos = gap * (i + 1)
+        const leftXPos = gap * i
+        const rightXpos = gap * (i + 2)
+
+        const middleYPos = svgBottom - useAbleHeight * percent
+        const controlYPos = useAbleHeight * percent * 0.6 + middleYPos
+
+        const d = `
+          M${leftXPos}, ${svgBottom}
+          Q${middleXPos}, ${controlYPos} ${middleXPos},${middleYPos}
+          M${middleXPos},${middleYPos}
+          Q${middleXPos}, ${controlYPos} ${rightXpos},${svgBottom}
+          L${leftXPos}, ${svgBottom}
+          Z
+        `
+
+        const textY = (svgBottom + middleYPos) / 2 + fontSize / 2
+
+        return {
+          ...item,
+          d,
+          x: middleXPos,
+          y: middleYPos,
+          textY
+        }
+      })
+    }
+  }
+}
+</script>

lib/components/decoration1/index.js

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

lib/components/decoration1/src/main.css

@@ -0,0 +1,7 @@
+.dv-decoration-1 {
+  width: 100%;
+  height: 100%;
+}
+.dv-decoration-1 svg {
+  transform-origin: left top;
+}

lib/components/decoration1/src/main.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="dv-decoration-1" :ref="ref">
+    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+
+      <template
+        v-for="(point, i) in points"
+      >
+        <rect
+          v-if="Math.random() > 0.6"
+          :key="i"
+          fill="#fff"
+          :x="point[0] - halfPointSideLength"
+          :y="point[1] - halfPointSideLength"
+          :width="pointSideLength"
+          :height="pointSideLength"
+        >
+          <animate
+            v-if="Math.random() > 0.6"
+            attributeName="fill"
+            values="#fff;transparent"
+            dur="1s"
+            :begin="Math.random() * 2"
+            repeatCount="indefinite"
+          />
+        </rect>
+      </template>
+
+      <rect
+        v-if="rects[0]"
+        fill="#0de7c2"
+        :x="rects[0][0] - pointSideLength"
+        :y="rects[0][1] - pointSideLength"
+        :width="pointSideLength * 2"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="height"
+          :values="`0;${pointSideLength * 2}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[0][0]};${rects[0][0] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="y"
+          :values="`${rects[0][1]};${rects[0][1] - pointSideLength}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+
+      <rect
+        v-if="rects[1]"
+        fill="#0de7c2"
+        :x="rects[1][0] - 40"
+        :y="rects[1][1] - pointSideLength"
+        :width="40"
+        :height="pointSideLength * 2"
+      >
+        <animate
+          attributeName="width"
+          values="0;40;0"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="x"
+          :values="`${rects[1][0]};${rects[1][0] - 40};${rects[1][0]}`"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration1',
+  mixins: [autoResize],
+  data () {
+    const pointSideLength = 2.5
+
+    return {
+      ref: 'decoration-1',
+
+      svgWH: [200, 50],
+
+      svgScale: [1, 1],
+
+      rowNum: 4,
+      rowPoints: 20,
+
+      pointSideLength,
+      halfPointSideLength: pointSideLength / 2,
+
+      points: [],
+
+      rects: []
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcRectsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcRectsPosition()
+
+      calcScale()
+    },
+    calcPointsPosition () {
+      const { svgWH, rowNum, rowPoints } = this
+
+      const [w, h] = svgWH
+
+      const horizontalGap = w / (rowPoints + 1)
+      const verticalGap = h / (rowNum + 1)
+
+      let points = new Array(rowNum).fill(0).map((foo, i) =>
+        new Array(rowPoints).fill(0).map((foo, j) => [
+          horizontalGap * (j + 1), verticalGap * (i + 1)
+        ]))
+
+      this.points = points.reduce((all, item) => [...all, ...item], [])
+    },
+    calcRectsPosition () {
+      const { points, rowPoints } = this
+
+      const rect1 = points[rowPoints * 2 - 1]
+      const rect2 = points[rowPoints * 2 - 3]
+
+      this.rects = [rect1, rect2]
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  }
+}
+</script>

lib/components/decoration10/index.js

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

lib/components/decoration10/src/main.css

@@ -0,0 +1,5 @@
+.dv-decoration-10 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}

lib/components/decoration10/src/main.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="dv-decoration-10" :ref="ref">
+    <svg :width="width" :height="height">
+      <polyline
+        stroke="rgba(0, 194, 255, 0.3)"
+        stroke-width="2"
+        :points="`0, ${height / 2} ${width}, ${height / 2}`"
+      />
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`5, ${height / 2} ${width * 0.2 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+        fill="freeze"
+      >
+        <animate
+          :id="animationId2"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0;`"
+          dur="3s"
+          :begin="`${animationId1}.end`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.2}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`${width * 0.2 + 3}, ${height / 2} ${width * 0.8 - 3}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.6}`"
+      >
+        <animate
+          :id="animationId4"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.6};${width * 0.6}, 0`"
+          dur="3s"
+          :begin="`${animationId3}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.6}, 0;0, ${width * 0.6}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        stroke="rgba(0, 194, 255, 1)"
+        stroke-width="2"
+        :points="`${width * 0.8 + 3}, ${height / 2} ${width - 5}, ${height / 2}`"
+        :stroke-dasharray="`0, ${width * 0.2}`"
+      >
+        <animate
+          :id="animationId6"
+          attributeName="stroke-dasharray"
+          :values="`0, ${width * 0.2};${width * 0.2}, 0`"
+          dur="3s"
+          :begin="`${animationId5}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${width * 0.2}, 0;0, ${width * 0.3}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <circle cx="2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId1"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`0s;${animationId7}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId3"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId2}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width * 0.8" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId5"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId4}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="width - 2" :cy="height / 2" r="2" fill="#03709f">
+        <animate
+          :id="animationId7"
+          attributeName="fill"
+          values="#03709f;#00c2ff"
+          :begin="`${animationId6}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          values="#03709f;#03709f"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration10',
+  mixins: [autoResize],
+  data () {
+    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()}`
+    }
+  }
+}
+</script>

lib/components/decoration2/index.js

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

lib/components/decoration2/src/main.css

@@ -0,0 +1,7 @@
+.dv-decoration-2 {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}

lib/components/decoration2/src/main.vue

@@ -0,0 +1,91 @@
+<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">
+        <animate
+          :attributeName="reverse ? 'height' : 'width'"
+          from="0"
+          :to="reverse ? height : width"
+          dur="6s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines=".42,0,.58,1"
+          repeatCount="indefinite"
+        />
+      </rect>
+
+      <rect :x="x" :y="y" width="1" height="1" fill="#fff">
+        <animate
+          :attributeName="reverse ? 'y' : 'x'"
+          from="0"
+          :to="reverse ? height : width"
+          dur="6s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines="0.42,0,0.58,1"
+          repeatCount="indefinite"
+        />
+      </rect>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration2',
+  mixins: [autoResize],
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      ref: 'decoration-2',
+
+      x: 0,
+      y: 0,
+
+      w: 0,
+      h: 0
+    }
+  },
+  watch: {
+    reverse () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { reverse, width, height } = this
+
+      if (reverse) {
+        this.w = 1
+        this.h = height
+        this.x = width / 2
+        this.y = 0
+      } else {
+        this.w = width
+        this.h = 1
+        this.x = 0
+        this.y = height / 2
+      }
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  }
+}
+</script>

lib/components/decoration3/index.js

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

lib/components/decoration3/src/main.css

@@ -0,0 +1,7 @@
+.dv-decoration-3 {
+  width: 100%;
+  height: 100%;
+}
+.dv-decoration-3 svg {
+  transform-origin: left top;
+}

lib/components/decoration3/src/main.vue

@@ -0,0 +1,97 @@
+<template>
+  <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"
+          />
+        </rect>
+      </template>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration3',
+  mixins: [autoResize],
+  data () {
+    const pointSideLength = 7
+
+    return {
+      ref: 'decoration-3',
+
+      svgWH: [300, 35],
+
+      svgScale: [1, 1],
+
+      rowNum: 2,
+      rowPoints: 25,
+
+      pointSideLength,
+      halfPointSideLength: pointSideLength / 2,
+
+      points: []
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcScale()
+    },
+    calcPointsPosition () {
+      const { svgWH, rowNum, rowPoints } = this
+
+      const [w, h] = svgWH
+
+      const horizontalGap = w / (rowPoints + 1)
+      const verticalGap = h / (rowNum + 1)
+
+      let points = new Array(rowNum).fill(0).map((foo, i) =>
+        new Array(rowPoints).fill(0).map((foo, j) => [
+          horizontalGap * (j + 1), verticalGap * (i + 1)
+        ]))
+
+      this.points = points.reduce((all, item) => [...all, ...item], [])
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  }
+}
+</script>

lib/components/decoration4/index.js

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

lib/components/decoration4/src/main.css

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

lib/components/decoration4/src/main.vue

@@ -0,0 +1,38 @@
+<template>
+  <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;`"
+    >
+      <svg :width="reverse ? width : 5" :height="reverse ? 5 : height">
+        <polyline
+          stroke="rgba(255, 255, 255, 0.3)"
+          :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-width="3"
+          stroke-dasharray="20, 80"
+          stroke-dashoffset="-30"
+          :points="reverse ? `0, 2.5 ${width}, 2.5` : `2.5, 0 2.5, ${height}`"
+        />
+      </svg>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration4',
+  mixins: [autoResize],
+  props: ['reverse'],
+  data () {
+    return {
+      ref: 'decoration-4'
+    }
+  }
+}
+</script>

lib/components/decoration5/index.js

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

lib/components/decoration5/src/main.css

@@ -0,0 +1,4 @@
+.dv-decoration-5 {
+  width: 100%;
+  height: 100%;
+}

lib/components/decoration5/src/main.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="dv-decoration-5" :ref="ref">
+    <svg :width="width" :height="height">
+      <polyline
+        fill="transparent"
+        stroke="#3f96a5"
+        stroke-width="3"
+        :points="line1Points"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          attributeType="XML"
+          :from="`0, ${line1Length / 2}, 0, ${line1Length / 2}`"
+          :to="`0, 0, ${line1Length}, 0`"
+          dur="1.2s"
+          begin="0s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines="0.4,1,0.49,0.98"
+          repeatCount="indefinite"
+        />
+      </polyline>
+      <polyline
+        fill="transparent"
+        stroke="#3f96a5"
+        stroke-width="2"
+        :points="line2Points"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          attributeType="XML"
+          :from="`0, ${line2Length / 2}, 0, ${line2Length / 2}`"
+          :to="`0, 0, ${line2Length}, 0`"
+          dur="1.2s"
+          begin="0s"
+          calcMode="spline"
+          keyTimes="0;1"
+          keySplines=".4,1,.49,.98"
+          repeatCount="indefinite"
+        />
+      </polyline>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { getPolylineLength } from '@jiaminghi/charts/lib/util'
+
+export default {
+  name: 'DvDecoration5',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'decoration-5',
+
+      line1Points: '',
+      line2Points: '',
+
+      line1Length: 0,
+      line2Length: 0
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { width, height } = this
+
+      let line1Points = [
+        [0, height * 0.2], [width * 0.18, height * 0.2], [width * 0.2, height * 0.4], [width * 0.25, height * 0.4],
+        [width * 0.27, height * 0.6], [width * 0.72, height * 0.6], [width * 0.75, height * 0.4],
+        [width * 0.8, height * 0.4], [width * 0.82, height * 0.2], [width, height * 0.2]
+      ]
+
+      let line2Points = [
+        [width * 0.3, height * 0.8], [width * 0.7, height * 0.8]
+      ]
+
+      const line1Length = getPolylineLength(line1Points)
+      const line2Length = getPolylineLength(line2Points)
+
+      line1Points = line1Points.map(point => point.join(',')).join(' ')
+      line2Points = line2Points.map(point => point.join(',')).join(' ')
+
+      this.line1Points = line1Points
+      this.line2Points = line2Points
+
+      this.line1Length = line1Length
+      this.line2Length = line2Length
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  }
+}
+</script>

lib/components/decoration6/index.js

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

lib/components/decoration6/src/main.css

@@ -0,0 +1,7 @@
+.dv-decoration-6 {
+  width: 100%;
+  height: 100%;
+}
+.dv-decoration-6 svg {
+  transform-origin: left top;
+}

lib/components/decoration6/src/main.vue

@@ -0,0 +1,122 @@
+<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"
+            :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"
+          />
+        </rect>
+      </template>
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+import { randomExtend } from '../../../util'
+
+export default {
+  name: 'DvDecoration6',
+  mixins: [autoResize],
+  data () {
+    const rectWidth = 7
+
+    return {
+      ref: 'decoration-6',
+
+      svgWH: [300, 35],
+
+      svgScale: [1, 1],
+
+      rowNum: 1,
+      rowPoints: 40,
+
+      rectWidth,
+      halfRectWidth: rectWidth / 2,
+
+      points: [],
+      heights: [],
+      minHeights: [],
+      randoms: []
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    },
+    calcSVGData () {
+      const { calcPointsPosition, calcScale } = this
+
+      calcPointsPosition()
+
+      calcScale()
+    },
+    calcPointsPosition () {
+      const { svgWH, rowNum, rowPoints } = this
+
+      const [w, h] = svgWH
+
+      const horizontalGap = w / (rowPoints + 1)
+      const verticalGap = h / (rowNum + 1)
+
+      let points = new Array(rowNum).fill(0).map((foo, i) =>
+        new Array(rowPoints).fill(0).map((foo, j) => [
+          horizontalGap * (j + 1), verticalGap * (i + 1)
+        ]))
+
+      this.points = points.reduce((all, item) => [...all, ...item], [])
+      const heights = this.heights = new Array(rowNum * rowPoints)
+        .fill(0).map(foo =>
+          Math.random() > 0.8 ? randomExtend(0.7 * h, h) : randomExtend(0.2 * h, 0.5 * h))
+
+      this.minHeights = new Array(rowNum * rowPoints)
+        .fill(0).map((foo, i) => heights[i] * Math.random())
+
+      this.randoms = new Array(rowNum * rowPoints)
+        .fill(0).map(foo => Math.random() + 1.5)
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcSVGData } = this
+
+      calcSVGData()
+    }
+  }
+}
+</script>

lib/components/decoration7/index.js

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

lib/components/decoration7/src/main.css

@@ -0,0 +1,7 @@
+.dv-decoration-7 {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+}

lib/components/decoration7/src/main.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="dv-decoration-7">
+    <svg width="21px" height="20px">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        stroke="#1dc1f5"
+        points="10, 0 19, 10 10, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        stroke="#1dc1f5"
+        points="2, 0 11, 10 2, 20"
+      />
+    </svg>
+    <slot></slot>
+    <svg width="21px" height="20px">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        stroke="#1dc1f5"
+        points="11, 0 2, 10 11, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        stroke="#1dc1f5"
+        points="19, 0 10, 10 19, 20"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvDecoration7'
+}
+</script>

lib/components/decoration8/index.js

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

lib/components/decoration8/src/main.css

@@ -0,0 +1,5 @@
+.dv-decoration-8 {
+  display: flex;
+  width: 100%;
+  height: 100%;
+}

lib/components/decoration8/src/main.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="dv-decoration-8" :ref="ref">
+    <svg :width="width" :height="height">
+      <polyline
+        stroke="#3f96a5"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(0)}, 0 ${xPos(30)}, ${height / 2}`"
+      />
+
+      <polyline
+        stroke="#3f96a5"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(20)}, 0 ${xPos(50)}, ${height / 2} ${xPos(width)}, ${height / 2}`"
+      />
+
+      <polyline
+        stroke="#3f96a5"
+        fill="transparent"
+        stroke-width="3"
+        :points="`${xPos(0)}, ${height - 3}, ${xPos(200)}, ${height - 3}`"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration8',
+  mixins: [autoResize],
+  props: {
+    reverse: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      ref: 'decoration-8'
+    }
+  },
+  methods: {
+    xPos (pos) {
+      const { reverse, width } = this
+
+      if (!reverse) return pos
+
+      return width - pos
+    }
+  }
+}
+</script>

lib/components/decoration9/index.js

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

lib/components/decoration9/src/main.css

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

lib/components/decoration9/src/main.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="dv-decoration-9" :ref="ref">
+    <svg :width="`${svgWH[0]}px`" :height="`${svgWH[1]}px`" :style="`transform:scale(${svgScale[0]},${svgScale[1]});`">
+      <defs>
+        <polygon :id="polygonId" points="15, 46.5, 21, 47.5, 21, 52.5, 15, 53.5" />
+      </defs>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.5)"
+        stroke-width="10"
+        stroke-dasharray="80, 100, 30, 100"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;360 50 50"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="45"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.8)"
+        stroke-width="6"
+        stroke-dasharray="50, 66, 100, 66"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;-360 50 50"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="38"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.2)"
+        stroke-width="1"
+        stroke-dasharray="5, 1"
+      />
+
+      <use
+        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)'"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0 50 50;360 50 50"
+          dur="3s"
+          :begin="`${i * 0.15}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+
+      <circle
+        cx="50"
+        cy="50"
+        r="26"
+        fill="transparent"
+        stroke="rgba(3, 166, 224, 0.2)"
+        stroke-width="1"
+        stroke-dasharray="5, 1"
+      />
+    </svg>
+
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvDecoration9',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'decoration-9',
+
+      polygonId: `decoration-9-polygon-${(new Date()).getTime()}`,
+
+      svgWH: [100, 100],
+
+      svgScale: [1, 1]
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcScale } = this
+
+      calcScale()
+    },
+    calcScale () {
+      const { width, height, svgWH } = this
+
+      const [w, h] = svgWH
+
+      this.svgScale = [width / w, height / h]
+    },
+    onResize () {
+      const { calcScale } = this
+
+      calcScale()
+    }
+  }
+}
+</script>

lib/components/digitalFlop/index.js

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

lib/components/digitalFlop/src/main.css

@@ -0,0 +1,4 @@
+.dv-digital-flop canvas {
+  width: 100%;
+  height: 100%;
+}

lib/components/digitalFlop/src/main.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="dv-digital-flop">
+    <canvas ref="digital-flop" />
+  </div>
+</template>
+
+<script>
+import CRender from '@jiaminghi/c-render'
+
+import '@jiaminghi/charts/lib/extend/index'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvDigitalFlop',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      renderer: null,
+
+      defaultConfig: {
+        /**
+         * @description Number for digital flop
+         * @type {Array<Number>}
+         * @default number = []
+         * @example number = [10]
+         */
+        number: [],
+        /**
+         * @description Content formatter
+         * @type {String}
+         * @default content = ''
+         * @example content = '{nt}个'
+         */
+        content: '',
+        /**
+         * @description Number toFixed
+         * @type {Number}
+         * @default toFixed = 0
+         */
+        toFixed: 0,
+        /**
+         * @description Text align
+         * @type {String}
+         * @default textAlign = 'center'
+         * @example textAlign = 'center' | 'left' | 'right'
+         */
+        textAlign: 'center',
+        /**
+         * @description Text style configuration
+         * @type {Object} {CRender Class Style}
+         */
+        style: {
+          fontSize: 30,
+          fill: '#3de7c9'
+        },
+        /**
+         * @description CRender animationCurve
+         * @type {String}
+         * @default animationCurve = 'easeOutCubic'
+         */
+        animationCurve: 'easeOutCubic',
+        /**
+         * @description CRender animationFrame
+         * @type {String}
+         * @default animationFrame = 50
+         */
+        animationFrame: 50
+      },
+
+      mergedConfig: null,
+
+      graph: null
+    }
+  },
+  watch: {
+    config () {
+      const { update } = this
+
+      update()
+    }
+  },
+  methods: {
+    init () {
+      const { initRender, mergeConfig, initGraph } = this
+
+      initRender()
+
+      mergeConfig()
+
+      initGraph()
+    },
+    initRender () {
+      const { $refs } = this
+
+      this.renderer = new CRender($refs['digital-flop'])
+    },
+    mergeConfig () {
+      const { defaultConfig, config } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    initGraph () {
+      const { getShape, getStyle, renderer, mergedConfig } = this
+
+      const { animationCurve, animationFrame } = mergedConfig
+
+      const shape = getShape()
+      const style = getStyle()
+
+      this.graph = renderer.add({
+        name: 'numberText',
+        animationCurve,
+        animationFrame,
+        shape,
+        style
+      })
+    },
+    getShape () {
+      const { number, content, toFixed, textAlign } = this.mergedConfig
+
+      const [w, h] = this.renderer.area
+
+      const position = [w / 2, h / 2]
+
+      if (textAlign === 'left') position[0] = 0
+      if (textAlign === 'right') position[0] = w
+
+      return {
+        number,
+        content,
+        toFixed,
+        position
+      }
+    },
+    getStyle () {
+      const { style, textAlign } = this.mergedConfig
+
+      return deepMerge(style, {
+        textAlign,
+        textBaseline: 'middle'
+      })
+    },
+    update () {
+      const { mergeConfig, mergeShape, getShape, getStyle, graph, mergedConfig } = this
+
+      mergeConfig()
+
+      if (!graph) return
+
+      const { animationCurve, animationFrame } = mergedConfig
+
+      const shape = getShape()
+      const style = getStyle()
+
+      mergeShape(graph, shape)
+
+      graph.animationCurve = animationCurve
+      graph.animationFrame = animationFrame
+
+      graph.animation('style', style, true)
+      graph.animation('shape', shape)
+    },
+    mergeShape (graph, shape) {
+      const cacheNum = graph.shape.number.length
+      const shapeNum = shape.number.length
+
+      if (cacheNum !== shapeNum) graph.shape.number = shape.number
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>

lib/components/flylineChart/index.js

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

lib/components/flylineChart/src/main.css

@@ -0,0 +1,12 @@
+.dv-flyline-chart {
+  display: flex;
+  flex-direction: column;
+  background-size: 100% 100%;
+}
+.dv-flyline-chart polyline {
+  transition: all 0.3s;
+}
+.dv-flyline-chart text {
+  text-anchor: middle;
+  dominant-baseline: middle;
+}

lib/components/flylineChart/src/main.vue

@@ -0,0 +1,492 @@
+<template>
+  <div
+    class="dv-flyline-chart"
+    ref="dv-flyline-chart"
+    :style="`background-image: url(${mergedConfig ? mergedConfig.bgImgUrl : ''})`"
+    @click="consoleClickPos"
+  >
+    <svg v-if="mergedConfig" :width="width" :height="height">
+      <defs>
+        <radialGradient
+          :id="gradientId"
+          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="gradient2Id"
+          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>
+
+        <circle
+          v-if="paths[0]"
+          :id="`circle${paths[0].toString()}`"
+          :cx="paths[0][2][0]"
+          :cy="paths[0][2][1]"
+        >
+          <animate
+            attributeName="r"
+            :values="`1;${mergedConfig.halo.radius}`"
+            :dur="mergedConfig.halo.duration / 10 + 's'"
+            repeatCount="indefinite"
+          />
+          <animate
+            attributeName="opacity"
+            values="1;0"
+            :dur="mergedConfig.halo.duration / 10 + 's'"
+            repeatCount="indefinite"
+          />
+        </circle>
+      </defs>
+
+      <image
+        v-if="paths[0]"
+        :xlink:href="mergedConfig.centerPointImg.url"
+        :width="mergedConfig.centerPointImg.width"
+        :height="mergedConfig.centerPointImg.height"
+        :x="paths[0][2][0] - mergedConfig.centerPointImg.width / 2"
+        :y="paths[0][2][1] - mergedConfig.centerPointImg.height / 2"
+      />
+
+      <mask :id="`maskhalo${paths[0].toString()}`">
+        <use
+          v-if="paths[0]"
+          :xlink:href="`#circle${paths[0].toString()}`"
+          :fill="`url(#${gradient2Id})`"
+        />
+      </mask>
+
+      <use
+        v-if="paths[0] && mergedConfig.halo.show"
+        :xlink:href="`#circle${paths[0].toString()}`"
+        :fill="mergedConfig.halo.color"
+        :mask="`url(#maskhalo${paths[0].toString()})`"
+      />
+
+      <g
+        v-for="(path, i) in paths"
+        :key="i"
+      >
+        <defs>
+          <path
+            :id="`path${path.toString()}`"
+            :ref="`path${i}`"
+            :d="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
+            fill="transparent"
+          />
+        </defs>
+
+        <use
+          :xlink:href="`#path${path.toString()}`"
+          :stroke-width="mergedConfig.lineWidth"
+          :stroke="mergedConfig.orbitColor"
+        />
+
+        <use
+          v-if="lengths[i]"
+          :xlink:href="`#path${path.toString()}`"
+          :stroke-width="mergedConfig.lineWidth"
+          :stroke="mergedConfig.flylineColor"
+          :mask="`url(#mask${unique}${path.toString()})`"
+        >
+          <animate
+            attributeName="stroke-dasharray"
+            :from="`0, ${lengths[i]}`"
+            :to="`${lengths[i]}, 0`"
+            :dur="times[i] || 0"
+            repeatCount="indefinite"
+          />
+        </use>
+
+        <mask :id="`mask${unique}${path.toString()}`">
+          <circle cx="0" cy="0" :r="mergedConfig.flylineRadius" :fill="`url(#${gradientId})`">
+            <animateMotion
+              :dur="times[i] || 0"
+              :path="`M${path[0].toString()} Q${path[1].toString()} ${path[2].toString()}`"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+
+        <image
+          :xlink:href="mergedConfig.pointsImg.url"
+          :width="mergedConfig.pointsImg.width"
+          :height="mergedConfig.pointsImg.height"
+          :x="path[0][0] - mergedConfig.pointsImg.width / 2"
+          :y="path[0][1] - mergedConfig.pointsImg.height / 2"
+        />
+
+        <text
+          :style="`fontSize:${mergedConfig.text.fontSize}px;`"
+          :fill="mergedConfig.text.color"
+          :x="path[0][0] + mergedConfig.text.offset[0]"
+          :y="path[0][1] + mergedConfig.text.offset[1]"
+        >
+          {{ texts[i] }}
+        </text>
+
+      </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 } from '../../../util/index'
+
+import autoResize from '../../../mixin/autoResize'
+
+export default {
+  name: 'DvFlylineChart',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    dev: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    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()}`,
+
+      defaultConfig: {
+        /**
+         * @description Flyline chart center point
+         * @type {Array<Number>}
+         * @default centerPoint = [0, 0]
+         */
+        centerPoint: [0, 0],
+        /**
+         * @description Flyline start points
+         * @type {Array<Array<Number>>}
+         * @default points = []
+         * @example points = [[10, 10], [100, 100]]
+         */
+        points: [],
+        /**
+         * @description Flyline width
+         * @type {Number}
+         * @default lineWidth = 1
+         */
+        lineWidth: 1,
+        /**
+         * @description Orbit color
+         * @type {String}
+         * @default orbitColor = 'rgba(103, 224, 227, .2)'
+         */
+        orbitColor: 'rgba(103, 224, 227, .2)',
+        /**
+         * @description Flyline color
+         * @type {String}
+         * @default orbitColor = '#ffde93'
+         */
+        flylineColor: '#ffde93',
+        /**
+         * @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 Flyline radius
+         * @type {Number}
+         * @default flylineRadius = 100
+         */
+        flylineRadius: 100,
+        /**
+         * @description Flyline animation duration
+         * @type {Array<Number>}
+         * @default duration = [20, 30]
+         */
+        duration: [20, 30],
+        /**
+         * @description Relative points position
+         * @type {Boolean}
+         * @default relative = true
+         */
+        relative: true,
+        /**
+         * @description Back ground image url
+         * @type {String}
+         * @default bgImgUrl = ''
+         * @example bgImgUrl = './img/bg.jpg'
+         */
+        bgImgUrl: '',
+        /**
+         * @description Text configuration
+         * @type {Object}
+         */
+        text: {
+          /**
+           * @description Text offset
+           * @type {Array<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 Halo configuration
+         * @type {Object}
+         */
+        halo: {
+          /**
+           * @description Weather to show halo
+           * @type {Boolean}
+           * @default show = true
+           * @example show = true | false
+           */
+          show: true,
+          /**
+           * @description Halo animation duration (10 = 1s)
+           * @type {Number}
+           * @default duration = 30
+           */
+          duration: 30,
+          /**
+           * @description Halo color
+           * @type {String}
+           * @default color = '#fb7293'
+           */
+          color: '#fb7293',
+          /**
+           * @description Halo max radius
+           * @type {Number}
+           * @default radius = 120
+           */
+          radius: 120
+        },
+        /**
+         * @description Center point img configuration
+         * @type {Object}
+         */
+        centerPointImg: {
+          /**
+           * @description Center point img width
+           * @type {Number}
+           * @default width = 40
+           */
+          width: 40,
+          /**
+           * @description Center point img height
+           * @type {Number}
+           * @default height = 40
+           */
+          height: 40,
+          /**
+           * @description Center point img url
+           * @type {String}
+           * @default url = ''
+           */
+          url: ''
+        },
+        /**
+         * @description Points img configuration
+         * @type {Object}
+         * @default radius = 120
+         */
+        pointsImg: {
+          /**
+           * @description Points img width
+           * @type {Number}
+           * @default width = 15
+           */
+          width: 15,
+          /**
+           * @description Points img height
+           * @type {Number}
+           * @default height = 15
+           */
+          height: 15,
+          /**
+           * @description Points img url
+           * @type {String}
+           * @default url = ''
+           */
+          url: ''
+        }
+      },
+
+      mergedConfig: null,
+
+      paths: [],
+      lengths: [],
+      times: [],
+      texts: []
+    }
+  },
+  watch: {
+    config () {
+      const { calcData } = this
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { calcData } = this
+
+      calcData()
+    },
+    async calcData () {
+      const { mergeConfig, createFlylinePaths, calcLineLengths } = this
+
+      mergeConfig()
+
+      createFlylinePaths()
+
+      await calcLineLengths()
+
+      const { calcTimes, calcTexts } = this
+
+      calcTimes()
+
+      calcTexts()
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      const mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+
+      const { points } = mergedConfig
+
+      mergedConfig.points = points.map(item => {
+        if (item instanceof Array) {
+          return { position: item, text: '' }
+        }
+
+        return item
+      })
+
+      this.mergedConfig = mergedConfig
+    },
+    createFlylinePaths () {
+      const { getPath, mergedConfig, width, height } = this
+
+      let { centerPoint, points, relative } = mergedConfig
+
+      points = points.map(({ position }) => position)
+
+      if (relative) {
+        centerPoint = [width * centerPoint[0], height * centerPoint[1]]
+        points = points.map(([x, y]) => [width * x, height * y])
+      }
+
+      this.paths = points.map(point => getPath(centerPoint, point))
+    },
+    getPath (center, point) {
+      const { getControlPoint } = this
+
+      const controlPoint = getControlPoint(center, point)
+
+      return [point, controlPoint, center]
+    },
+    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, paths, $refs } = this
+
+      await $nextTick()
+
+      this.lengths = paths.map((foo, i) => $refs[`path${i}`][0].getTotalLength())
+    },
+    calcTimes () {
+      const { duration, points } = this.mergedConfig
+
+      this.times = points.map(foo => randomExtend(...duration) / 10)
+    },
+    calcTexts () {
+      const { points } = this.mergedConfig
+
+      this.texts = points.map(({ text }) => text)
+    },
+    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 DEV: \n Click Position is [${offsetX}, ${offsetY}] \n Relative Position is [${relativeX}, ${relativeY}]`)
+    }
+  }
+}
+</script>

lib/components/fullScreenContainer/index.js

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

lib/components/fullScreenContainer/src/main.css

@@ -0,0 +1,8 @@
+#dv-full-screen-container {
+  position: fixed;
+  top: 0px;
+  left: 0px;
+  overflow: hidden;
+  transform-origin: left top;
+  z-index: 999;
+}

lib/components/fullScreenContainer/src/main.vue

@@ -0,0 +1,57 @@
+<template>
+  <div id="dv-full-screen-container" :ref="ref">
+    <template v-if="ready">
+      <slot></slot>
+    </template>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../../mixin/autoResize.js'
+
+export default {
+  name: 'DvFullScreenContainer',
+  mixins: [autoResize],
+  data () {
+    return {
+      ref: 'full-screen-container',
+      allWidth: 0,
+      scale: 0,
+      datavRoot: '',
+      ready: false
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { initConfig, setAppScale } = this
+
+      initConfig()
+
+      setAppScale()
+
+      this.ready = true
+    },
+    initConfig () {
+      const { dom } = this
+      const { width, height } = screen
+
+      this.allWidth = width
+
+      dom.style.width = `${width}px`
+      dom.style.height = `${height}px`
+    },
+    setAppScale () {
+      const { allWidth, dom } = this
+
+      const currentWidth = document.body.clientWidth
+
+      dom.style.transform = `scale(${currentWidth / allWidth})`
+    },
+    onResize () {
+      const { setAppScale } = this
+
+      setAppScale()
+    }
+  }
+}
+</script>

lib/components/loading/index.js

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

lib/components/loading/src/main.css

@@ -0,0 +1,11 @@
+.dv-loading {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.dv-loading .loading-tip {
+  font-size: 15px;
+}

lib/components/loading/src/main.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="dv-loading">
+    <svg width="50px" height="50px">
+      <circle
+        cx="25"
+        cy="25"
+        r="20"
+        fill="transparent"
+        stroke-width="3"
+        stroke-dasharray="31.415, 31.415"
+        stroke="#02bcfe"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="0, 25 25;360, 25 25"
+          dur="1.5s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke"
+          values="#02bcfe;#3be6cb;#02bcfe"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+
+      <circle
+        cx="25"
+        cy="25"
+        r="10"
+        fill="transparent"
+        stroke-width="3"
+        stroke-dasharray="15.7, 15.7"
+        stroke="#3be6cb"
+        stroke-linecap="round"
+      >
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          values="360, 25 25;0, 25 25"
+          dur="1.5s"
+          repeatCount="indefinite"
+        />
+        <animate
+          attributeName="stroke"
+          values="#3be6cb;#02bcfe;#3be6cb"
+          dur="3s"
+          repeatCount="indefinite"
+        />
+      </circle>
+    </svg>
+    <div class="loading-tip">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DvLoading'
+}
+</script>

lib/components/percentPond/index.js

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

lib/components/percentPond/src/main.css

@@ -0,0 +1,21 @@
+.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;
+}
+.dv-percent-pond text {
+  font-size: 25px;
+  font-weight: bold;
+  text-anchor: middle;
+  dominant-baseline: middle;
+}

lib/components/percentPond/src/main.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="dv-percent-pond" ref="percent-pond">
+    <svg>
+      <defs>
+        <linearGradient :id="gradientId1" x1="0%" y1="0%" x2="100%" y2="0%">
+          <stop v-for="lc in linearGradient" :key="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]}%`"
+            :stop-color="lc[1]" />
+        </linearGradient>
+      </defs>
+      <rect
+        :x="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
+        :y="mergedConfig ? mergedConfig.borderWidth / 2 : '0'"
+        :rx="mergedConfig ? mergedConfig.borderRadius : '0'"
+        :ry="mergedConfig ? mergedConfig.borderRadius : '0'"
+        fill="transparent"
+        :stroke-width="mergedConfig ? mergedConfig.borderWidth : '0'"
+        :stroke="`url(#${gradientId1})`"
+        :width="rectWidth > 0 ? rectWidth : 0"
+        :height="rectHeight > 0 ? rectHeight : 0"
+      />
+      <polyline
+        :stroke-width="polylineWidth"
+        :stroke-dasharray="mergedConfig ? mergedConfig.lineDash.join(',') : '0'"
+        :stroke="`url(#${polylineGradient})`"
+        :points="points"
+      />
+      <text
+        :stroke="mergedConfig ? mergedConfig.textColor : '#fff'"
+        :fill="mergedConfig ? mergedConfig.textColor : '#fff'"
+        :x="width / 2"
+        :y="height / 2"
+      >
+        {{ details }}
+      </text>
+    </svg>
+  </div>
+</template>
+
+<script>
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'DvPercentPond',
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      gradientId1: `percent-pond-gradientId1-${(new Date()).getTime()}`,
+      gradientId2: `percent-pond-gradientId2-${(new Date()).getTime()}`,
+
+      width: 0,
+      height: 0,
+
+      defaultConfig: {
+        /**
+         * @description Value
+         * @type {Number}
+         * @default value = 0
+         */
+        value: 0,
+        /**
+         * @description Colors (hex|rgb|rgba|color keywords)
+         * @type {Array<String>}
+         * @default colors = ['#00BAFF', '#3DE7C9']
+         * @example colors = ['#000', 'rgb(0, 0, 0)', 'rgba(0, 0, 0, 1)', 'red']
+         */
+        colors: ['#3DE7C9', '#00BAFF'],
+        /**
+         * @description Border width
+         * @type {Number}
+         * @default borderWidth = 3
+         */
+        borderWidth: 3,
+        /**
+         * @description Gap between border and pond
+         * @type {Number}
+         * @default borderGap = 3
+         */
+        borderGap: 3,
+        /**
+         * @description Line dash
+         * @type {Array<Number>}
+         * @default lineDash = [5, 1]
+         */
+        lineDash: [5, 1],
+        /**
+         * @description Text color
+         * @type {String}
+         * @default textColor = '#fff'
+         */
+        textColor: '#fff',
+        /**
+         * @description Border radius
+         * @type {Number}
+         * @default borderRadius = 5
+         */
+        borderRadius: 5,
+        /**
+         * @description Local Gradient
+         * @type {Boolean}
+         * @default localGradient = false
+         * @example localGradient = false | true
+         */
+        localGradient: false,
+        /**
+         * @description Formatter
+         * @type {String}
+         * @default formatter = '{value}%'
+         */
+        formatter: '{value}%'
+      },
+
+      mergedConfig: null
+    }
+  },
+  computed: {
+    rectWidth () {
+      const { mergedConfig, width } = this
+
+      if (!mergedConfig) return 0
+
+      const { borderWidth } = mergedConfig
+
+      return width - borderWidth
+    },
+    rectHeight () {
+      const { mergedConfig, height } = this
+
+      if (!mergedConfig) return 0
+
+      const { borderWidth } = mergedConfig
+
+      return height - borderWidth
+    },
+    points () {
+      const { mergedConfig, width, height } = this
+
+      const halfHeight = height / 2
+
+      if (!mergedConfig) return `0, ${halfHeight} 0, ${halfHeight}`
+
+      const { borderWidth, borderGap, value } = mergedConfig
+
+      const polylineLength = (width - (borderWidth + borderGap) * 2) / 100 * value
+
+      return `
+        ${borderWidth + borderGap}, ${halfHeight}
+        ${borderWidth + borderGap + polylineLength}, ${halfHeight + 0.001}
+      `
+    },
+    polylineWidth () {
+      const { mergedConfig, height } = this
+
+      if (!mergedConfig) return 0
+
+      const { borderWidth, borderGap } = mergedConfig
+
+      return height - (borderWidth + borderGap) * 2
+    },
+    linearGradient () {
+      const { mergedConfig } = this
+
+      if (!mergedConfig) return []
+
+      const { colors } = mergedConfig
+
+      const colorNum = colors.length
+
+      const colorOffsetGap = 100 / (colorNum - 1)
+
+      return colors.map((c, i) => [colorOffsetGap * i, c])
+    },
+    polylineGradient () {
+      const { gradientId1, gradientId2, mergedConfig } = this
+
+      if (!mergedConfig) return gradientId2
+
+      if (mergedConfig.localGradient) return gradientId1
+
+      return gradientId2
+    },
+    gradient2XPos () {
+      const { mergedConfig } = this
+
+      if (!mergedConfig) return '100%'
+
+      const { value } = mergedConfig
+
+      return `${200 - value}%`
+    },
+    details () {
+      const { mergedConfig } = this
+
+      if (!mergedConfig) return ''
+
+      const { value, formatter } = mergedConfig
+
+      return formatter.replace('{value}', value)
+    }
+  },
+  watch: {
+    config () {
+      const { mergeConfig } = this
+
+      mergeConfig()
+    }
+  },
+  methods: {
+    async init () {
+      const { initWH, config, mergeConfig } = this
+
+      await initWH()
+
+      if (!config) return
+
+      mergeConfig()
+    },
+    async initWH () {
+      const { $nextTick, $refs } = this
+
+      await $nextTick()
+
+      const dom = $refs['percent-pond']
+
+      this.width = dom.clientWidth
+      this.height = dom.clientHeight
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>

lib/components/scrollBoard/index.js

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

lib/components/scrollBoard/src/main.css

@@ -0,0 +1,45 @@
+.dv-scroll-board {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+}
+.dv-scroll-board .text {
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dv-scroll-board .header {
+  display: flex;
+  flex-direction: row;
+  font-size: 15px;
+}
+.dv-scroll-board .header .header-item {
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: all 0.3s;
+}
+.dv-scroll-board .rows {
+  overflow: hidden;
+}
+.dv-scroll-board .rows .row-item {
+  display: flex;
+  font-size: 14px;
+  transition: all 0.3s;
+}
+.dv-scroll-board .rows .ceil {
+  padding: 0 10px;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.dv-scroll-board .rows .index {
+  border-radius: 3px;
+  padding: 0px 3px;
+}

lib/components/scrollBoard/src/main.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="dv-scroll-board" :ref="ref">
+    <div class="header" v-if="header.length && mergedConfig" :style="`background-color: ${mergedConfig.headerBGC};`">
+      <div
+        class="header-item"
+        v-for="(headerItem, i) in header"
+        :key="headerItem + i"
+        :style="`
+          height: ${mergedConfig.headerHeight}px;
+          line-height: ${mergedConfig.headerHeight}px;
+          width: ${widths[i]}px;
+        `"
+        :align="aligns[i]"
+        v-html="headerItem"
+      />
+    </div>
+
+    <div
+      v-if="mergedConfig"
+      class="rows"
+      :style="`height: ${height - (header.length ? mergedConfig.headerHeight : 0)}px;`"
+    >
+      <div
+        class="row-item"
+        v-for="(row, ri) in rows"
+        :key="row.toString() + row.scroll"
+        :style="`
+          height: ${heights[ri]}px;
+          line-height: ${heights[ri]}px;
+          background-color: ${mergedConfig[row.rowIndex % 2 === 0 ? 'evenRowBGC' : 'oddRowBGC']};
+        `"
+      >
+        <div
+          class="ceil"
+          v-for="(ceil, ci) in row.ceils"
+          :key="ceil + ri + ci"
+          :style="`width: ${widths[ci]}px;`"
+          :align="aligns[ci]"
+          v-html="ceil"
+          @click="emitEvent(ri, ci, row, ceil)"
+        />
+
+      </div>
+    </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: 'DvScrollBoard',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      ref: 'scroll-board',
+
+      defaultConfig: {
+        /**
+         * @description Board header
+         * @type {Array<String>}
+         * @default header = []
+         * @example header = ['column1', 'column2', 'column3']
+         */
+        header: [],
+        /**
+         * @description Board data
+         * @type {Array<Array>}
+         * @default data = []
+         */
+        data: [],
+        /**
+         * @description Row num
+         * @type {Number}
+         * @default rowNum = 5
+         */
+        rowNum: 5,
+        /**
+         * @description Header background color
+         * @type {String}
+         * @default headerBGC = '#00BAFF'
+         */
+        headerBGC: '#00BAFF',
+        /**
+         * @description Odd row background color
+         * @type {String}
+         * @default oddRowBGC = '#003B51'
+         */
+        oddRowBGC: '#003B51',
+        /**
+         * @description Even row background color
+         * @type {String}
+         * @default evenRowBGC = '#003B51'
+         */
+        evenRowBGC: '#0A2732',
+        /**
+         * @description Scroll wait time
+         * @type {Number}
+         * @default waitTime = 2000
+         */
+        waitTime: 2000,
+        /**
+         * @description Header height
+         * @type {Number}
+         * @default headerHeight = 35
+         */
+        headerHeight: 35,
+        /**
+         * @description Column width
+         * @type {Array<Number>}
+         * @default columnWidth = []
+         */
+        columnWidth: [],
+        /**
+         * @description Column align
+         * @type {Array<String>}
+         * @default align = []
+         * @example align = ['left', 'center', 'right']
+         */
+        align: [],
+        /**
+         * @description Show index
+         * @type {Boolean}
+         * @default index = false
+         */
+        index: false,
+        /**
+         * @description Carousel type
+         * @type {String}
+         * @default carousel = 'single'
+         * @example carousel = 'single' | 'page'
+         */
+        carousel: 'single'
+      },
+
+      mergedConfig: null,
+
+      header: [],
+
+      rowsData: [],
+
+      rows: [],
+
+      widths: [],
+
+      heights: [],
+
+      avgHeight: 0,
+
+      aligns: [],
+
+      animationIndex: 0,
+
+      animationHandler: ''
+    }
+  },
+  watch: {
+    config () {
+      const { stopAnimation, calcData } = this
+
+      stopAnimation()
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { mergedConfig, calcWidths, calcHeights } = this
+
+      if (!mergedConfig) return
+
+      calcWidths()
+
+      calcHeights()
+    },
+    calcData () {
+      const { mergeConfig, calcHeaderData, calcRowsData } = this
+
+      mergeConfig()
+
+      calcHeaderData()
+
+      calcRowsData()
+
+      const { calcWidths, calcHeights, calcAligns } = this
+
+      calcWidths()
+
+      calcHeights()
+
+      calcAligns()
+
+      const { animation } = this
+
+      animation(true)
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    calcHeaderData () {
+      let { header, index } = this.mergedConfig
+
+      if (!header.length) {
+        this.header = []
+
+        return
+      }
+
+      header = [...header]
+
+      if (index) header.unshift('#')
+
+      this.header = header
+    },
+    calcRowsData () {
+      let { data, index, headerBGC, rowNum } = this.mergedConfig
+
+      if (index) {
+        data = data.map((row, i) => {
+          row = [...row]
+
+          const indexTag = `<span class="index" style="background-color: ${headerBGC};">${i + 1}</spand>`
+
+          row.unshift(indexTag)
+
+          return row
+        })
+      }
+
+      data = data.map((ceils, i) => ({ ceils, rowIndex: i }))
+
+      const rowLength = data.length
+
+      if (rowLength > rowNum && rowLength < 2 * rowNum) {
+        data = [...data, ...data]
+      }
+
+      data = data.map((d, i) => ({ ...d, scroll: i }))
+
+      this.rowsData = data
+      this.rows = data
+    },
+    calcWidths () {
+      const { width, mergedConfig, rowsData } = this
+
+      const { columnWidth } = mergedConfig
+
+      const usedWidth = columnWidth.reduce((all, w) => all + w, 0)
+
+      const columnNum = rowsData[0] ? rowsData[0].ceils.length : 0
+
+      const avgWidth = (width - usedWidth) / (columnNum - columnWidth.length)
+
+      const widths = new Array(columnNum).fill(avgWidth)
+
+      this.widths = deepMerge(widths, columnWidth)
+    },
+    calcHeights (onresize = false) {
+      const { height, mergedConfig, header } = this
+
+      const { headerHeight, rowNum, data } = mergedConfig
+
+      let allHeight = height
+
+      if (header.length) allHeight -= headerHeight
+
+      const avgHeight = allHeight / rowNum
+
+      this.avgHeight = avgHeight
+
+      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
+    },
+    calcAligns () {
+      const { header, mergedConfig } = this
+
+      const columnNum = header.length
+
+      let aligns = new Array(columnNum).fill('left')
+
+      const { align } = mergedConfig
+
+      this.aligns = deepMerge(aligns, align)
+    },
+    async animation (start = false) {
+      let { avgHeight, animationIndex, mergedConfig, rowsData, animation } = this
+
+      const { waitTime, carousel, rowNum } = mergedConfig
+
+      const rowLength = rowsData.length
+
+      if (rowNum >= rowLength) return
+
+      if (start) await new Promise(resolve => setTimeout(resolve, waitTime))
+
+      const animationNum = carousel === 'single' ? 1 : rowNum
+
+      let rows = rowsData.slice(animationIndex)
+      rows.push(...rowsData.slice(0, animationIndex))
+
+      this.rows = rows
+      this.heights = new Array(rowLength).fill(avgHeight)
+
+      await new Promise(resolve => setTimeout(resolve, 300))
+
+      this.heights.splice(0, animationNum, ...new Array(animationNum).fill(0))
+
+      animationIndex += animationNum
+
+      const back = animationIndex - rowLength
+      if (back >= 0) animationIndex = back
+
+      this.animationIndex = animationIndex
+      this.animationHandler = setTimeout(animation, waitTime - 300)
+    },
+    stopAnimation () {
+      const { animationHandler } = this
+
+      if (!animationHandler) return
+
+      clearTimeout(animationHandler)
+    },
+    emitEvent (ri, ci, row, ceil) {
+      const { ceils, rowIndex } = row
+
+      this.$emit('click', {
+        row: ceils,
+        ceil,
+        rowIndex,
+        columnIndex: ci
+      })
+    }
+  },
+  destroyed () {
+    const { stopAnimation } = this
+
+    stopAnimation()
+  }
+}
+</script>

lib/components/scrollRankingBoard/index.js

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

lib/components/scrollRankingBoard/src/main.css

@@ -0,0 +1,57 @@
+.dv-scroll-ranking-board {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  overflow: hidden;
+}
+.dv-scroll-ranking-board .row-item {
+  transition: all 0.3s;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+}
+.dv-scroll-ranking-board .ranking-info {
+  display: flex;
+  width: 100%;
+  font-size: 13px;
+}
+.dv-scroll-ranking-board .ranking-info .rank {
+  width: 40px;
+  color: #1370fb;
+}
+.dv-scroll-ranking-board .ranking-info .info-name {
+  flex: 1;
+}
+.dv-scroll-ranking-board .ranking-column {
+  border-bottom: 2px solid rgba(19, 112, 251, 0.5);
+  margin-top: 5px;
+}
+.dv-scroll-ranking-board .ranking-column .inside-column {
+  position: relative;
+  height: 6px;
+  background-color: #1370fb;
+  margin-bottom: 2px;
+  border-radius: 1px;
+  overflow: hidden;
+}
+.dv-scroll-ranking-board .ranking-column .shine {
+  position: absolute;
+  left: 0%;
+  top: 2px;
+  height: 2px;
+  width: 50px;
+  transform: translateX(-100%);
+  background: radial-gradient(#28f8ff 5%, transparent 80%);
+  animation: shine 3s ease-in-out infinite alternate;
+}
+@keyframes shine {
+  80% {
+    left: 0%;
+    transform: translateX(-100%);
+  }
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}