vue圆形进度条组件
Vue-椭圆进展 (vue-ellipse-progress)
A dependency-free Vue.js plugin to create beautiful and animated circular progress bars, implemented with SVG. The purpose of this plugin is to combine the best properties of other available libraries and to add unique features, delivered in a simple to use component with friendly interface.
无依赖项的Vue.js插件可创建精美的动画圆形进度条，并通过SVG实现。 该插件的目的是结合其他可用库的最佳属性，并添加独特的功能，这些功能通过具有友好界面的易于使用的组件提供。
With the available options you can create simple circles very quickly. But playing with the combinations of props and with a bit of imagination you can create really exciting things.
使用可用的选项，您可以非常快速地创建简单的圆圈。 但是，结合各种道具和一些想象力，您可以创造出真正令人兴奋的东西。
View Demo 查看演示 View Github 查看Github
用法 (Usage)
Install the library via npm:
通过npm安装库：
npm i vue-ellipse-progress
The component is provided as a Vue.js plugin. So just initialize it in yourmain.js:
该组件作为Vue.js插件提供。 因此，只需在main.js对其进行初始化：
import VueEllipseProgress from vue-ellipse-progress;Vue.use(VueEllipseProgress);// Vue.use(VueEllipseProgress, "vep"); you can define a name and use the plugin like <vep/>
Now use the component:
现在使用组件：
<vue-ellipse-progress :data="circles":progress="progress":angle="-90"color="blue":colorFill="colorFillGradient"emptyColor="#8ec5fc":emptyColorFill="emptyColorFillGradient" :size="300":thickness="10"emptyThickness="10%"lineMode="in 10":legend="true":legendValue="180"legendClass="legend-custom-style"dash="60 0.9"animation="reverse 700 400":noData="false":loading="false" fontColor="white":half="false":gap="10"dot="10 blue"fontSize="5rem"><span slot="legend-value">/200</span><p slot="legend-caption">GOOD JOB</p></vue-ellipse-progress>
选件 (Options)
You are ready to go with just following line:
您可以按照以下步骤进行操作：
<vue-ellipse-progress :progress="progress"/>
Theprogressis the only required property. However, in order to create unique circles that match your design needs, you can use all the properties explained below.
progress是唯一必需的属性。 但是，为了创建符合您的设计需求的独特圆，可以使用下面说明的所有属性。
This table below provides a quick overview over all available options. To gain more information in general and concerning the creation of exclusive circles please read below the table.
下表提供了所有可用选项的快速概述。 要获得一般性信息以及有关创建专属圈子的更多信息，请阅读下表。
:grey_exclamation: Also make sure to checkslot options
：grey_exclamation：还要确保检查插槽选项
