waterTank是一款三维3d透明蓄水池状柱状图jquery插件-BFW插件库

waterTank是一款三维3d透明蓄水池状柱状图jquery插件

这是一款 jQuery 3D透明蓄水池状柱状图插件。该插件基于HTML5 canvas来制作3D立体蓄水池状柱状图。点击柱状图可以动态的改变水柱的高度，并可以自定义水柱的宽度、高度、颜色和初始值等。

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置参数

//使用一个<div>元素来作为柱状图的容器。
<div class="example">

</div>

$('.example').waterTank({
width: 200,//宽度
height: 400,//高度
color: 'skyblue',//颜色
level: 80//初始值，100为满的
})

如果要动态修改柱状体的高度，方法为

$('.example').waterTank(50);

完整示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["waterTank"], function() {
                $('.waterTankHere1').waterTank({
                    width: 420,
                    height: 360,
                    color: '#8bd0ec',
                    level: 83
                }).on('click', function(event) {
                    $(this).waterTank(Math.floor(Math.random() * 100) + 0);
                });

                $('.waterTankHere2').waterTank({
                    width: 80,
                    height: 360,
                    color: '#f00',
                    level: 80
                }).on('click', function(event) {
                    $(this).waterTank(Math.floor(Math.random() * 100) + 0);
                });

                $('.waterTankHere3').waterTank({
                    width: 20,
                    height: 360,
                    color: '#2e32ff',
                    level: 80
                }).on('click', function(event) {
                    $(this).waterTank(Math.floor(Math.random() * 100) + 0);
                });

            });
        });
    </script>
    <style>
        .wrap {
            font-family: Roboto;
            text-align: center;
        }
        .tank {
            margin: 0 50px;
            display: inline-block;
        }
        body {
            /*background: #eee;*/
            margin: 0;
        }
    </style>
</head>
<body>


    <h3 style="text-align: center">点击柱状图可以动态改变高度值！</h3>
    <div class="wrap">
        <div class="tank waterTankHere1"></div>
        <div class="tank waterTankHere2"></div>
        <div class="tank waterTankHere3"></div>
    </div>
</body>
</html>