vue-progresschart

一个vue 简单图表插件,目前支持
1.弧形进度(仪表盘)
2.线进度
3.饼图

Installation

$ npm install vue-progresschart
$ yarn add vue-progresschart

Usage

<template>
   <progresschart/>
   ...
</template>

组件内引入
import { progresschart } from "vue-progresschart";
 ...
components: {
   progresschart
},
 
全局引入
import progresschart from "vue-progresschart";
Vue.use(progresschart)

API

| 参数 | 说明 | 类型 | 可选值 |默认值 | |--------|:-------:|------:|------:|------:| | duration | 完成动画(毫秒) | Number| --| 3000| | type | 图表类型 | String| circle / line / pie | circle| | percent |目标进度 | Number| --| 100| | fontSize |字体大小 | Number| --| 24| | fontColor |字体颜色 | String| --| #fff| | progressShow |是否显示进度字体 | Boolean| true / false | false| | lineWidth |厚度 | Number| --| 8| | bgImg |背景渐变图片 | String| --| --| | bgColor |进度颜色| Array|--| ['red', 'yellow']| | rotate |开始角度 | Number|--| 130| | arcEndeg |空缺角度 | Number|--| 0| | timingFunction |速度曲线 | String|easeOut / easeIn / easeInOut| easeInOut| | lineCap |结束线帽 | String| butt / round / square| round| | defaultBg |背景颜色 | String|--| --| | data |饼图数据 | Array|[{value: 数字, name:'名字', color:'背景颜色'}]| --| | pieDeviation | 饼图 点中区域 偏移值 | Number|--| 10| | html | htmlDom | String|--| --| | position | html内容位置 | Array|--| ['50%', '50%']|