网页特效栏目收集了最全最新的前端网页插件，包括最流行的jQuery，Bootstrap，Js，Css，Vue等主流特效插件。
这是一款实现统计数据图表，使用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> 转载请注明来源：HTML5+angular+echart.js实现统计大数据统计图表投屏页面代码
本文永久链接地址：https://www.moyouyouw.cn/code/565.html
郑重声明：本站所有主题/文章除标明原创外，均来自网络转载，版权归原作者所有，如果有侵犯到您的权益，请联系本站删除，谢谢！我们不承担任何技术及版权问题，且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论