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