percentBar.js进度条
本框架为基于echarts制作了一个进度条插件,可以结合AXUI框架使用,基本用法如下:
当然用户可根据API制作更多效果,演示和参数如下:
参数汇总
| 名称 |
说明 |
类型 |
默认值 |
| titleColor |
头文字颜色 |
string |
#666666 |
| startColor |
进度条起点颜色 |
string |
#6619ff |
| endColor |
进度条终点颜色 |
string |
#198cff |
| trackColor |
轨道颜色 |
string |
#ebebeb |
| maxColor |
极限文字颜色 |
string |
#666666 |
| labelColor |
指示文字颜色 |
string |
#198cff |
| fontSize |
文字大小 |
number |
14 |
| labelFont |
指示字体 |
string |
"Oswald Light","微软雅黑","microsoft yahei","Arial"(Oswald Light是本框架内置字体) |
| lineHeight |
文字行高 |
number |
28 |
| formatter |
指示文字格式,默认{c}{a}即是:数值+名称 |
function |
{c}{a} |
| name |
进度条名称,本插件将name值用于formatter组合 |
string |
% |
| barWidth |
进度条宽度 |
number |
6 |
| yData |
头文字数组,格式:['','',''] |
array |
- |
| labelData |
指示文字数组,格式:['','',''] |
array |
- |
| maxData |
极限文字数组,格式:['','',''] |
array |
[100,100,100] |
| leftGap |
左侧边距,默认值是四个字符的宽度+5px |
number |
61 |
| rightGap |
右侧边距,默认值是三个字符的宽度 |
number |
42 |
| position |
进度条相对文字的位置,默认是在下方bottom,可选top和middle |
string |
bottom |
| follow |
进度条上是否显示指示标签,默认不显示 |
boolean |
false |
Axui.cn 版权所有
技术QQ群:952502085
Github 码云AXUI,面向设计,满足设计多样化需求的前端解决方案,减少或剔除JS文件资源和API