jquery+css实现数据可视化排名动画效果代码-html代码-BFW代码库

jquery+css实现数据可视化排名动画效果代码

代码语言：html

所属分类：图表

代码描述：jquery+css实现数据可视化排名动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!doctype html>

<html>

<head>

    <meta charset="utf-8">
    <style>
        body,html {
            width: 100%;
            height: 100%;

        }
        .box {
            width: 40%;
            height: 40%;
            margin: 30px auto;
        }
        .tbox {
            width: 100%;
            height: 100%;
            border: 1px solid blue;
        }
@-webkit-keyframes dowm {
            from {
                position: relative;
                top: 0;
            }

            to {
                position: relative;
                top: 50px;
            }
        }
@-webkit-keyframes up {
            from {
                position: relative;
                top: 0;
            }

            to {
                position: relative;
                top: -50px;
            }
        }
        .dowm {
            -webkit-animation: dowm 1s linear;
            animation: dowm 1s linear;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
        .up {
            -webkit-animation: up 1s linear;
            animation: up 1s linear;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
        }
    </style>
</head>



<body>
    <div class="box">
        <div class="tbox" id="tbox">
        </div>
    </div>


    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript">; (function($) {

        function getId(length) {
            return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
        }
        function compare(property) {
            return function(a, b) {
                var value1 = a[property];
                var value2 = b[property];
                return  value2 - value1;
            }
        }
        function EchartObj(element, option) {
            this.element = element;
            this.$element = $(element)
            this.domWidth = this.$element.width();
            this.domHeight = this.$element.height();
            this.option = option;
            this.data = option.data?option.data: []; //传进来的数据
            this.dealData = this.data?this.data.sort(compare(1)): []; //将传进来的数据排列好
            this.color = option.color?option.color: ["#8600FF", "#FF00FF", "#0000E3", "#F9F900", "#FF5809", "#00FFFF", "#B87070", "#A5A552", "#73BF00", "#00DB00"];
            this.time = option.time?option.time: 30; //设置时间
            this.arrObj = [];
            this.childrenHeight = this.domHeight/this.data.length;
            this.positionHeight = this.domHeight/(this.data.length+1); //每一个柱状条的高度
            this.maxdata = ""; //所有数据的最大值
            this.createBarobj();
            this.monitorChange();
        }

        EchartObj.prototype = {
            constructor: EchartObj,
            createBarobj: function() {
                this.$element.css({
                    "position": "relative"
                })
                if (this.data) {
                    //找到最大值
                    $.each(this.dealData, (i, v)=> {
                        this.maxdata = this.maxdata > v[1] ? this.maxdata: v[1];
                    })
                    //将数据处理成百分比的形式
                    $.each(this.dealData, (i, v)=> {
                        this.dealData[i] = [(v[0]/this.maxdata).toFixed(5)*80, (v[1]/this.maxdata).toFixed(5)*80];
                    })
                    //
                    $.each(this.data, (i, v)=> {
                        var barDomId = getId(8);
                        this.$element.append("<div id="+barDomId+" class="+barDomId+">" +
                            "<div class=''></div>" +
                            "<span class=''></span>" +
                            " </div>"
                        );
                        $("#"+barDomId).css({
                            "width": "100%",
                            "height": this.positionHeight+"px",
                            "display": "flex",
                            "justify-content": "left",
                            // "margin":"20px",
                            "position": "absolute",
                            "top": this.childrenHeight*i+"px"
                        })
                        $("#"+barDomId+" div:eq(0)").css({
                            "width": "0px",
                            "height": this.positionHeight+"px",
                            "text-align": "center",
                            "font-family": "Tahoma",
                            "font-size": "18px",
                            "line-height": this.childrenHeight+"px",
                            "background-color": this.color[i],
                            "opacity": "0.8"
                        })
                        var barObj = new BarObj(barDomId, v, this.childrenHeight, this.time, this.maxdata);
                        barObj.setSpeed();
             .........完整代码请登录后点击上方下载按钮下载查看