水球图

需要先引入相关的CSS和JS文件：

<link rel="stylesheet" type="text/css" href="static/css/aui.min.css"/>

<script src="static/js/aui.min.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/jquery/jquery-2.1.3.min.js" type="text/javascript" charset="utf-8"></script>

<script src="lib/waterbubble/waterbubble.js" type="text/javascript" charset="utf-8"></script>

示例代码

<style>
    body{background: #FFF;}
    .waterbubble-warp{width: 100%; min-height: 265px; text-align: center;}
    #dowebok{margin: 30px auto;}
    .aui-lists{z-index: 1;}
    .aui-list{width: 50%; display: inline-block; vertical-align: top;}
    .aui-list:last-child::after{display: inline-block;}
    .aui-list.col-before::before{height: 60%; top: 20%;}
    .aui-list-right .aui-btn-right{font-size: 20px;}
    .aui-list.active .aui-list-right .aui-btn-right{color: var(--aui-color);}
</style>
<div id="app" class="container">
    <header class="aui-header">
        <a onclick="aui.closeWin()" class="aui-header-left">
            <i class="iconfont iconreturn"></i>
        </a>
        <div class="aui-header-title">水球图</div>
    </header>
    <div class="aui-content">
        <div class="waterbubble-warp">
            <canvas id="dowebok" width="408" height="408" style="width: 204.167px; height: 204.167px;"></canvas>
        </div>
        <div class="aui-lists row-before" data-id="0">
            <div class="aui-list active">
                <div class="aui-list-left">默认效果</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio"></i>
                </div>
            </div>
            <div class="aui-list col-before" data-id="1">
                <div class="aui-list-left">水球半径</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list"  data-id="2">
                <div class="aui-list-left">边框宽度</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list col-before" data-id="3">
                <div class="aui-list-left">数据多少</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list" data-id="4">
                <div class="aui-list-left">水球颜色</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list col-before" data-id="5">
                <div class="aui-list-left">显示文本</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list" data-id="6">
                <div class="aui-list-left">文本颜色</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list col-before" data-id="7">
                <div class="aui-list-left">设置字体</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list" data-id="8">
                <div class="aui-list-left">是否显示波纹</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
            <div class="aui-list col-before" data-id="9">
                <div class="aui-list-left">是否显示动画</div>
                <div class="aui-list-right">
                    <i class="iconfont aui-btn-right iconradio1"></i>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function (){
        $('#dowebok').waterbubble();
        $('.aui-list').click({
            var id = $(this).data('id');
            $('.waterbubble-warp').html('<canvas id="dowebok"></canvas>');
            switch (id){
                case 0: //默认效果
                    $('#dowebok').waterbubble();
                    break;
                case 1: //水球半径
                    $('#dowebok').waterbubble({
                        radius: 50
                    });
                    break;
                case 2: //边框宽度
                    $('#dowebok').waterbubble({
                        lineWidth: 1
                    });
                    break;
                case 3: //数据多少
                    $('#dowebok').waterbubble({
                        data: 0.8
                    });
                    break;
                case 4: //水球颜色
                    $('#dowebok').waterbubble({
                        waterColor: '#FF5555'
                    });
                    break;
                case 5: //显示文本
                    $('#dowebok').waterbubble({
                        data: 0.8,
                        txt: '80%'
                    });
                    break;
                case 6: //文本颜色
                    $('#dowebok').waterbubble({
                        data: 0.8,
                        txt: '80%',
                        textColor: '#FFF'
                    });
                    break;
                case 7: //设置字体
                    $('#dowebok').waterbubble({
                        txt: 'dowebok',
                        font: 'bold 25px arial'
                    });
                    break;
                case 8: //是否显示波纹
                    $('#dowebok').waterbubble({
                        wave: false
                    });
                    break;
                case 9: //是否显示动画
                    $('#dowebok').waterbubble({
                        animation: false
                    });
                    break;
                default:
                    break;
            }
        })
    })
</script>