Circle prop:strokeColor support Array to support gradient ramp

examples/routers/circle.vue

@@ -15,6 +15,10 @@
         <i-circle :percent="80" dashboard stroke-linecap="square">
             <span class="demo-circle-inner" style="font-size:24px">80%</span>
         </i-circle>
+        <Divider></Divider>
+        <i-circle :percent="80" dashboard stroke-linecap="square" :stroke-color="['#108ee9', '#87d068']">
+            <span class="demo-circle-inner" style="font-size:24px">80%</span>
+        </i-circle>
     </div>
 </template>
 <script>

src/components/circle/circle.vue

@@ -1,8 +1,14 @@
 <template>
     <div :style="circleSize" :class="wrapClasses">
         <svg viewBox="0 0 100 100">
+            <defs v-if="showDefs">
+                <linearGradient :id="id" x1="100%" y1="0%" x2="0%" y2="0%">
+                    <stop offset="0%" :stop-color="strokeColor[0]"></stop>
+                    <stop offset="100%" :stop-color="strokeColor[1]"></stop>
+                </linearGradient>
+            </defs>
             <path :d="pathString" :stroke="trailColor" :stroke-width="trailWidth" :fill-opacity="0" :style="trailStyle" :stroke-linecap="strokeLinecap" />
-            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeColor" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
+            <path :d="pathString" :stroke-linecap="strokeLinecap" :stroke="strokeValue" :stroke-width="computedStrokeWidth" fill-opacity="0" :style="pathStyle" />
         </svg>
         <div :class="innerClasses">
             <slot></slot>
@@ -11,6 +17,7 @@
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
+    import random from '../../utils/random_str';
 
     const prefixCls = 'ivu-chart-circle';
 
@@ -30,7 +37,7 @@
                 default: 6
             },
             strokeColor: {
-                type: String,
+                type: [String, Array],
                 default: '#2d8cf0'
             },
             strokeLinecap: {
@@ -52,6 +59,11 @@
                 default: false
             }
         },
+        data () {
+            return {
+                id: `ivu-chart-circle-${random(3)}`
+            };
+        },
         computed: {
             circleSize () {
                 return {
@@ -112,6 +124,16 @@
             },
             innerClasses () {
                 return `${prefixCls}-inner`;
+            },
+            strokeValue () {
+                let color = this.strokeColor;
+                if (typeof this.strokeColor !== 'string') {
+                    color = `url(#${this.id})`;
+                }
+                return color;
+            },
+            showDefs () {
+                return typeof this.strokeColor !== 'string';
             }
         }
     };

src/utils/random_str.js

@@ -0,0 +1,10 @@
+// 生成随机字符串
+export default function (len = 32) {
+    const $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+    const maxPos = $chars.length;
+    let str = '';
+    for (let i = 0; i < len; i++) {
+        str += $chars.charAt(Math.floor(Math.random() * maxPos));
+    }
+    return str;
+}