一个vue 简单图表插件,目前支持
1.弧形进度(仪表盘)
2.线进度
3.饼图
$ npm install vue-progresschart
$ yarn add vue-progresschart
<template>
<progresschart/>
...
</template>
组件内引入
import { progresschart } from "vue-progresschart";
...
components: {
progresschart
},
全局引入
import progresschart from "vue-progresschart";
Vue.use(progresschart)
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
| 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%'] |