后台数据
/**
* 显示资源列表
*
* @return \think\Response
*/
public function index (Request $request)
{
//接收开始时间和结束时间
$ktime=$request->param('ktime');
//print_r($ktime);
$jtime=$request->param('jtime');
//查询数据
$data=\app\day64\model\Money::where('time','between',["$ktime","$jtime"])->select();
$data1=json_encode($data,true);
$data2=json_decode($data1,true);
//print_r($data2);
$sumCount=0;
$sumTkuan=0;
$sumWxiaofei=0;
$sumWtixian=0;
$sumYtixian=0;
foreach ($data as $v){
$sumCount+=$v['count'];
$sumTkuan+=$v['tuikuan'];
$sumWxiaofei+=$v['wxiaofei'];
$sumWtixian+=$v['wtixian'];
$sumYtixian+=$v['ytixian'];
}
// echo $sumCount;
// echo "<br>";
// echo $sumTkuan;
// echo "<br>";
// echo $sumWxiaofei;
// echo "<br>";
// echo $sumWtixian;
// echo "<br>";
// echo $sumYtixian;
$data3=[$sumCount,$sumTkuan,$sumWxiaofei,$sumWtixian,$sumYtixian];
print_r($data3);
return view('index',compact('data3'));
}
前台进行展示数据
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="/layui/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="layui-tab">
<ul class="layui-tab-title">
<li>财务概况</li>
<li>销售走势</li>
<li>财务明细</li>
</ul>
<div class="layui-tab-content">
<!-- 进行搜索-->
<div>
<form action="{:url('index')}" method="get">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="limit1" placeholder="yyyy-MM-dd" name="ktime">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">开始时间</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" id="limit2" placeholder="yyyy-MM-dd"
name="jtime">
</div>
</div>
</div>
<button type="submit">搜索</button>
</form>
<div class="layui-tab-item layui-show">
<!-- 菜鸟饼状图-->
<html>
<head>
<meta charset="UTF-8"/>
<title>Highcharts 教程 | 菜鸟教程(runoob.com)</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<!-- 饼状图-->
<div id="container" style="width: 550px; height: 400px; margin: 0 100px;float: left"></div>
<!-- 右侧数据-->
<div style="width: 300px; height: 400px; background-color: #00F7DE;float: right">
<div>总销售额:{$data3[0]}</div>
<div>退款金额:{$data3[1]}</div>
<div>未消费:{$data3[2]}</div>
<div>未提现:{$data3[3]}</div>
<div>已提现:{$data3[4]}</div>
</div>
<div style="width: 300px; height: 400px; background-color: #00F7DE;float: right">
<div>总销售额:{$data3[0]}</div>
<div>退款金额:{$data3[1]}</div>
<div>未消费:{$data3[2]}</div>
<div>未提现:{$data3[3]}</div>
<div>已提现:{$data3[4]}</div>
</div>
<script language="JavaScript">
$(document).ready(function () {
var chart = {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
};
var title = {
text: '消费财务概览'
};
var tooltip = {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
};
var plotOptions = {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
};
var series = [{
type: 'pie',
name: 'Browser share',
data: [
['销售总量', {$data3[0]}],
['退款金额', {$data3[1]}],
['未消费', {$data3[2]}],
['未体现', {$data3[3]}],
['已提现', {$data3[4]}]
]
}];
var json = {};
json.chart = chart;
json.title = title;
json.tooltip = tooltip;
json.series = series;
json.plotOptions = plotOptions;
$('#container').highcharts(json);
});
</script>
</body>
</html>
</div>
<div class="layui-tab-item">内容2</div>
<div class="layui-tab-item">内容3</div>
</div>
</div>
<script src="/layui/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述 JS 路径需要改成你本地的 -->
<script>
//注意:选项卡 依赖 element 模块,否则无法进行功能性操作
layui.use(['element', 'laydate', 'jquery'], function () {
var element = layui.element;
var laydate = layui.laydate
var $ = layui.$;
//限定可选日期
var ins22 = laydate.render({
elem: '#test-limit1'
, min: '2016-10-14'
, max: '2080-10-14'
, ready: function () {
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
}
});
var ins22 = laydate.render({
elem: '#test-limit2'
, min: '2016-10-14'
, max: '2080-10-14'
, ready: function () {
ins22.hint('日期可选值设定在 <br> 2016-10-14 到 2080-10-14');
}
});
});
</script>
</body>
</html>