柱状图+时间选择

首先，效果图

页面代码，首先时间选择按钮

    <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>
                &nbsp;&nbsp;&nbsp;&nbsp;<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);

        })

“`