首先,效果图
页面代码,首先时间选择按钮
<table>
<br>
<tr>
<td>日期:
<button class="btn btn-sm btn-success" name="form-field-radio"
type="button" style="margin-top: -10px;" onclick="check('1')">今天</button>
<button class="btn btn-sm btn-info" name="form-field-radio"
type="button" style="margin-top: -10px;" onclick="check('2')">本月</button>
<button class="btn btn-sm btn-warning" name="form-field-radio"
type="button" style="margin-top: -10px;" onclick="check('3')">今年</button>
</td>
<td style="width: 80px"></td>
<td style="text-align: center;">签发文件时间:</td>
<td colspan="4">
<div class="input-append date">
<input class="span5 date-picker" id="date_start" name="date_start"
type="text" data-date-format="yyyy-mm-dd"
style="width: 80px; height: 17px;" pattern="yyyy-MM-dd"
placeholder="开始时间" onchange="date()"/> <span class="add-on"><i
class="icon-calendar"></i></span>
</div> 至:
<div class="input-append date">
<input class="span5 date-picker" id="date_end" name="date_end"
type="text" data-date-format="yyyy-mm-dd"
style="width: 80px; height: 17px;" pattern="yyyy-MM-dd"
placeholder="结束时间" /> <span class="add-on"><i
class="icon-calendar"></i></span>
</div>
</td>
<td>
<a class="btn btn-mini btn-light" href="javascript:void(0);" onclick='reloadData();' title="检索">
<i id="nav-search-icon" class="icon-search">检索</i>
</a>
</td>
</tr>
</table>
页面到后台
function check(radio){
window.location.href="<%=basePath%>statisticmgr/leaderfiletime.do?radio="+radio
}
function reloadData(){
var starttime = $('#date_start').val().valueOf().toString();
var endtime =$('#date_end').val().valueOf().toString();
window.location.href="<%=basePath%>statisticmgr/leaderfiledoubletime.do?starttime="+starttime+"&endtime="+endtime
}
$(top.hangge());
//日期框初始化
$('.date-picker').datepicker({
todayBtn: "linked",
autoclose:true
});```
下面是柱状图、第一步,导包
第二步
<div class="box-body">
<div id="echarts-line" style="height: 500px; width: 1000px;"></div>
</div>
</div>
<!--Table表格显示-->
<div class="row">
<div class="col-xs-12">
<div class="bar">
<div class="box-header">
<!-- [ --------商品信息统计-------------] -->
</div>
<div class="box-body">
<div class="table-responsive">
<table class="table table-striped table-echarts"
style="display: none">
<thread>
<tr>
<th>单位</th>
<th>数量</th>
</tr>
</thread>
<tbody>
<c:forEach var="list" items="${list}">
<tr>
<td class="td-rootName">${list.rootName}</td>
<td class="td-flowNum">${list.flowNum}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
接下来,js
$(function () {
var ehcartsrootName = [];
var ehcartsflowNum = [];
$(".table-echarts tbody tr").each(function () {
ehcartsrootName.push($(this).find(".td-rootName").html());
ehcartsflowNum.push($(this).find(".td-flowNum").html());
});
var lineEchart = echarts.init(document.getElementById('echarts-line'));
option={
title:{
text:"签发文件数量"
},
tooltip:{},
legend:{
data:["数量"]
},
grid:{
y2:140
},
//x轴的文本
xAxis:{
data:ehcartsrootName,//传入数组
boundaryGap: [0, 0.01],
axisLabel:{
interval:0,//横轴信息全部显示
rotate:-30,//-30度角倾斜显示
}
},
//y轴的文本
yAxis:{},
series:[{
name:"数量",
type:"bar",
data:ehcartsflowNum //传入数组
}]
};
lineEchart.setOption(option);
})
“`