Progress: add dashboard progress bar & add custom color (#11867)

examples/docs/en-US/progress.md

@@ -2,29 +2,100 @@
 
 Progress is used to show the progress of current operation, and inform the user the current status.
 
-### Linear progress bar (external percentage)
+### Linear progress bar
 
-:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`.
+:::demo Use `percentage` attribute to set the percentage. It's **required** and must be between `0-100`. You can custom text format by setting `format`.
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### Linear progress bar (internal percentage)
+### Internal percentage
 
 In this case the percentage takes no additional space.
 
 :::demo `stroke-width` attribute decides the `width` of progress bar, and use `text-inside` attribute to put description inside the progress bar.
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Custom color
+
+You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#909399';
+        } else if (percentage < 70) {
+          return '#e6a23c';
+        } else {
+          return '#67c23a';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -34,20 +105,68 @@ In this case the percentage takes no additional space.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
-``` 
+```
+:::
+
+### Dashboard progress bar
+
+You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+
+:::demo
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
 :::
 
 ### Attributes
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 | --- | ---- | ---- | ---- | ---- |
 | **percentage** | percentage, **required** | number | 0-100 | 0 |
-| type | the type of progress bar | string | line/circle | line |
+| type | the type of progress bar | string | line/circle/dashboard | line |
 | stroke-width | the width of progress bar | number | — | 6 |
 | text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
-| status | the current status of progress bar | string | success/exception | — |
-| color  | background color of progress bar. Overrides `status` prop | string | — | — |
+| status | the current status of progress bar | string | success/exception/warning | — |
+| color  | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
 | width | the canvas width of circle progress bar | number | — | 126 |
 | show-text | whether to show percentage | boolean | — | true |

examples/docs/es/progress.md

@@ -1,28 +1,100 @@
 ## Progreso
 Progreso es usado para mostrar el estado de la operación actual e informar al usuario acerca de ésta.
 
-### Barra de progreso lineal (porcentage externo)
+### Barra de progreso lineal
+
+:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`. You can custom text format by setting `format`.
 
-:::demo Usa el atributo `percentage` para asignar el porcentage. Este es **requerido** y tiene que ser un valor entre `0-100`.
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### Barra de progreso lineal (porcentage interno)
+### Pporcentage interno
 En este caso el porcentage no toma espacio adicional.
 
 :::demo El atributo `stroke-width` decide el ancho de la barra de progreso, y usa el atributo `text-inside` para poner la descripción dentro de la misma.
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Custom color
+
+You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#909399';
+        } else if (percentage < 70) {
+          return '#e6a23c';
+        } else {
+          return '#67c23a';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -32,20 +104,67 @@ En este caso el porcentage no toma espacio adicional.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
 :::
 
+### Dashboard progress bar
+
+:::demo You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Atributos
 | Atributo     | Descripción                              | Tipo    | Valores aceptado  | Por defecto |
 | ------------ | ---------------------------------------- | ------- | ----------------- | ----------- |
 | percentage   | porcentaje, requerido                    | number  | 0-100             | 0           |
-| type         | tipo de barra de progreso                | string  | line/circle       | line        |
+| type         | tipo de barra de progreso                | string  | line/circle/dashboard  | line   |
 | stroke-width | ancho de la barra de progreso            | number  | —                 | 6           |
 | text-inside  | mostrar el porcentaje dentro de la barra de progreso, solo funciona cuando `type` es 'line' | boolean | —                 | false       |
-| status       | estado actual de la barra de progreso    | string  | success/exception | —           |
-| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string     | — |       — |
+| status       | estado actual de la barra de progreso    | string  | success/exception/warning | —   |
+| color        | color de fondo de la barra de progreso. Sobreescribe la propiedad `status` | string/function/array | — | '' |
 | width        | ancho del canvas que contiene la barra de progreso circula | number  | —                 | 126         |
 | show-text    | mostrar porcentaje                       | boolean | —                 | true        |

examples/docs/fr-FR/progress.md

@@ -2,29 +2,100 @@
 
 Progress est utilisé pour afficher la progression d'une opération et informer l'utilisateur de son status actuel.
 
-### Barre de progression linéaire (pourcentage externe)
+### Barre de progression linéaire
 
-:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100.
+:::demo Utilisez l'attribut `percentage` pour indiquer le pourcentage. Cet attribut est **requis** et doit être compris entre 0 et 100. You can custom text format by setting `format`.
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? 'Full' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### Barre de progression linéaire (pourcentage interne)
+### Pourcentage interne
 
 Dans ce cas le pourcentage ne prends pas de place en plus.
 
 :::demo L'attribut `stroke-width` détermine le `width` de la barre de progression. Utilisez `text-inside` mettre la description à l'intérieur de la barre.
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### Custom color
+
+You can use `color` attr to set the progress bar color. it accepts color string, function, or array.
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#909399';
+        } else if (percentage < 70) {
+          return '#e6a23c';
+        } else {
+          return '#67c23a';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -34,10 +105,57 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
-<el-progress type="circle" :percentage="100" status="text">Terminé</el-progress>
+```
+:::
+
+### Dashboard progress bar
+
+You also can specify `type` attribute to `dashboard` to use dashboard progress bar.
+
+:::demo
+
+```html
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -46,10 +164,10 @@ Dans ce cas le pourcentage ne prends pas de place en plus.
 | Attribut      | Description          | Type      | Valeurs acceptées       | Défaut  |
 | --- | ---- | ---- | ---- | ---- |
 | **percentage** | Le pourcentage, **requis**. | number | 0-100 | 0 |
-| type | Le type de barre. | string | line/circle | line |
+| type | Le type de barre. | string | line/circle/dashboard | line |
 | stroke-width | La largeur de la barre. | number | — | 6 |
 | text-inside | Si le pourcentage doit être à l'intérieur de la barre, ne marche que si `type` est 'line'. | boolean | — | false |
 | status | Le statut actuel de la progression. | string | success/exception/text | — |
-| color  | La couleur de fon de la barre. Écrase `status`. | string | — | — |
+| color  | La couleur de fon de la barre. Écrase `status`. | string/function/array | — | '' |
 | width | La largeur du canvas dans le cas d'une barre circulaire. | number | — | 126 |
 | show-text | Si le pourcentage doit être affiché. | boolean | — | true |

examples/docs/zh-CN/progress.md

@@ -2,55 +2,175 @@
 
 用于展示操作进度，告知用户当前状态和预期。
 
-### 线形进度条 — 百分比外显
+### 线形进度条
 
-:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。
+:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。通过 `format` 属性来指定进度条文字内容。
 
 ```html
-<el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70"></el-progress>
-<el-progress :percentage="80" color="#8e71c7"></el-progress>
+<el-progress :percentage="50"></el-progress>
+<el-progress :percentage="100" :format="format"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
+<el-progress :percentage="100" status="warning"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
+
+<script>
+  export default {
+    methods: {
+      format(percentage) {
+        return percentage === 100 ? '满' : `${percentage}%`;
+      }
+    }
+  };
+</script>
 ```
 :::
 
-### 线形进度条 — 百分比内显
+### 百分比内显
 
 百分比不占用额外控件，适用于文件上传等场景。
 
 :::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `text-inside` 属性来将进度条描述置于进度条内部。
 
 ```html
-<el-progress :text-inside="true" :stroke-width="18" :percentage="0"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="70"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="80" color="rgba(142, 113, 199, 0.7)"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="100" status="success"></el-progress>
-<el-progress :text-inside="true" :stroke-width="18" :percentage="50" status="exception"></el-progress>
+<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress>
+<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress>
+<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress>
+<el-progress :text-inside="true" :stroke-width="20" :percentage="50" status="exception"></el-progress>
+```
+:::
+
+### 自定义颜色
+
+可以通过 `color` 设置进度条的颜色，`color` 可以接受颜色字符串，函数和数组。
+
+:::demo
+
+```html
+<el-progress :percentage="percentage" :color="customColor"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColorMethod"></el-progress>
+
+<el-progress :percentage="percentage" :color="customColors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 20,
+        customColor: '#409eff',
+        customColors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      customColorMethod(percentage) {
+        if (percentage < 30) {
+          return '#909399';
+        } else if (percentage < 70) {
+          return '#e6a23c';
+        } else {
+          return '#67c23a';
+        }
+      },
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
 ```
 :::
 
 ### 环形进度条
 
-:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。
+
+:::demo
 
 ```html
 <el-progress type="circle" :percentage="0"></el-progress>
 <el-progress type="circle" :percentage="25"></el-progress>
-<el-progress type="circle" :percentage="80" color="#8e71c7"></el-progress>
 <el-progress type="circle" :percentage="100" status="success"></el-progress>
+<el-progress type="circle" :percentage="70" status="warning"></el-progress>
 <el-progress type="circle" :percentage="50" status="exception"></el-progress>
 ```
 :::
 
+### 仪表盘形进度条
+
+:::demo 通过 `type` 属性来指定使用仪表盘形进度条。
+
+```html
+
+<el-progress type="dashboard" :percentage="percentage" :color="colors"></el-progress>
+<div>
+  <el-button-group>
+    <el-button icon="el-icon-minus" @click="decrease"></el-button>
+    <el-button icon="el-icon-plus" @click="increase"></el-button>
+  </el-button-group>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        percentage: 10,
+        colors: [
+          {color: '#f56c6c', percentage: 20},
+          {color: '#e6a23c', percentage: 40},
+          {color: '#5cb87a', percentage: 60},
+          {color: '#1989fa', percentage: 80},
+          {color: '#6f7ad3', percentage: 100}
+        ]
+      };
+    },
+    methods: {
+      increase() {
+        this.percentage += 10;
+        if (this.percentage > 100) {
+          this.percentage = 100;
+        }
+      },
+      decrease() {
+        this.percentage -= 10;
+        if (this.percentage < 0) {
+          this.percentage = 0;
+        }
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |
 |-------------  |---------------- |---------------- |---------------------- |-------- |
-| **percentage** | **百分比（必填）**   | number          |     0-100          |     0    |
-| type          | 进度条类型           | string         | line/circle | line |
+| **percentage** | **百分比（必填）**   | number         |     0-100          |     0    |
+| type          | 进度条类型           | string         | line/circle/dashboard | line |
 | stroke-width  | 进度条的宽度，单位 px | number          | — | 6 |
 | text-inside  | 进度条显示文字内置在进度条内（只在 type=line 时可用） | boolean | — | false |
-| status  | 进度条当前状态 | string | success/exception | — |
-| color  | 进度条背景色（会覆盖 status 状态颜色） | string | — | — |
-| width  | 环形进度条画布宽度（只在 type=circle 时可用） | number |  | 126 |
+| status  | 进度条当前状态 | string | success/exception/warning | — |
+| color  | 进度条背景色（会覆盖 status 状态颜色） | string/function/array | — | '' |
+| width  | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number |  | 126 |
 | show-text  | 是否显示进度条文字内容 | boolean | — | true |

packages/progress/src/progress.vue

@@ -17,14 +17,27 @@
     <div class="el-progress-bar" v-if="type === 'line'">
       <div class="el-progress-bar__outer" :style="{height: strokeWidth + 'px'}">
         <div class="el-progress-bar__inner" :style="barStyle">
-          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{percentage}}%</div>
+          <div class="el-progress-bar__innerText" v-if="showText && textInside">{{content}}</div>
         </div>
       </div>
     </div>
     <div class="el-progress-circle" :style="{height: width + 'px', width: width + 'px'}" v-else>
       <svg viewBox="0 0 100 100">
-        <path class="el-progress-circle__track" :d="trackPath" stroke="#e5e9f2" :stroke-width="relativeStrokeWidth" fill="none"></path>
-        <path class="el-progress-circle__path" :d="trackPath" stroke-linecap="round" :stroke="stroke" :stroke-width="relativeStrokeWidth" fill="none" :style="circlePathStyle"></path>
+        <path
+          class="el-progress-circle__track"
+          :d="trackPath"
+          stroke="#e5e9f2"
+          :stroke-width="relativeStrokeWidth"
+          fill="none"
+          :style="trailPathStyle"></path>
+        <path
+          class="el-progress-circle__path"
+          :d="trackPath"
+          :stroke="stroke"
+          fill="none"
+          stroke-linecap="round"
+          :stroke-width="percentage ? relativeStrokeWidth : 0"
+          :style="circlePathStyle"></path>
       </svg>
     </div>
     <div
@@ -32,7 +45,7 @@
       v-if="showText && !textInside"
       :style="{fontSize: progressTextSize + 'px'}"
     >
-      <template v-if="!status">{{percentage}}%</template>
+      <template v-if="!status">{{content}}</template>
       <i v-else :class="iconClass"></i>
     </div>
   </div>
@@ -44,7 +57,7 @@
       type: {
         type: String,
         default: 'line',
-        validator: val => ['line', 'circle'].indexOf(val) > -1
+        validator: val => ['line', 'circle', 'dashboard'].indexOf(val) > -1
       },
       percentage: {
         type: Number,
@@ -53,7 +66,8 @@
         validator: val => val >= 0 && val <= 100
       },
       status: {
-        type: String
+        type: String,
+        validator: val => ['success', 'exception', 'warning'].indexOf(val) > -1
       },
       strokeWidth: {
         type: Number,
@@ -72,41 +86,65 @@
         default: true
       },
       color: {
-        type: String,
+        type: [String, Array, Function],
         default: ''
-      }
+      },
+      format: Function
     },
     computed: {
       barStyle() {
         const style = {};
         style.width = this.percentage + '%';
-        style.backgroundColor = this.color;
+        style.backgroundColor = this.getCurrentColor(this.percentage);
         return style;
       },
       relativeStrokeWidth() {
         return (this.strokeWidth / this.width * 100).toFixed(1);
       },
+      radius() {
+        if (this.type === 'circle' || this.type === 'dashboard') {
+          return parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
+        } else {
+          return 0;
+        }
+      },
       trackPath() {
-        const radius = parseInt(50 - parseFloat(this.relativeStrokeWidth) / 2, 10);
-
-        return `M 50 50 m 0 -${radius} a ${radius} ${radius} 0 1 1 0 ${radius * 2} a ${radius} ${radius} 0 1 1 0 -${radius * 2}`;
+        const radius = this.radius;
+        const isDashboard = this.type === 'dashboard';
+        return `
+          M 50 50
+          m 0 ${isDashboard ? '' : '-'}${radius}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '-' : ''}${radius * 2}
+          a ${radius} ${radius} 0 1 1 0 ${isDashboard ? '' : '-'}${radius * 2}
+          `;
       },
       perimeter() {
-        const radius = 50 - parseFloat(this.relativeStrokeWidth) / 2;
-        return 2 * Math.PI * radius;
+        return 2 * Math.PI * this.radius;
+      },
+      rate() {
+        return this.type === 'dashboard' ? 0.75 : 1;
+      },
+      strokeDashoffset() {
+        const offset = -1 * this.perimeter * (1 - this.rate) / 2;
+        return `${offset}px`;
+      },
+      trailPathStyle() {
+        return {
+          strokeDasharray: `${(this.perimeter * this.rate)}px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset
+        };
       },
       circlePathStyle() {
-        const perimeter = this.perimeter;
         return {
-          strokeDasharray: `${perimeter}px,${perimeter}px`,
-          strokeDashoffset: (1 - this.percentage / 100) * perimeter + 'px',
-          transition: 'stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease'
+          strokeDasharray: `${this.perimeter * this.rate * (this.percentage / 100) }px, ${this.perimeter}px`,
+          strokeDashoffset: this.strokeDashoffset,
+          transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease'
         };
       },
       stroke() {
         let ret;
         if (this.color) {
-          ret = this.color;
+          ret = this.getCurrentColor(this.percentage);
         } else {
           switch (this.status) {
             case 'success':
@@ -115,6 +153,9 @@
             case 'exception':
               ret = '#ff4949';
               break;
+            case 'warning':
+              ret = '#e6a23c';
+              break;
             default:
               ret = '#20a0ff';
           }
@@ -122,6 +163,9 @@
         return ret;
       },
       iconClass() {
+        if (this.status === 'warning') {
+          return 'el-icon-warning';
+        }
         if (this.type === 'line') {
           return this.status === 'success' ? 'el-icon-circle-check' : 'el-icon-circle-close';
         } else {
@@ -132,6 +176,47 @@
         return this.type === 'line'
           ? 12 + this.strokeWidth * 0.4
           : this.width * 0.111111 + 2 ;
+      },
+      content() {
+        if (typeof this.format === 'function') {
+          return this.format(this.percentage) || '';
+        } else {
+          return `${this.percentage}%`;
+        }
+      }
+    },
+    methods: {
+      getCurrentColor(percentage) {
+        if (typeof this.color === 'function') {
+          return this.color(percentage);
+        } else if (typeof this.color === 'string') {
+          return this.color;
+        } else {
+          return this.getLevelColor(percentage);
+        }
+      },
+      getLevelColor(percentage) {
+        const colorArray = this.getColorArray().sort((a, b) => a.percentage - b.percentage);
+
+        for (let i = 0; i < colorArray.length; i++) {
+          if (colorArray[i].percentage > percentage) {
+            return colorArray[i].color;
+          }
+        }
+        return colorArray[colorArray.length - 1].color;
+      },
+      getColorArray() {
+        const color = this.color;
+        const span = 100 / color.length;
+        return color.map((seriesColor, index) => {
+          if (typeof seriesColor === 'string') {
+            return {
+              color: seriesColor,
+              progress: (index + 1) * span
+            };
+          }
+          return seriesColor;
+        });
       }
     }
   };

packages/theme-chalk/src/progress.scss

@@ -20,7 +20,7 @@
     }
   }
 
-  @include m(circle) {
+  @include m((circle,dashboard)) {
     display: inline-block;
 
     .el-progress__text {
@@ -39,6 +39,7 @@
     }
   }
 
+
   @include m(without-text) {
     .el-progress__text {
       display: none;
@@ -68,6 +69,16 @@
     }
   }
 
+  @include when(warning) {
+    .el-progress-bar__inner {
+      background-color: $--color-warning;
+    }
+
+    .el-progress__text {
+      color: $--color-warning;
+    }
+  }
+
   @include when(exception) {
     .el-progress-bar__inner {
       background-color: $--color-danger;

test/unit/specs/progress.spec.js

@@ -1,4 +1,4 @@
-import { createVue, destroyVM } from '../util';
+import { createVue, destroyVM, waitImmediate } from '../util';
 
 describe('Progress', () => {
   let vm;
@@ -78,6 +78,14 @@ describe('Progress', () => {
     }, true);
     expect(vm.$el.classList.contains('el-progress--circle')).to.be.true;
   });
+  it('dashboard', () => {
+    vm = createVue({
+      template: `
+        <el-progress type="dashboard" :percentage="50"></el-progress>
+      `
+    }, true);
+    expect(vm.$el.classList.contains('el-progress--dashboard')).to.be.true;
+  });
   it('width', () => {
     vm = createVue({
       template: `
@@ -103,4 +111,81 @@ describe('Progress', () => {
     }, true);
     expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(0, 0, 0)');
   });
+  it('color is function', async() => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="percentage" :color="customColor"></el-progress>
+      `,
+      data() {
+        return {
+          percentage: 50
+        };
+      },
+      methods: {
+        customColor(percentage) {
+          if (percentage > 50) {
+            return '#13ce66';
+          } else {
+            return '#20a0ff';
+          }
+        },
+        increase() {
+          this.percentage = 60;
+        }
+      }
+    }, true);
+
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
+    vm.increase();
+
+    await waitImmediate();
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
+  });
+
+  it('color is array', async() => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="percentage" :color="colors"></el-progress>
+      `,
+      data() {
+        return {
+          percentage: 50,
+          colors: [
+            {color: '#f56c6c', percentage: 20},
+            {color: '#e6a23c', percentage: 40},
+            {color: '#20a0ff', percentage: 60},
+            {color: '#13ce66', percentage: 80},
+            {color: '#6f7ad3', percentage: 100}
+          ]
+        };
+      },
+      methods: {
+        increase() {
+          this.percentage = 70;
+        }
+      }
+    }, true);
+
+    // #20a0ff
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(32, 160, 255)');
+
+    vm.increase();
+    await waitImmediate();
+    // #13ce66
+    expect(vm.$el.querySelector('.el-progress-bar__inner').style.backgroundColor).to.equal('rgb(19, 206, 102)');
+  });
+
+  it('format content', () => {
+    vm = createVue({
+      template: `
+      <el-progress :percentage="50" :format="format"></el-progress>
+      `,
+      methods: {
+        format(percentage) {
+          return `占比${percentage}%`;
+        }
+      }
+    }, true);
+    expect(vm.$el.querySelector('.el-progress__text').innerHTML).to.equal('占比50%');
+  });
 });

types/progress.d.ts

@@ -21,11 +21,14 @@ export declare class ElProgress extends ElementUIComponent {
   status: ProgressStatus
 
   /** Background color of progress bar. Overrides `status` prop */
-  color: string
+  color: string | Function | Array<string | { color: string, percentage: number }>
 
   /** The canvas width of circle progress bar */
   width: number
 
   /** Whether to show percentage */
   showText: boolean
+
+  /** Template function of the content	*/
+  format(percentage: number): string
 }