update version to 2.2.0-alpha

CHANGELOG.md

@@ -1,3 +1,24 @@
+# 2.2.0-alpha (2019-06-29)
+
+### New
+
+- **borderBox**
+- **decoration**
+
+# 2.1.1-alpha (2019-06-28)
+
+### Bug Fixes
+
+- **autoResize:** Exception caused by `autoResize` mixin.
+- **charts:** `Legend` is blocked by slot and can't click.
+
+# 2.1.0-alpha (2019-06-27)
+
+### New
+
+- **conicalColumnChart**
+- **scrollRankingBoard**
+
 # 2.0.0-alpha (2019-06-26)
 
 ### Perfect

components/activeRingChart/index.vue

@@ -128,7 +128,7 @@ export default {
       return mergedConfig.data[activeIndex].name
     },
     fontSize () {
-      const { mergedConfig, activeIndex } = this
+      const { mergedConfig } = this
 
       if (!mergedConfig) return ''
 
@@ -178,7 +178,7 @@ export default {
       ringAnimation()
     },
     getRingOption () {
-      const { mergedConfig, getRealRadius, chart } = this
+      const { mergedConfig, getRealRadius } = this
 
       const radius = getRealRadius()
 
@@ -217,7 +217,7 @@ export default {
       return [insideRadius, outSideRadius]
     },
     ringAnimation () {
-      let { animation, activeIndex, getRingOption, chart, getRealRadius } = this
+      let { activeIndex, getRingOption, chart, getRealRadius } = this
 
       const radius = getRealRadius()
       const active = getRealRadius(true)

components/borderBox8/index.vue

@@ -34,7 +34,7 @@
       </defs>
 
       <use
-        stroke="#235fa7" 
+        stroke="#235fa7"
         stroke-width="1"
         :xlink:href="`#${path}`"
       />

components/borderBox9/index.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="dv-border-box-9" :ref="ref">
+    <svg class="dv-svg-container">
+      <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 '../../mixins/autoResize.js'
+
+export default {
+  name: 'BorderBox9',
+  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>
+
+<style lang="less">
+.dv-border-box-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  svg {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0px;
+    top: 0px;
+  }
+
+  .border-box-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

components/charts/index.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="dv-charts-container" :ref="ref">
     <div class="charts" :ref="chartRef" />
-
-    <div class="charts-slot-content">
-      <slot></slot>
-    </div>
   </div>
 </template>
 
@@ -19,7 +15,7 @@ export default {
   props: {
     option: {
       type: Object,
-      default: {}
+      default: () => ({})
     }
   },
   data () {
@@ -42,7 +38,7 @@ export default {
   methods: {
     afterAutoResizeMixinInit () {
       const { initChart } = this
-      
+
       initChart()
     },
     initChart () {
@@ -75,13 +71,5 @@ export default {
     width: 100%;
     height: 100%;
   }
-
-  .charts-slot-content {
-    position: absolute;
-    left: 0px;
-    top: 0px;
-    width: 100%;
-    height: 100%;
-  }
 }
 </style>

components/conicalColumnChart/index.vue

@@ -0,0 +1,219 @@
+<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 '../../mixins/autoResize.js'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'ConicalColumnChart',
+  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>
+
+<style lang="less">
+.dv-conical-column-chart {
+  width: 100%;
+  height: 100%;
+
+  text {
+    text-anchor: middle;
+  }
+}
+</style>

components/decoration1/index.vue

@@ -114,7 +114,7 @@ export default {
   methods: {
     afterAutoResizeMixinInit () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     },
     calcSVGData () {
@@ -158,7 +158,7 @@ export default {
     },
     onResize () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     }
   }

components/decoration10/index.vue

@@ -0,0 +1,176 @@
+<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 '../../mixins/autoResize.js'
+
+export default {
+  name: 'Decoration9',
+  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>
+
+<style lang="less">
+.dv-decoration-10 {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+</style>

components/decoration3/index.vue

@@ -55,7 +55,7 @@ export default {
   methods: {
     afterAutoResizeMixinInit () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     },
     calcSVGData () {
@@ -89,7 +89,7 @@ export default {
     },
     onResize () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     }
   }

components/decoration5/index.vue

@@ -59,13 +59,13 @@ export default {
       line2Points: '',
 
       line1Length: 0,
-      line2Length: 0,
+      line2Length: 0
     }
   },
   methods: {
     afterAutoResizeMixinInit () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     },
     calcSVGData () {
@@ -95,7 +95,7 @@ export default {
     },
     onResize () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     }
   }

components/decoration6/index.vue

@@ -71,7 +71,7 @@ export default {
   methods: {
     afterAutoResizeMixinInit () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     },
     calcSVGData () {
@@ -114,7 +114,7 @@ export default {
     },
     onResize () {
       const { calcSVGData } = this
-      
+
       calcSVGData()
     }
   }

components/decoration8/index.vue

@@ -39,7 +39,7 @@ export default {
   },
   data () {
     return {
-      ref: 'decoration-8',
+      ref: 'decoration-8'
     }
   },
   methods: {

components/decoration9/index.vue

@@ -0,0 +1,141 @@
+<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 '../../mixins/autoResize.js'
+
+export default {
+  name: 'Decoration9',
+  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>
+
+<style lang="less">
+.dv-decoration-9 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  svg {
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    transform-origin: left top;
+  }
+}
+</style>

components/flylineChart/index.vue

@@ -163,7 +163,7 @@ export default {
   props: {
     config: {
       type: Object,
-      default: {}
+      default: () => ({})
     },
     dev: {
       type: Boolean,
@@ -239,7 +239,7 @@ export default {
         /**
          * @description Relative points position
          * @type {Boolean}
-         * @default relative = true 
+         * @default relative = true
          */
         relative: true,
         /**
@@ -375,7 +375,6 @@ export default {
       const { calcData } = this
 
       calcData()
-
     },
     onResize () {
       const { calcData } = this

components/index.js

@@ -10,6 +10,7 @@ import borderBox5 from './borderBox5/index'
 import borderBox6 from './borderBox6/index'
 import borderBox7 from './borderBox7/index'
 import borderBox8 from './borderBox8/index'
+import borderBox9 from './borderBox9/index'
 
 // decoration
 import decoration1 from './decoration1/index'
@@ -20,6 +21,8 @@ import decoration5 from './decoration5/index'
 import decoration6 from './decoration6/index'
 import decoration7 from './decoration7/index'
 import decoration8 from './decoration8/index'
+import decoration9 from './decoration9/index'
+import decoration10 from './decoration10/index'
 
 // charts
 import charts from './charts/index.vue'
@@ -28,8 +31,10 @@ import activeRingChart from './activeRingChart'
 import waterLevelPond from './waterLevelPond/index.vue'
 import percentPond from './percentPond/index.vue'
 import flylineChart from './flylineChart'
+import conicalColumnChart from './conicalColumnChart'
 import digitalFlop from './digitalFlop'
 import scrollBoard from './scrollBoard/index.vue'
+import scrollRankingBoard from './scrollRankingBoard/index.vue'
 
 export default function (Vue) {
   Vue.component('dvFullScreenContainer', fullScreenContainer)
@@ -45,6 +50,7 @@ export default function (Vue) {
   Vue.component('dvBorderBox6', borderBox6)
   Vue.component('dvBorderBox7', borderBox7)
   Vue.component('dvBorderBox8', borderBox8)
+  Vue.component('dvBorderBox9', borderBox9)
 
   // decoration
   Vue.component('dvDecoration1', decoration1)
@@ -55,6 +61,8 @@ export default function (Vue) {
   Vue.component('dvDecoration6', decoration6)
   Vue.component('dvDecoration7', decoration7)
   Vue.component('dvDecoration8', decoration8)
+  Vue.component('dvDecoration9', decoration9)
+  Vue.component('dvDecoration10', decoration10)
 
   // charts
   Vue.component('dvCharts', charts)
@@ -63,7 +71,8 @@ export default function (Vue) {
   Vue.component('dvWaterLevelPond', waterLevelPond)
   Vue.component('dvPercentPond', percentPond)
   Vue.component('dvFlylineChart', flylineChart)
+  Vue.component('dvConicalColumnChart', conicalColumnChart)
   Vue.component('dvDigitalFlop', digitalFlop)
-
   Vue.component('dvScrollBoard', scrollBoard)
+  Vue.component('dvScrollRankingBoard', scrollRankingBoard)
 }

components/scrollBoard/index.vue

@@ -24,7 +24,7 @@
       <div
         class="row-item"
         v-for="(row, ri) in rows"
-        :key="row.toString() + row.rowIndex"
+        :key="row.toString() + row.scroll"
         :style="`
           height: ${heights[ri]}px;
           line-height: ${heights[ri]}px;
@@ -78,7 +78,6 @@ export default {
          * @description Board data
          * @type {Array<Array>}
          * @default data = []
-         * @example header = [['column1Row1', 'column2Row1', 'column3Row1']]
          */
         data: [],
         /**
@@ -232,7 +231,7 @@ export default {
       this.header = header
     },
     calcRowsData () {
-      let { data, index, headerBGC } = this.mergedConfig
+      let { data, index, headerBGC, rowNum } = this.mergedConfig
 
       if (index) {
         data = data.map((row, i) => {
@@ -248,6 +247,14 @@ export default {
 
       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
     },

components/scrollRankingBoard/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="dv-scroll-ranking-board" :ref="ref">
+    <div
+      class="row-item"
+      v-for="(item, i) in rows"
+      :key="item.toString() + item.scroll"
+      :style="`height: ${heights[i]}px;`"
+    >
+      <div class="ranking-info">
+        <div class="rank">No.{{ item.ranking }}</div>
+        <div class="info-name">{{ item.name }}</div>
+        <div class="ranking-value">{{ item.value }}</div>
+      </div>
+
+      <div class="ranking-column">
+        <div
+          class="inside-column"
+          :style="`width: ${item.percent}%;`"
+        >
+          <div class="shine" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import autoResize from '../../mixins/autoResize.js'
+
+import { deepMerge } from '@jiaminghi/charts/lib/util/index'
+
+import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
+
+export default {
+  name: 'ScrollRankingBoard',
+  mixins: [autoResize],
+  props: {
+    config: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data () {
+    return {
+      ref: 'scroll-ranking-board',
+
+      defaultConfig: {
+        /**
+         * @description Board data
+         * @type {Array<Object>}
+         * @default data = []
+         */
+        data: [],
+        /**
+         * @description Row num
+         * @type {Number}
+         * @default rowNum = 5
+         */
+        rowNum: 5,
+        /**
+         * @description Scroll wait time
+         * @type {Number}
+         * @default waitTime = 2000
+         */
+        waitTime: 2000,
+        /**
+         * @description Carousel type
+         * @type {String}
+         * @default carousel = 'single'
+         * @example carousel = 'single' | 'page'
+         */
+        carousel: 'single'
+      },
+
+      mergedConfig: null,
+
+      rowsData: [],
+
+      rows: [],
+
+      heights: [],
+
+      animationIndex: 0,
+
+      animationHandler: ''
+    }
+  },
+  watch: {
+    config () {
+      const { stopAnimation, calcData } = this
+
+      stopAnimation()
+
+      calcData()
+    }
+  },
+  methods: {
+    afterAutoResizeMixinInit () {
+      const { calcData } = this
+
+      calcData()
+    },
+    onResize () {
+      const { mergedConfig, calcHeights } = this
+
+      if (!mergedConfig) return
+
+      calcHeights(true)
+    },
+    calcData () {
+      const { mergeConfig, calcRowsData } = this
+
+      mergeConfig()
+
+      calcRowsData()
+
+      const { calcHeights } = this
+
+      calcHeights()
+
+      const { animation } = this
+
+      animation(true)
+    },
+    mergeConfig () {
+      let { config, defaultConfig } = this
+
+      this.mergedConfig = deepMerge(deepClone(defaultConfig, true), config || {})
+    },
+    calcRowsData () {
+      let { data, rowNum } = this.mergedConfig
+
+      data.sort(({ value: a }, { value: b }) => {
+        if (a > b) return -1
+        if (a < b) return 1
+        if (a === b) return 0
+      })
+
+      const value = data.map(({ value }) => value)
+
+      const max = Math.max(...value) || 0
+
+      data = data.map((row, i) => ({ ...row, ranking: i + 1, percent: row.value / max * 100 }))
+
+      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
+    },
+    calcHeights (onresize = false) {
+      const { height, mergedConfig } = this
+
+      const { rowNum, data } = mergedConfig
+
+      const avgHeight = height / rowNum
+
+      this.avgHeight = avgHeight
+
+      if (!onresize) this.heights = new Array(data.length).fill(avgHeight)
+    },
+    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)
+    }
+  },
+  destroyed () {
+    const { stopAnimation } = this
+
+    stopAnimation()
+  }
+}
+</script>
+
+<style lang="less">
+@color: #1370fb;
+
+.dv-scroll-ranking-board {
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  overflow: hidden;
+
+  .row-item {
+    transition: all 0.3s;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  .ranking-info {
+    display: flex;
+    width: 100%;
+    font-size: 13px;
+
+    .rank {
+      width: 40px;
+      color: @color;
+    }
+
+    .info-name {
+      flex: 1;
+    }
+  }
+
+  .ranking-column {
+    border-bottom: 2px solid fade(@color, 50);
+    margin-top: 5px;
+
+    .inside-column {
+      position: relative;
+      height: 6px;
+      background-color: @color;
+      margin-bottom: 2px;
+      border-radius: 1px;
+      overflow: hidden;
+    }
+
+    .shine {
+      position: absolute;
+      left: 0%;
+      top: 2px;
+      height: 2px;
+      width: 50px;
+      transform: translateX(-100%);
+      background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
+      animation: shine 3s ease-in-out infinite;
+    }
+  }
+}
+
+@keyframes shine {
+  85% {
+    left: 0%;
+    transform: translateX(-100%);
+  }
+
+  100% {
+    left: 100%;
+    transform: translateX(0%);
+  }
+}
+</style>

components/waterLevelPond/index.vue

@@ -266,7 +266,7 @@ export default {
       const firstPoint = points[0]
       const lastPoint = points.slice(-1)[0]
 
-      const [w, h] = area
+      const h = area[1]
 
       ctx.lineTo(lastPoint[0], h)
       ctx.lineTo(firstPoint[0], h)
@@ -285,8 +285,6 @@ export default {
       const w = render.area[0]
 
       waves.forEach(graph => {
-        const reset = repeat % 2 === 0
-
         graph.attr('style', { translate: [0, 0] })
 
         graph.animation('style', {
@@ -309,7 +307,7 @@ export default {
     init()
   },
   beforeDestroy () {
-    const { calcData, render } = this
+    const { render } = this
 
     render.delAllGraph()
 

mixins/autoResize.js

@@ -54,7 +54,7 @@ export default {
       window.addEventListener('resize', debounceInitWHFun)
     },
     unbindDomResizeCallback () {
-      const { domObserver, debounceInitWHFun } = this
+      let { domObserver, debounceInitWHFun } = this
 
       domObserver.disconnect()
       domObserver.takeRecords()
@@ -68,9 +68,9 @@ export default {
 
     autoResizeMixinInit()
   },
-  beforeDestroyed () {
+  beforeDestroy () {
     const { unbindDomResizeCallback } = this
 
     unbindDomResizeCallback()
   }
-}
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jiaminghi/data-view",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "author": "JiaMing <743192023@qq.com>",
   "description": "Vue Large screen data display component library",
   "main": "index.js",

util/index.js

@@ -36,4 +36,4 @@ export function getPointDistance (pointOne, pointTwo) {
   const minusY = Math.abs(pointOne[1] - pointTwo[1])
 
   return Math.sqrt(minusX * minusX + minusY * minusY)
-}
+}