柱状图+时间选择

首先，效果图

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

    <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
         });```

下面是柱状图、第一步，导包

第二步

单位	数量
${list.rootName}	${list.flowNum}

接下来，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);

        })

“`