master

分支 (1)

管理

管理

master

progressbar
/
index.html

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no" />
    <meta name="wap-font-scale"  content="no" />
    <meta name="viewport" content="user-scalable=no, width=device-width" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>AXUI斧子前端框架，面向设计的自主国产前端框架</title>
    <meta name="description" content="AXUI，面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。能用css写的不用js；能用js写的不用插件；能用插件的不重复使用插件。通过观察本框架的核心文件会发现核心文件只有ax.css和ax.js，加载速度飞快。">
    <meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师">
    <link href="ax.css" rel="stylesheet" type="text/css" >
<style type="text/css">
    .outer{
        width:1000px;
        margin:0 auto;
    }
    /*手机+平板竖*/
    @media screen and (max-width: 900px) {
        .outer{
            width:calc(100% - 28px);
        }
    }
    </style>
<body>

<div class="outer">
    <h1>percentBar.js进度条</h1>
    <h4>percentBar.js在<a href="http://www.axui.cn" target="_blank" class="ax-color-primary">AXUI框架</a>预览地址：<a href="http://www.axui.cn/ax-echarts.php#percentBar" target="_blank">http://axui.cn/ax-echarts.php#percentBar</a></h4>
    <h4>本框架为基于echarts制作了一个进度条插件，可以结合AXUI框架使用，基本用法如下：</h4>
    <div id="progress" style="height:120px;"></div>
    <div class="ax-break-xl"></div><div class="ax-break-xl"></div>
    <h4>当然用户可根据API制作更多效果，演示和参数如下：</h4>
    <div id="progress01" style="height:120px;"></div>
    <div class="ax-break-xxl"></div>
    <div class="ax-break-line"></div>
    <div class="ax-break-xxl"></div>
    <div id="progress02" style="height:120px;"></div>

    <div class="ax-break-xxl"></div>
    <div class="ax-break-line"></div>
    <div class="ax-break-xxl"></div>
    <div id="progress03" style="height:120px;"></div>
    <div class="ax-break-xxl"></div>
    <div class="ax-break-line"></div>
    <div class="ax-break-xxl"></div>
    <div id="progress04" style="height:120px;"></div>
    <div class="ax-break-xxl"></div>
    <div class="ax-break-line"></div>
    <div class="ax-break-xxl"></div>
    <div id="progress05" style="height:120px;"></div>
    <div class="ax-break-xxl"></div>
    <div class="ax-break-line"></div>
    <div class="ax-break-xxl"></div>
    <div id="progress06" style="height:120px;"></div>

    <div class="ax-break-xl"></div><div class="ax-break-xl"></div>
    <h4>参数汇总</h4>
    <table class="ax-table ax-border ax-align-left">
        <thead>
        <tr>
            <th width="15%">名称</th>
            <th width="30%">说明</th>
            <th width="15%">类型</th>
            <th width="15%">默认值</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>titleColor</td>
            <td>头文字颜色</td>
            <td>string</td>
            <td>#666666</td>
        </tr>
        <tr>
            <td>startColor</td>
            <td>进度条起点颜色</td>
            <td>string</td>
            <td>#6619ff</td>
        </tr>
        <tr>
            <td>endColor</td>
            <td>进度条终点颜色</td>
            <td>string</td>
            <td>#198cff</td>
        </tr>
        <tr>
            <td>trackColor</td>
            <td>轨道颜色</td>
            <td>string</td>
            <td>#ebebeb</td>
        </tr>
        <tr>
            <td>maxColor</td>
            <td>极限文字颜色</td>
            <td>string</td>
            <td>#666666</td>
        </tr>
        <tr>
            <td>labelColor</td>
            <td>指示文字颜色</td>
            <td>string</td>
            <td>#198cff</td>
        </tr>
        <tr>
            <td>fontSize</td>
            <td>文字大小</td>
            <td>number</td>
            <td>14</td>
        </tr>
        <tr>
            <td>labelFont</td>
            <td>指示字体</td>
            <td>string</td>
            <td>"Oswald Light","微软雅黑","microsoft yahei","Arial"（Oswald Light是本框架内置字体）</td>
        </tr>
        <tr>
            <td>lineHeight</td>
            <td>文字行高</td>
            <td>number</td>
            <td>28</td>
        </tr>
        <tr>
            <td>formatter</td>
            <td>指示文字格式，默认{c}{a}即是：数值+名称</td>
            <td>function</td>
            <td>{c}{a}</td>
        </tr>
        <tr>
            <td>name</td>
            <td>进度条名称，本插件将name值用于formatter组合</td>
            <td>string</td>
            <td>%</td>
        </tr>
        <tr>
            <td>barWidth</td>
            <td>进度条宽度</td>
            <td>number</td>
            <td>6</td>
        </tr>
        <tr>
            <td>yData</td>
            <td>头文字数组，格式：['','','']</td>
            <td>array</td>
            <td>-</td>
        </tr>
        <tr>
            <td>labelData</td>
            <td>指示文字数组，格式：['','','']</td>
            <td>array</td>
            <td>-</td>
        </tr>
        <tr>
            <td>maxData</td>
            <td>极限文字数组，格式：['','','']</td>
            <td>array</td>
            <td>[100,100,100]</td>
        </tr>

        <tr>
            <td>leftGap</td>
            <td>左侧边距，默认值是四个字符的宽度+5px</td>
            <td>number</td>
            <td>61</td>
        </tr>
        <tr>
            <td>rightGap</td>
            <td>右侧边距，默认值是三个字符的宽度</td>
            <td>number</td>
            <td>42</td>
        </tr>
        <tr>
            <td>position</td>
            <td>进度条相对文字的位置，默认是在下方bottom，可选top和middle</td>
            <td>string</td>
            <td>bottom</td>
        </tr>
        <tr>
            <td>follow</td>
            <td>进度条上是否显示指示标签，默认不显示</td>
            <td>boolean</td>
            <td>false</td>
        </tr>
        </tbody>
    </table>
    <div class="ax-break-xl"></div><div class="ax-break-xl"></div>
    <div align="center"><a href="http://www.axui.cn" target="_blank" class="ax-color-primary">Axui.cn</a> 版权所有<br />技术QQ群：952502085 <a href="https://github.com/axui/progressbar" target="_blank" rel="nofollow" >Github</a> <a href="https://gitee.com/axui/progressbar" target="_blank" rel="nofollow" >码云</a><br />AXUI，面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API</div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.8.0/echarts.min.js" type="text/javascript"></script>
<script src="percentBar.js" type="text/javascript"></script>
<script type='text/javascript'>
    //进度条
    var optionProgress = {
        yData:['绿化率','就业率','土地使用率'],
        labelData:[36,49,70],
        domEle:document.getElementById("progress")
    };
    var progress = new PercentBar(optionProgress);
    progress.init();
    //进度条，跟随的标签
    var optionProgress01 = {
        yData:['绿化率','就业率','土地使用率'],
        labelData:[36,49,70],
        follow:true,
        domEle:document.getElementById("progress01")
    };
    var progress01 = new PercentBar(optionProgress01);
    progress01.init();

    //进度条，进度条在上方
    var optionProgress02 = {
        yData:['绿化率','就业率','土地使用率'],
        labelData:[36,49,70],
        position:'top',
        domEle:document.getElementById("progress02")
    };
    var progress02 = new PercentBar(optionProgress02);
    progress02.init();
    //进度条，进度条居中
    var optionProgress03 = {
        yData:['绿化率','就业率','土地使用率'],
        labelData:[36,49,70],
        position:'middle',
        leftGap:80,
        domEle:document.getElementById("progress03")
    };
    var progress03 = new PercentBar(optionProgress03);
    progress03.init();
    //进度条，自定义文字
    var optionProgress04 = {
        name:'人',
        yData:['在职老师','在校学生','市局领导'],
        labelData:[53,124,13],
        maxData:[200,200,200],
        position:'middle',
        rightGap:40,
        domEle:document.getElementById("progress04")
    };
    var progress04 = new PercentBar(optionProgress04);
    progress04.init();
    //进度条，居中跟随
    var optionProgress05 = {
        name:'人',
        yData:['在职老师','在校学生','市局领导'],
        labelData:[53,124,13],
        maxData:[200,200,200],
        position:'middle',
        follow:true,
        domEle:document.getElementById("progress05")
    };
    var progress05 = new PercentBar(optionProgress05);
    progress05.init();

    //进度条，改变颜色
    var optionProgress06 = {
        yData:['绿化率','就业率','土地使用率'],
        labelData:[36,49,100],
        leftGap:80,
        startColor:'#b2d956',
        endColor:'#41a358',
        domEle:document.getElementById("progress06")
    };
    var progress06 = new PercentBar(optionProgress06);
    progress06.init();
</script>
</body>
</html>