【echartsjs】js实现图表数据跟动态数据联合展示三个案例，附带源码

序幕：

所展示示例使用到多个js库，例如：jquery、echarts、liMarquee等等，我是下载到了本地，其他小伙伴记得自己下载相关js库，或者引用线上库

推荐一个获取线上资源网站：BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

第一个案例效果图：

效果描述：左边数据用环形图表展示，右边以滚动列表的形式展示

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./liMarquee.css">
    <style>
        .view-row {
            height: 23%;
            position: relative;
            margin-top: 20px;
        }

        .gongzhong {
            height: 175px;
        }

        .middle-ring {
            position: absolute;
            left: 274px;
            top: 65px;
            border-radius: 100px;
            width: 200px;
            height: 200px;
        }

        .middle-ring .ring1 {
            float: left;
            width: 111px;
            height: 111px;
            border-radius: 90px;
            background: rgb(80, 231, 235, 0.05);
        }

        .middle-ring .ring1 .ring2 .ring-icon {
            width: 100%;
            height: 100%;
            background: url(http://bs.nifengss.com/assets/themes/images/icon-gz.png) no-repeat center;
        }

        .middle-ring .ring1 .ring2 {
            margin: 10px;
            width: 80px;
            height: 80px;
            border-radius: 60px;
            background: rgb(0 188 193 / 10%);
            top: 5px;
            position: relative;
            left: 13px;
        }

        .ringData {
            height: 220px;
            width: 100%;
            position: absolute;
            left: 3%;
            top: 6%;
            margin: 10px auto;
        }

        .gongzhong .legeng {
            position: absolute;
            top: 40px;
            right: 18px;
            max-width: 280px;
            overflow: hidden;
            height: 170px;
            font-size: 14px;
            line-height: 34px;
        }

        .gongzhong .legeng .list {
            width: 280px;
            height: 170px;
            padding: 0;
        }

        .gongzhong .legeng .list li {
            overflow: hidden;
            display: flex;
        }

        /* 小圆点样式 */
        .gongzhong .legeng li span.yuan {
            display: inline-block;
            margin-top: 13px;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            margin-right: 10px
        }

        /* 职位名称样式 */
        .gongzhong .legeng .col {
            display: inline-block;
            text-align: left;
            width: 70px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .gongzhong .legeng .gcol0 {
            color: #283d68;
        }

        .gongzhong .legeng .gcol1 {
            color: #ff5e33;
        }

        .gongzhong .legeng .gcol2 {
            color: #a16eba;
        }

        .gongzhong .legeng .gcol3 {
            color: #ffa233;
        }

        .gongzhong .legeng .gcol4 {
            color: #53c06c;
        }

        .gongzhong .legeng .gcol5 {
            color: #055c45;
        }

        .gongzhong .legeng .gcol6 {
            color: #6cb96e;
        }

        .gongzhong .legeng .gcol7 {
            color: #b6a2de;
        }

        .gongzhong .legeng .gcol8 {
            color: #5ab1ef;
        }

        .gongzhong .legeng .gcol9 {
            color: #ffb980;
        }

        .gongzhong .legeng .gcol10 {
            color: #7fe3c8;
        }

        .gongzhong .legeng .gcol11 {
            color: #044ed6;
        }

        .gongzhong .legeng .gcol12 {
            color: #15bc24;
        }

        .gongzhong .legeng .gcol13 {
            color: #bc9b15;
        }

        .gongzhong .legeng .gcol14 {
            color: #8d98b3;
        }

        .gongzhong .legeng .gcol15 {
            color: #e5cf0d;
        }

        .gongzhong .legeng .gcol16 {
            color: #97b552;
        }

        .gongzhong .legeng .gcol17 {
            color: #95706d;
        }

        .gongzhong .legeng .gcol18 {
            color: #dc69aa;
        }

        .gongzhong .legeng .gcol19 {
            color: #07a2a4;
        }

        .gongzhong .legeng .gcol20 {
            color: #9a7fd1;
        }

        .gongzhong .legeng .gcol21 {
            color: #588dd5;
        }

        .gongzhong .legeng .gcol22 {
            color: #f5994e;
        }

        .gongzhong .legeng .gcol23 {
            color: #c05050;
        }

        .gongzhong .legeng .gcol24 {
            color: #59678c;
        }

        .gongzhong .legeng .gcol25 {
            color: #c9ab00;
        }

        .gongzhong .legeng .gcol26 {
            color: #7eb00a;
        }

        .gongzhong .legeng .gcol27 {
            color: #6f5553;
        }

        .gongzhong .legeng .gcol28 {
            color: #c14089;
        }

        .gongzhong .legeng .gcol29 {
            color: #dd6b66;
        }

        .gongzhong .legeng .split {
            margin: 0 20px
        }

        .gongzhong .legeng .present {
            margin: 0px 0px 0 0px;
        }

        .gongzhong .legeng .gcolLine0 {
            background: #283d68;
        }

        .gongzhong .legeng .gcolLine1 {
            background: #ff5e33;
        }

        .gongzhong .legeng .gcolLine2 {
            background: #a16eba;
        }

        .gongzhong .legeng .gcolLine3 {
            background: #ffa233;
        }

        .gongzhong .legeng .gcolLine4 {
            background: #53c06c;
        }

        .gongzhong .legeng .gcolLine5 {
            background: #055c45;
        }

        .gongzhong .legeng .gcolLine6 {
            background: #6cb96e;
        }

        .gongzhong .legeng .gcolLine7 {
            background: #b6a2de;
        }

        .gongzhong .legeng .gcolLine8 {
            background: #5ab1ef;
        }

        .gongzhong .legeng .gcolLine9 {
            background: #ffb980;
        }

        .gongzhong .legeng .gcolLine10 {
            background: #7fe3c8;
        }

        .gongzhong .legeng .gcolLine11 {
            background: #044ed6;
        }

        .gongzhong .legeng .gcolLine12 {
            background: #15bc24;
        }

        .gongzhong .legeng .gcolLine13 {
            background: #bc9b15;
        }

        .gongzhong .legeng .gcolLine14 {
            background: #8d98b3;
        }

        .gongzhong .legeng .gcolLine15 {
            background: #e5cf0d;
        }

        .gongzhong .legeng .gcolLine16 {
            background: #97b552;
        }

        .gongzhong .legeng .gcolLine17 {
            background: #95706d;
        }

        .gongzhong .legeng .gcolLine18 {
            background: #dc69aa;
        }

        .gongzhong .legeng .gcolLine19 {
            background: #07a2a4;
        }

        .gongzhong .legeng .gcolLine20 {
            background: #9a7fd1;
        }

        .gongzhong .legeng .gcolLine21 {
            background: #588dd5;
        }

        .gongzhong .legeng .gcolLine22 {
            background: #f5994e;
        }

        .gongzhong .legeng .gcolLine23 {
            background: #c05050;
        }

        .gongzhong .legeng .gcolLine24 {
            background: #59678c;
        }

        .gongzhong .legeng .gcolLine25 {
            background: #c9ab00;
        }

        .gongzhong .legeng .gcolLine26 {
            background: #7eb00a;
        }

        .gongzhong .legeng .gcolLine27 {
            background: #6f5553;
        }

        .gongzhong .legeng .gcolLine28 {
            background: #c14089;
        }

        .gongzhong .legeng .gcolLine29 {
            background: #dd6b66;
        }
    </style>
</head>

<body>
    <div class="view-row">
        <div class="gongzhong">
            <!-- 环形图内的小图片 -->
            <div class="middle-ring">
                <div class="ring1">
                    <div class="ring2">
                        <div class="ring-icon"></div>
                    </div>
                </div>
            </div>
            <!-- 环形图 -->
            <div id="ringData" class="ringData"></div>
            <!-- 右侧的人员滚动 -->
            <div class="legeng gongZhongType">
                <ul class="list"></ul>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 人员滚动 -->
    <script type="text/javascript" src="./jquery.liMarquee.js"></script>
    <!-- 环形图 -->
    <script type="text/javascript" src="./echarts.min.js"></script>
    <script>
        var dataDate = [{ value: 80, name: '木工' }, { value: 10, name: '钳工' }, { value: 30, name: '幕墙工 ' }, { value: 20, name: '电工' }, { value: 25, name: '杂工' }, { value: 123, name: '木工1' }, { value: 21, name: '钳工1' }, { value: 30, name: '幕墙工1 ' }, { value: 10, name: '电工1' }, { value: 2, name: '杂工1' }]
        var jobClass = null
        var arrValue = null

        var ringData = function (dataJob, dataJobValue) {
            var myChart = echarts.init(document.getElementById('ringData'));
            // 指定图表的配置项和数据
            var option = {
                tooltip: { //提示框组件
                    trigger: 'item', //触发类型(饼状图片就是用这个)
                    formatter: "{a} <br/>{b} : {c} ({d}%)" //提示框浮层内容格式器
                },
                series: [ //系列列表
                    {
                        name: '工种',  //系列名称
                        type: 'pie',   //类型 pie表示饼图
                        center: ['40%', '45%'], //设置饼的原心坐标 不设置就会默认在中心的位置
                        radius: ['50%', '70%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                        itemStyle: {  //图形样式
                            normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: {  //饼图图形上的文本标签
                                    show: false  //平常不显示
                                },
                                labelLine: {     //标签的视觉引导线样式
                                    show: false  //平常不显示
                                }
                            },
                            emphasis: {   //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                                label: {  //饼图图形上的文本标签
                                    show: true,
                                    position: 'center',
                                    textStyle: {
                                        fontSize: '10',
                                        fontWeight: 'bold'
                                    }
                                }
                            }
                        },
                        data: dataJobValue
                    }
                ]
            };
            myChart.clear();
            myChart.setOption(option);
        };


        var workerNum = function () {
            // 2、工种占比分析
            var job = [];
            var arr = [];
            var htmlType = '';
            var arrList = dataDate;
            if (arrList.length > 0) {
                for (var i in arrList) {
                    var objList = { value: arrList[i].value, name: arrList[i].name };
                    //工种右边滚动
                    htmlType += '<li><span class="yuan gcolLine' + i + '"></span> <span class="gcol' + i + ' col">' + arrList[i].name + '</span><span class="split">|</span><span class="present"> 4.0%</span><span class="split">|</span><span>' + arrList[i].value + '人</span></li>';
                    job.push(arrList[i].name);
                    arr.push(objList);
                }
                jobClass = job;
                arrValue = arr;
                ringData(jobClass, arrValue);
            }
            var example = $('.gongZhongType .list');
            // 查找其中类名为 "str_origin" 的子元素，并获取它的 style 属性的值，赋值给变量 move_Pos
            // var move_Pos = example.find('.str_origin').attr('style');
            // example.attr('move_Pos', move_Pos)
            example.html(htmlType);
            if (htmlType == '') {
                jobClass = ["暂无数据"];
                arrValue = [{ value: 0, name: '暂无数据' }];
                $('.gongZhongType .list').html('<li style="margin-top: 60px;">暂无数据</li>');
                ringData(jobClass, arrValue);
            }
        };
        $(document).ready(function () {
            workerNum();
            setTimeout(function () {
                $('.gongZhongType .list').liMarquee({ direction: 'up', scrollamount: 20, runshort: false });
            }, 100);
        })

    </script>
</body>

</html>

第二个案例效果图：

效果描述：下方的展示列表不停的滚动展示，鼠标悬浮时暂停滚动，移开又开始滚动

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./liMarquee.css">
    <style>
        body {
            background-color: #416757;
        }

        ul.opacity li {
            background: url(http://bs.nifengss.com/assets/themes/images/transparent.png)
        }

        .show-tis3 {
            margin: 15px;
            display: flex;
            justify-content: space-evenly;
        }

        .show-tis2 span {
            float: left;
            padding: 0px 5px;
        }

        .show-tis2 span i {
            float: left;
            width: 10px;
            height: 10px;
            border-radius: 10px;
            margin: 5px;
        }

        .scroll-box {
            height: 230px;
            margin: 20px 20px;
            overflow: hidden;
            clear: both;
        }

        .scroll-box .opacity {
            overflow: hidden;
            height: 100%;
            padding: 0;
        }

        .scroll-box .opacity li {
            height: 50px;
            font-size: 16px;
            line-height: 50px;
            margin-bottom: 10px;
            padding: 0px 10px;
            overflow: hidden;
        }

        .scroll-box .opacity li .circular {
            float: left;
            width: 13px;
            height: 13px;
            background: #2e8ded;
            float: left;
            border-radius: 13px;
            margin: 18.5px 10px;
        }

        .scroll-box .opacity li span.s-text {
            min-width: 10px;
            max-width: 60%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .data-null {
            background: url("./data-null.png") no-repeat center;
        }

        .transparent {
            background: url("./transparent.png")
        }
    </style>
</head>

<body>
    <div class="c-main">
        <p class="show-tis2  show-tis3 findNotChangeSafety">
        </p>
        <div class="scroll-box legeng hiddenDanger">
            <ul class="opacity data-list">
            </ul>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 人员滚动 -->
    <script type="text/javascript" src="./jquery.liMarquee.js"></script>
    <script>
        var colorAll = ["#ff5033", "#fbc14a", "#41d7e6", "#9f6ab4", "#d7ab82",
            "#ff9c33", '#50bf6d', '#b6a2de', '#5ab1ef',
            '#ffb980', '#7fe3c8', '#044ed6', '#15bc24', '#bc9b15',
            '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
            '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
            '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089',
            '#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53',
            '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c',
            '#f49f42', '#d87c7c', '#919e8b', '#d7ab82', '#6e7074',
            '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58',
            '#4b565b', '#c12e34', '#e6b600', '#0098d9', '#2b821d',
            '#005eaa', '#339ca8', '#cda819', '#32a487', "#18ae86"];
        var findNotChangeSafety = function () {
            $(".hiddenDanger ul").html('');
            var htmlType = '';
            var row = '';
            // var data = { "safetyLevels": [{ "sort": "1", "name": "紧急", "value": "1" }, { "sort": "2", "name": "严重", "value": "2" }, { "sort": "3", "name": "一般", "value": "3" }], "noChangeSafetyList": [] }
            var data = { "safetyLevels": [{ "sort": "1", "name": "紧急", "value": "1" }, { "sort": "2", "name": "严重", "value": "2" }, { "sort": "3", "name": "一般", "value": "3" }], "noChangeSafetyList": [{ "levelName": "紧急", "safetyDescribe": "副龙骨此处未用整条，不锈钢灯槽边副龙骨软动", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "石膏板拼接未留缝隙，易产生开裂。", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "禁止使用拖线板", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "墙面上有黑胶点点", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "切割机未配备灭火器及挡火罩", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "钢架内侧未封板，影响施工防水。", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "紧急", "safetyDescribe": "电箱接线不规范存在乱接现象", "isOutDate": "1", "sort": "1", "value": "1" }, { "levelName": "严重", "safetyDescribe": "有缺陷的龙骨未充分利用", "isOutDate": "1", "sort": "2", "value": "2" }, { "levelName": "严重", "safetyDescribe": "夹板防腐防霉涂刷不到位", "isOutDate": "1", "sort": "2", "value": "2" }, { "levelName": "严重", "safetyDescribe": "卫生间墙面粉刷质量差、毛糙，无法做防水。", "isOutDate": "1", "sort": "2", "value": "2" }, { "levelName": "严重", "safetyDescribe": "施工垃圾未及时清理", "isOutDate": "1", "sort": "2", "value": "2" }, { "levelName": "严重", "safetyDescribe": "角落处小便现象严重", "isOutDate": "1", "sort": "2", "value": "2" }, { "levelName": "一般", "safetyDescribe": "材料码放不整齐", "isOutDate": "1", "sort": "3", "value": "3" }, { "levelName": "一般", "safetyDescribe": "电梯厅两侧天棚灯带电线端头出线、超出石膏板高度", "isOutDate": "1", "sort": "3", "value": "3" }, { "levelName": "一般", "safetyDescribe": "新风管安装影响标高", "isOutDate": "1", "sort": "3", "value": "3" }] }
            var noChangeSafetyList = data.noChangeSafetyList;
            var safetyLevels = data.safetyLevels;
            for (i in safetyLevels) {
                row += '<span class="st' + i + '"><i  style="background: ' + colorAll[i] + '"></i> ' + safetyLevels[i].name + '</span>';
                if (noChangeSafetyList.length > 0) {
                    for (var b in noChangeSafetyList) {
                        if (safetyLevels[i].value == noChangeSafetyList[b].value) {
                            if (noChangeSafetyList[b].isOutDate == 1) {
                                htmlType += '  <li><i class="circular" style="background:' + colorAll[i] + '"></i><span class="s-text" title="' + noChangeSafetyList[b].levelName + '">' + noChangeSafetyList[b].safetyDescribe + '</span></li>';
                            } else {
                                htmlType += '  <li><i class="circular" style="background:' + colorAll[i] + '"></i><span class="s-text" title="' + noChangeSafetyList[b].levelName + '">' + noChangeSafetyList[b].safetyDescribe + '</span></li>';
                            }
                        }
                    }
                    $('.hiddenDanger ul.data-list').removeClass("data-null");
                } else {
                    // 没有数据时显示的样式
                    $('.hiddenDanger').addClass("transparent");
                    $('.hiddenDanger ul.data-list').addClass("data-null");
                }
            }
            $(".findNotChangeSafety").html(row);
            $(".hiddenDanger ul").html(htmlType);
            setTimeout(function () {
                $(".hiddenDanger ul").liMarquee({ direction: 'up', scrollamount: 20, runshort: false });
            }, 80);

        }
        findNotChangeSafety()
    </script>
</body>

</html>

第三个案例效果图：

效果描述：数字先滚动，然后展示；进度条动态增长展示

源代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./liMarquee.css">
    <style>
        .c-main {
            width: 42vw;
        }

        .total-num {
            display: flex;
        }

        .total-num .tal1 {
            width: 50%;
            height: 195px;
            text-align: center;
            font-size: 20px;
        }

        .total-num .tal1 .p-text {
            height: 108px;
            font-size: 30px;
            line-height: 108px;
            margin: 20px 0px;
        }

        .total-num .tal1 .text1 {
            color: #cdb972;
            background: url(http://bs.nifengss.com/assets/themes/images/safe/icon-img01.png) center no-repeat;
            overflow: hidden;
        }

        .total-num .tal1 .text2 {
            color: #ff3333;
            background: url(http://bs.nifengss.com/assets/themes/images/safe/icon-img01.png) center no-repeat;
            overflow: hidden;
        }

        .seep dl dd {
            overflow: hidden;
            font-size: 14px;
        }

        .seep dl dd span.span1 {
            margin-left: 15px;
            width: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .seep dl dd div.skillbar {
            position: relative;
            float: left;
            margin: 5px 15px;
            width: 60%;
            height: 12px;
            border-radius: 12px;
            background: #4b688b;
        }

        .seep dl dd div.skillbar .filled {
            position: absolute;
            left: 1px;
            top: 0px;
            height: 12px;
            border-radius: 12px;
            background: url("http://bs.nifengss.com/assets/themes/images/icon-gz.png");
        }

        .seep dl dd span {
            float: left;
        }
    </style>
</head>

<body>
    <div class="c-main">
        <div class="total-num">
            <div class="tal1 fl">
                <p class="p-text text1 sum numberReload"></p>
                <p id="safProblemTotal">问题总数</p>
            </div>
            <div class="tal1 fl">
                <p class="p-text text2 outTime numberReload"></p>
                <p id="safExceed ">超期</p>
            </div>
        </div>
        <div class="seep seep-safe-num">
            <dl id="seep-num">
            </dl>
        </div>
    </div>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <!-- 创建和展示技能条动画效果 用于进度条动态增长，然后展示-->
    <script type="text/javascript" src="./an-skill-bar.js"></script>
    <!-- 文字动画插件 用于文字翻滚、然后展示-->
    <script type="text/javascript" src="./jquery.leoTextAnimate.js"></script>
    <!-- 列表滚动 -->
    <script type="text/javascript" src="./jquery.liMarquee.js"></script>
    <script>
        var colorAll = ["#ff5033", "#fbc14a", "#41d7e6", "#9f6ab4", "#d7ab82",
            "#ff9c33", '#50bf6d', '#b6a2de', '#5ab1ef',
            '#ffb980', '#7fe3c8', '#044ed6', '#15bc24', '#bc9b15',
            '#8d98b3', '#e5cf0d', '#97b552', '#95706d', '#dc69aa',
            '#07a2a4', '#9a7fd1', '#588dd5', '#f5994e', '#c05050',
            '#59678c', '#c9ab00', '#7eb00a', '#6f5553', '#c14089',
            '#dd6b66', '#759aa0', '#e69d87', '#8dc1a9', '#ea7e53',
            '#eedd78', '#73a373', '#73b9bc', '#7289ab', '#91ca8c',
            '#f49f42', '#d87c7c', '#919e8b', '#d7ab82', '#6e7074',
            '#61a0a8', '#efa18d', '#787464', '#cc7e63', '#724e58',
            '#4b565b', '#c12e34', '#e6b600', '#0098d9', '#2b821d',
            '#005eaa', '#339ca8', '#cda819', '#32a487', "#18ae86"];
        /* 安全隐患数量 */
        var SafetyHazard = JSON.parse('{"safetyLevels":[{"sort":"1","name":"紧急","value":"1"},{"sort":"2","name":"严重","value":"2"},{"sort":"3","name":"一般","value":"3"}],"sum":35,"statisticsLeMessages":[{"levelPercentage":"45.71","levelNumber":"16","levelName":"紧急","sort":"1"},{"levelPercentage":"40.00","levelNumber":"14","levelName":"严重","sort":"2"},{"levelPercentage":"14.29","levelNumber":"5","levelName":"一般","sort":"3"}],"outTime":16}')
        var getStatisticsLevel = function () {
            console.log(123123)
            var data = SafetyHazard
            var html = '';
            var statisticsLeMessages = data.statisticsLeMessages;
            $(".levelUrgency").html(data.levelUrgencyNumber);
            $(".levelSeverity").html(data.levelSeverityNumber);
            $(".levelGeneral").html(data.levelGeneralNumber);
            $(".sum").html(data.sum);
            $(".outTime").html(data.outTime);
            if (statisticsLeMessages.length > 0) {
                for (i in statisticsLeMessages) {
                    html += '<dd>';
                    html += '<span class="span1" title="' + statisticsLeMessages[i].levelName + '">' + statisticsLeMessages[i].levelName + '</span>';
                    html += '<div class="span2 skillbar" >';
                    html += '<div class="filled filled' + i + '" style="background:' + colorAll[i] + ' " data-width="' + statisticsLeMessages[i].levelPercentage + '%"></div>';
                    html += '</div>';
                    html += '<span class="span3"><em  class="filled-text' + i + '">' + statisticsLeMessages[i].levelPercentage + '</em>% (<em class="levelUrgency">' + statisticsLeMessages[i].levelNumber + '</em>)</span>';
                    html += '</dd>';
                }
                $("#seep-num").html(html);

                //进度条样式
                $('.skillbar').skillbar({
                    speed: 1000,
                });
                $('.numberReload').leoTextAnimate({ fixed: [',', ':', '.'], start: '-' });
            }
            if (statisticsLeMessages.length > 3) {
                setTimeout(function () {
                    $("#seep-num").liMarquee({ direction: 'up', scrollamount: 10, runshort: false });
                }, 800);
            }
        };
        getStatisticsLevel()
    </script>
</body>

</html>