先上效果图

Echarts是支持json格式的

我们接口只需要查询出每个时段的量反回json给Echarts组件即可

前端代码

<div class="layui-inline">
    <input type="text"
           placeholder="日期筛选" 
           class="layui-input" 
           id="test1" 
           style="width:250px;">
</div>
                 
<div class="layui-btn"  id="lastDay">
       <i class="iconfont"></i>搜索日期
</div>
<div class="layui-col-sm12 layui-col-md6">
     <div class="layui-card">
           <div class="layui-card-header">今日实时统计</div>
                <div class="layui-card-body" style="min-height: 540px;width: 1250px;">
     <div id="main1" class="layui-col-sm12" style="min-width: 540px;height: 500px;"></div>

      </div>
   </div>
</div>

Js代码

         <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
        <script>
            layui.use('laydate', function(){
                var laydate = layui.laydate;
                //执行一个laydate实例
                laydate.render({
                    elem: '#test1' //指定元素
                });
            });
        </script>
        <script type="text/javascript">
            $("#lastDay").click(function(){
                var times = $("#test1").val();
                $.ajax({
                    url:'http://301.php1314.cn/index/index/lastkpls',
                    datatype:'json',
                    type:'post',
                    data:{
                        'date':times
                    },
                    success:function(suc1){
                        // 基于准备好的dom，初始化echarts实例
                        var myChart = echarts.init(document.getElementById('main'));
                        // 指定图表的配置项和数据
                        var option = {
                            title: {
                                text: '今日实时统计'
                            },
                            tooltip: {
                                trigger: 'axis'
                            },
                            legend: {
                                data:['复制量','展示数','展示率']
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['0-1','1-2','2-3','3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12',
                                    '12-13','13-14','14-15','15-16','16-17','17-18','18-19','19-20','20-21','21-22','22-23','23-24']
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name:'复制量',
                                    type:'line',
                                    stack: '总量',
                                    data:suc1
                                },
                                {
                                    name:'展示数',
                                    type:'line',
                                    stack: '总量',
                                    data:[320, 332, 301, 334, 390, 330, 320]
                                },
                                {
                                    name:'展示率',
                                    type:'line',
                                    stack: '总量',
                                    data:[820, 932, 901, 934, 1290, 1330, 1320]
                                }
                            ]
                        };
                        // 使用刚指定的配置项和数据显示图表。
                        myChart.setOption(option);
                    },
                    error:function(err1){
                        alert(err1)
                    }
                })
            });

            $.ajax({
                url:'http://301.php1314.cn/index/index/kpl',
                datatype:'json',
                type:'post',
                success:function(suc1){
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    // 指定图表的配置项和数据
                    var option = {
                        title: {
                            text: '今日实时统计'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['复制量','展示数','复制率']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['0-1','1-2','2-3','3-4','4-5','5-6','6-7','7-8','8-9','9-10','10-11','11-12',
                                '12-13','13-14','14-15','15-16','16-17','17-18','18-19','19-20','20-21','21-22','22-23','23-24']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'复制量',
                                type:'line',
                                stack: '总量',
                                data:suc1
                            },
                            {
                                name:'展示数',
                                type:'line',
                                stack: '总量',
                                data:[320, 332, 301, 334, 390, 330, 320]
                            },
                            {
                                name:'复制率',
                                type:'line',
                                stack: '总量',
                                data:[120, 132, 101, 934, 290, 130, 120]
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                },
                error:function(err1){
                    // alert('异常了')
                }
            })

    </script>

后端就不贴了 886