先上效果图

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>
评论已关闭