帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

HTML5+angular+echart.js实现统计大数据统计图表投屏页面代码

帝国模板之家 2020-10-15 网页特效 评论

这是一款实现统计数据图表,使用bootstrap自适应布局,html5图表基于angular+echart.js,可投屏在多终端显示,兼容效果好。

前端代码:

<!DOCTYPE html>
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
    <!--<![endif]-->

    <head>
        <meta charset="utf-8">
        <title>Home</title>
        <meta name="description" content="">
        <meta name="author" content="">
        <!-- Mobile Meta -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!-- Favicon -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <link href="fonts/font-awesome/css/font-awesome.css" rel="stylesheet">
        <link href="css/animations.css" rel="stylesheet">
        <link href="css/content1.0.css" rel="stylesheet">
        <script type="text/javascript" src="plugins/jquery.min.js"></script>
        <script type="text/javascript" src="js/times.js"></script>

    </head>

    <body ng-app="myApp" ng-controller="customersCtrl">
        <!-- banner start -->
        <div class="banner-caption clearfix">
            <div id="title">
                <div class="caption-title clearfix">
                    <i class="title-left"><img src="images/title-left.png" ></i>
                    <p class="title-left-title-font">XXX科技业务数据统计</p>
                    <i class="title-left"><img src="images/title-right.png" ></i>
                </div>
                <div class="title-date" style="height: 40px;">
                    <p id="DateTime" style="height: 40px;text-align: center;">实时数据</p>
                </div>
            </div>
            <div id="main">
                <div class="col-md-12">
                    <div class="row">
                        <div id="title01" class="col-xs-12 col-sm-12 col-md-3">
                            <div class="data-box1 clearfix" id="box01">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title">
                                    <b class="data-title-left">[</b>
                                    <span>今日数据分析</span>
                                    <b class="data-title-right">]</b>
                                </div>
                                <div class="total-mn" id="total-mn1">
                                    <span>日均额</span>
                                    <!--<span class="live-box-font1"><span style="font-size: 2rem;">549462</span> 万元</span>-->
                                </div>
                                <div id="box1_top">
                                    <div id="box2" class="box-echart box-bottom">
                                    </div>
                                </div>
                                <div class="total-mn" id="total-mn2">
                                    <span>资产在贷余额</span>
                                    <!--<span class="live-box-font1"><span style="font-size: 2rem;">549462</span> 万元</span>-->
                                </div>
                                <div id="box1_bottom">
                                    <div id="box4" class="box-echart">
                                    </div>
                                </div>
                                <ul class="live-box" id="live-box">
                                    <li style="margin-right: 2%;">
                                        <p>年业务成交额</p>
                                        <p class="live-box-font1"><span style="font-size: 2rem;">549462</span> 万元</p>
                                    </li>
                                    <li>
                                        <p>年完成率</p>
                                        <p class="live-box-font1"><span style="font-size: 2rem;">80%</span></p>
                                    </li>
                                </ul>
                            </div>
                            <div class="data-box1" id="box8-box" style="margin-top: 30px;">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title">
                                    <b class="data-title-left">[</b>
                                    <span>所贷金额用途</span>
                                    <b class="data-title-right">]</b>
                                </div>
                                <div id="box8" class="box-echart">
                                </div>
                            </div>
                        </div>
                        <div id="title02" class="col-xs-12 col-sm-12 col-md-6 panel-top panel-bottom">
                            <div class="data-box1 box1-back" id="box02">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title">
                                    <b class="data-title-left">[</b>
                                    <span>业务数据分布</span>
                                    <b class="data-title-right">]</b>
                                </div>
                                <ul class="data-box1-data clearfix">
                                    <p class="data-box1-font1">当日业务成交额</p>
                                    <li class="data-box1-panel">746214q3464257495678098</li>
                                    <li class="data-box1-font1" style="padding-top: 1rem;">万元</li>
                                </ul>
                                <div class="total-mn">
                                    <span>本周业务累计额</span>
                                    <span class="live-box-font1"><span style="font-size: 2.2rem;">5149462</span> 万元</span>
                                </div>
                                <div id="box1" class="box-echart-china">
                                </div>
                            </div>
                            <div class="data-box1" id="box9-box" style="margin-top: 30px;">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title" style="width: 227px">
                                    <b class="data-title-left">[</b>
                                    <span>资产数据分析-列表</span>
                                    <b class="data-title-right">]</b>
                                </div>
                                <div id="box9" class="box9-1">
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th ng-repeat="x in listHead">{{ x.categories }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="y in listContent">
                                                <td>{{ y.categories }}</td>
                                                <td>{{ y.data1 }}</td>
                                                <td>{{ y.data2 }}</td>
                                                <td>{{ y.data3 }}</td>
                                                <td>{{ y.data4 }}</td>
                                                <td>{{ y.data5 }}</td>
                                                <td>{{ y.data6 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                                <div class="box9-2">
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th width="50%">资产端</th>
                                                <td>前隆</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="z in listData1">
                                                <th>{{ z.categories }}</th>
                                                <td>{{ z.data1 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th width="50%">资产端</th>
                                                <td>用钱宝</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="q in listData1">
                                                <th>{{ q.categories }}</th>
                                                <td>{{ q.data2 }}</td>
                                            </tr>
                                        </tbody>
                                    </table>
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th width="50%">资产端</th>
                                                <td>闪银奇异</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="w in listData1">
                                                <th>{{ w.categories }}</th>
                                                <td>{{ w.data3 }}</td>
                                            </tr>

                                        </tbody>
                                    </table>
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th width="50%">资产端</th>
                                                <td>借贷宝</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="e in listData1">
                                                <th>{{ e.categories }}</th>
                                                <td>{{ e.data4 }}</td>
                                            </tr>

                                        </tbody>
                                    </table>
                                    <table class="panel-table">
                                        <thead>
                                            <tr>
                                                <th width="50%">资产端</th>
                                                <td>蚂蚁借呗</td>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-repeat="t in listData1">
                                                <th>{{ t.categories }}</th>
                                                <td>{{ t.data5 }}</td>
                                            </tr>

                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        <div id="title03" class="col-xs-12 col-sm-12 col-md-3">
                            <div class="data-box1" id="box03">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title" style="width: 238px">
                                    <b class="data-title-left">[</b>
                                    <span>资金占比和资产占比</span>
                                    <b class="data-title-right">]</b>
                                </div>

                                <ul class="ym-menu clearfix" id="ym-menu">
                                    <li class="ym-active">
                                        <a href="">本年</a>
                                    </li>
                                    <li class="taba">
                                        <a href="">本月</a>
                                    </li>
                                </ul>

                                <div id="box3" class="box-echart tabcontent">
                                </div>
                                <div id="boxes3" class="box-echart tabcontent" style="display: none;">
                                </div>
                            </div>
                            <div class="data-box1" id="box04" style="margin-top: 30px;">
                                <i class="topL"></i>
                                <i class="topR"></i>
                                <i class="bottomL"></i>
                                <i class="bottomR"></i>
                                <div class="data-title" style="width: 238px">
                                    <b class="data-title-left">[</b>
                                    <span>计划放款与累计放款</span>
                                    <b class="data-title-right">]</b>
                                </div>
                                <div id="box5" class="box-echart">
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--asad-->
                </div>
            </div>

        </div>
        </div>
        <!-- JavaScript -->
        <script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/echarts.min.js"></script>
        <script type="text/javascript" src="js/china.js"></script>
        <script type="text/javascript" src="js/angular.min.js"></script>
        <script type="text/javascript" src="js/mycharts.js"></script>
        <script>
            $(document).ready(function() {
                $('.ym-menu li').click(function() {
                    var index = $(this).index();
                    $(this).attr('class', "ym-active").siblings('li').attr('class', 'taba');
                    $('.tabcontent').eq(index).show(200).siblings('.tabcontent').hide();
                });
                var t = 0;
                var timer = setInterval(function() {
                    if(t == $('.ym-menu li').length) t = 0;
                    $('.ym-menu li:eq(' + t + ')').click();
                    t++;
                }, 3000)
            })
        </script>
    </body>
</html>
只想记住美好的事物,而忘记不幸的事物,其实是种贪婪,这样反而会很难放空自己的思想。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言