今天在公司要求做一个折线图，百度了好久找到了一个不错的第三方接口，主要是一些数据的折线的表示。
TIM图片20191015195710.png
这个是官方给出的例图。
下面是我自己的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Oview</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="css/dashboard.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!--<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<script src="js/common.js"></script>
<script src="js/oview.js"></script>
<!--
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!– 引入样式 –>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!– 引入组件库 –>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<!--<h1 class="page-header">群概述</h1>-->
<div class="row placeholders">
<div class="col-xs-6 col-sm-3 placeholder">
<div style="float: left">
<img src="resources/image/total.png" width="100" height="100" class="img-responsive" style="margin-top: 20px">
</div>
<div>
<br/>
<br/>
<span class="text-muted"><strong style="color: #e38d13; font-size: large">5</strong>个</span>
<h4>总群数</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 placeholder" style="">
<div style="float: left">
<img src="resources/image/group.png" width="100" height="100" class="img-responsive" style="margin-top: 20px">
</div>
<div>
<br/>
<span class="text-muted">去重前<strong style="color: dodgerblue; font-size: large">26</strong>人</span><br/>
<span class="text-muted">去重后<strong style="color: dodgerblue; font-size: large">15</strong>人</span><br/>
<h4>总人数</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 placeholder" style="">
<div style="float: left">
<img src="resources/image/addPeople.png" width="100" height="100" class="img-responsive" style="margin-top: 20px">
</div>
<div><br/>
<span class="text-muted">今日<strong style="color: #e38d13; font-size: large">1</strong></span><br/>
<span class="text-muted">本周<strong style="color: #e38d13; font-size: large">5</strong></span><br/>
<span class="text-muted">本月<strong style="color: #e38d13; font-size: large">13</strong></span>
<h4>总入群人数</h4>
</div>
</div>
<div class="col-xs-6 col-sm-3 placeholder" style="">
<div style="float: left">
<img src="resources/image/exit.png" width="100" height="100" class="img-responsive" style="margin-top: 20px">
</div>
<div><br/>
<span class="text-muted">今日<strong style="color: dodgerblue; font-size: large">0</strong></span><br/>
<span class="text-muted">本周<strong style="color: dodgerblue; font-size: large">3</strong></span><br/>
<span class="text-muted">本月<strong style="color: dodgerblue; font-size: large">9</strong></span>
<h4>总退群人数</h4>
</div>
</div>
</div>
</div>
<br/>
<div class="col-md-offset-2 main" style="width: 90%;">
<!--<div class='input-group date' id='datetimepicker1' style="width: 220px; float: left; margin-right: 10px">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2' style="width: 220px; margin-left: 10px">
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>-->
<table class="table table-striped">
<thead>
<tr>
<th>序号</th>
<th>群名称</th>
<th>群人数</th>
<th>进群人数</th>
<th>退群人数</th>
<th>发言人数</th>
<th>发言数</th>
<th>发言率</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<!-- <ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>-->
共556条记录，每页显示
<select style="width: 50px">
<option>10</option>
<option>20</option>
<option>50</option>
</select>
<button type="button" class="btn btn-default btn-sm"><</button>
<button type="button" class="btn btn-default btn-sm">1</button>
<button type="button" class="btn btn-default btn-sm">2</button>
<button type="button" class="btn btn-default btn-sm">3</button>
<button type="button" class="btn btn-default btn-sm">4</button>
<button type="button" class="btn btn-default btn-sm">5</button>
<button type="button" class="btn btn-default btn-sm">></button>
</div>
</div>
</div>
</body>
</html>
上面主要是页面的展示，下面是js的代码
$(function(){
initData();
});
function initData(){
var data = {
type: "day",
date: "2019-10-10",
vcMerchantNo: "201908301000001",
vcRobotSerialNo: "62D733BD77664476777C83354956B9AE"
};
ajaxByJSON("/js/json/groupOviewDetail.json", JSON.stringify(data), postCallBack);
// ajaxByPOST("/group/groupOviewDetail", JSON.stringify(data), postCallBack);
}
function postCallBack(result) {
if (result.success == false) {
return;
}
var data = result.data;
for (var i = 0; i < data.length; i++) {
var tr = $("<tr>\n" +
" <td>"+ (i+1) +"</td>" +
" <td>"+ data[i].vcName +"</td>" +
" <td>"+ data[i].hdUserNum +"</td>" +
" <td>"+ data[i].hdMsgNum +"</td>" +
" <td>"+ data[i].joinNum +"</td>" +
" <td>"+ data[i].exitNum +"</td>" +
" <td>"+ data[i].totalNum +"</td>" +
" <td>"+ data[i].hdRate +"%</td>" +
" </tr>");
$("#tbody").append(tr);
}
}
这是源码的GitHub地址：https://github.com/wcfb/StartDemo
如果发现有什么错误感谢指出，谢谢。
网友评论