<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<title>{echo admin_title()}</title>
<!--header-->
{template _:header}
</head>
<body>
<div class="layui-layout layui-layout-admin">
<!--top-->
{template _main_top}
<!--nav-->
{template _main_nav}
	<div class="position"><h1>控制台</h1></div>
	<div class="layui-body admin-body">
		<div class="admin-content">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md3">
					<div class="data-trade"><span>{$_amount['today']}</span>今日交易总额</div>
				</div>
				<div class="layui-col-md3">
					<div class="data-trade"><span>{$_count['today']}</span>今日交易笔数</div>
				</div>
				<div class="layui-col-md3">
					<div class="data-trade"><span>{$_amount['weixin']}</span>今日微信总额</div>
				</div>
				<div class="layui-col-md3">
					<div class="data-trade"><span>{$_amount['alipay']}</span>今日支付宝总额</div>
				</div>
				<div class="layui-col-md6">
					<div id="myChart1" style="width:100%;height:300px;"></div>
				</div>
				<div class="layui-col-md6">
					<div id="myChart2" style="width:100%;height:300px;"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!--footer-->
{template _:footer}
<script type="text/javascript">
var color = ["#22AC38", "#1677FF"];
var tooltip = {
	show: true,
	trigger: 'axis',
	axisPointer: {
		type: 'line',
		lineStyle: {
			width: 1
		},
	}
}
var grid = {
	left: '0',
	right: '0',
	bottom: '0',
	containLabel: true
}
var option1 = {
	color: color,
	title: {
		text: '一周交易笔数'
	},
	tooltip: tooltip,
	grid: grid,
	legend: {
		data:['微信', '支付宝']
	},
	xAxis: {
		type: 'category',
		data: {$_week},
	},
	yAxis: {type: 'value'},
	series: [
		{
			name: '微信',
			type: 'line',
			data: {$_week_count[weixin]},
			animation: true,
			symbolSize: 0,
			showSymbol: true,
		},
		{
			name: '支付宝',
			type: 'line',
			data: {$_week_count[alipay]},
			animation: true,
			symbolSize: 0,
			showSymbol: true,
		},
	]
};
var option2 = {
	color: color,
	title: {
		text: '一周交易金额'
	},
	tooltip: tooltip,
	grid: grid,
	legend: {
		data:['微信', '支付宝']
	},
	xAxis: {
		type: 'category',
		data: {$_week},
	},
	yAxis: {type: 'value'},
	series: [
		{
			name: '微信',
			type: 'line',
			data: {$_week_amount[weixin]},
			animation: true,
			symbolSize: 0,
			showSymbol: true,
		},
		{
			name: '支付宝',
			type: 'line',
			data: {$_week_amount[alipay]},
			animation: true,
			symbolSize: 0,
			showSymbol: true,
		},
	]
};
var myChart1 = echarts.init(document.getElementById('myChart1'));
var myChart2 = echarts.init(document.getElementById('myChart2'));
myChart1.setOption(option1);
myChart2.setOption(option2);
window.onresize = function(){
	myChart1.resize();
	myChart2.resize();
}
</script>
</body>
</html>