From 0264b7c4fd932a9957eb317324dcdfafa65fa28a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Wed, 4 Sep 2019 18:15:20 +0800
Subject: [PATCH] Circle prop:strokeColor support Array to support gradient
 ramp

---
 examples/routers/circle.vue      |  4 ++++
 src/components/circle/circle.vue | 26 ++++++++++++++++++++++++--
 src/utils/random_str.js          | 10 ++++++++++
 3 files changed, 38 insertions(+), 2 deletions(-)
 create mode 100644 src/utils/random_str.js

diff --git a/examples/routers/circle.vue b/examples/routers/circle.vue
index ce4ae927..c9b3b057 100644
--- a/examples/routers/circle.vue
+++ b/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>
diff --git a/src/components/circle/circle.vue b/src/components/circle/circle.vue
index 3a36d688..244e460c 100644
--- a/src/components/circle/circle.vue
+++ b/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';
             }
         }
     };
diff --git a/src/utils/random_str.js b/src/utils/random_str.js
new file mode 100644
index 00000000..d9b5838e
--- /dev/null
+++ b/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;
+}