add percent pond component

src/components/index.js

@@ -11,6 +11,7 @@ import decoration2 from './decoration2/index'
 import decoration3 from './decoration3/index'
 import decoration4 from './decoration4/index'
 import decoration5 from './decoration5/index'
+import loading from './loading/index.vue'
 
 import capsuleChart from './capsuleChart/index.vue'
 import ringChart from './ringChart/index.vue'
@@ -20,11 +21,9 @@ import arcRingChart from './arcRingChart/index.vue'
 import radarChart from './radarChart/index.vue'
 
 import numberShow from './numberShow/index.vue'
-
+import percentPond from './percentPond/index.vue'
 import scrollBoard from './scrollBoard/index.vue'
 
-import loading from './loading/index.vue'
-
 import highlightCode from './highlightCode'
 
 export default function (Vue) {
@@ -41,6 +40,7 @@ export default function (Vue) {
   Vue.component('decoration3', decoration3)
   Vue.component('decoration4', decoration4)
   Vue.component('decoration5', decoration5)
+  Vue.component('loading', loading)
 
   Vue.component('capsuleChart', capsuleChart)
   Vue.component('polylineChart', polylineChart)
@@ -50,7 +50,8 @@ export default function (Vue) {
   Vue.component('radarChart', radarChart)
 
   Vue.component('numberShow', numberShow)
+  Vue.component('percentPond', percentPond)
   Vue.component('scrollBoard', scrollBoard)
-  Vue.component('loading', loading)
+
   Vue.component('highlightCode', highlightCode)
 }

src/components/percentPond/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="percent-pond">
+    <div class="percent-text">
+      <span :style="`margin-left: ${percent * (width - 2) / 100 + 6}px`">{{ percent || 0 }}%</span>
+    </div>
+
+    <div class="percent-container">
+      <div class="p-decoration-box" />
+      <div class="p-svg-container" :ref="ref">
+        <svg :width="width" :height="height">
+          <defs>
+            <linearGradient id="linear">
+              <stop v-for="lc in linearGradient" :key="lc[0]"
+                :offset="lc[0]"
+                :stop-color="lc[1]" />
+            </linearGradient>
+          </defs>
+
+          <polyline :stroke-width="height - 1"
+            stroke="url(#linear)"
+            :points="`1, ${height * 0.5} ${percent * (width - 2) / 100}, ${height * 0.5 + 0.0001}`" />
+        </svg>
+      </div>
+      <div class="p-decoration-box" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PercentPond',
+  props: ['percent', 'colors'],
+  data () {
+    return {
+      ref: `percent-pond-${(new Date()).getTime()}`,
+      width: 0,
+      height: 0,
+
+      defaultColor: ['#00BAFF', '#3DE7C9'],
+
+      linearGradient: []
+    }
+  },
+  watch: {
+    colors () {
+      const { calcLinearColor } = this
+
+      calcLinearColor()
+    }
+  },
+  methods: {
+    init () {
+      const { $nextTick, $refs, ref, calcLinearColor } = this
+
+      $nextTick(e => {
+        this.width = $refs[ref].clientWidth
+        this.height = $refs[ref].clientHeight
+      })
+
+      calcLinearColor()
+    },
+    calcLinearColor () {
+      const { colors, defaultColor } = this
+
+      let trueColor = colors || defaultColor
+
+      typeof trueColor === 'string' && (trueColor = [trueColor, trueColor])
+
+      const colorNum = trueColor.length
+
+      const colorOffsetGap = 100 / (colorNum - 1)
+
+      this.linearGradient = trueColor.map((c, i) => [colorOffsetGap * i, c])
+    }
+  },
+  mounted () {
+    const { init } = this
+
+    init()
+  }
+}
+</script>
+
+<style lang="less">
+.percent-pond {
+  display: flex;
+  flex-direction: column;
+
+  .percent-text {
+    height: 30px;
+    font-size: 15px;
+    flex-shrink: 0;
+
+    span {
+      position: relative;
+      box-shadow: 0 0 3px gray;
+      padding: 0px 5px;
+      display: inline-block;
+      transform: translateX(-50%);
+
+      &::after {
+        position: absolute;
+        display: block;
+        left: 50%;
+        transform: translateX(-50%);
+        content: '';
+        width: 0px;
+        height: 0px;
+        border-width: 8px;
+        border-style: solid;
+        border-color: fade(gray, 50) transparent transparent transparent;
+      }
+    }
+  }
+
+  .percent-container {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+
+    .p-decoration-box {
+      width: 3px;
+      flex-shrink: 0;
+      box-shadow: 0 0 3px gray;
+    }
+
+    .p-svg-container {
+      flex: 1;
+      margin: 0px 3px;
+      box-shadow: 0 0 3px gray;
+
+      polyline {
+        fill: none;
+        stroke-dasharray: 5, 1;
+      }
+    }
+  }
+}
+</style>