<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>{echo admin_title()}</title>
	{template _header}
</head>
<body>
	<div class="weui-tab">
		<div class="weui-tab__panel" style="background: #fff;">
			<div class="page__hd dashboard">
				<small>今日交易(元)</small>
				<h1 class="page__title">{$_amount['today']}</h1>
				<p class="page__desc">今日笔数 <b>{$_count['today']}</b> 笔</p>
				<div class="weui-flex">
					<div class="weui-flex__item"><div class="placeholder">{$_amount['weixin']}<small>今日微信总额</small></div></div>
					<div class="weui-flex__item"><div class="placeholder">{$_amount['alipay']}<small>今日支付宝总额</small></div></div>
				</div>
			</div>

			<div id="myChart1" style="width:100%;height:300px;margin:0 0 1.5em;padding:1em;box-sizing: border-box;"></div>

			<div id="myChart2" style="width:100%;height:300px;margin:0 0 3em;padding:1em;box-sizing: border-box;"></div>
		</div>
		{template _main_nav}
	</div>
	<script type="text/javascript" src="//cdn.tryyun.net/ext/??qrcode.min.js,echarts.min.js"></script>
	<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: '一周交易笔数',
			textStyle: { fontSize:14 }
		},
		tooltip: tooltip,
		grid: grid,
		legend: {
			data:['微信', '支付宝']
		},
		xAxis: {
			type: 'category',
			data: {$_week},
		},
		yAxis: {type: 'value'},
		series: [
			{
				name: '微信',
				type: 'bar',
				data: {$_week_count[weixin]},
				animation: true,
				symbolSize: 0,
				showSymbol: true,
				itemStyle:{ color: '#52bb6e'}
			},
			{
				name: '支付宝',
				type: 'bar',
				data: {$_week_count[alipay]},
				animation: true,
				symbolSize: 0,
				showSymbol: true,
				itemStyle:{ color: '#528dbb'}
			},
		]
	};
	var option2 = {
		color: color,
		title: {
			text: '一周交易金额',
			textStyle: { fontSize:14 }
		},
		tooltip: tooltip,
		grid: grid,
		legend: {
			data:['微信', '支付宝']
		},
		xAxis: {
			type: 'category',
			data: {$_week},
		},
		yAxis: {type: 'value'},
		series: [
			{
				name: '微信',
				type: 'bar',
				data: {$_week_amount[weixin]},
				animation: true,
				symbolSize: 0,
				showSymbol: true,
				itemStyle:{ color: '#52bb6e'}
			},
			{
				name: '支付宝',
				type: 'bar',
				data: {$_week_amount[alipay]},
				animation: true,
				symbolSize: 0,
				showSymbol: true,
				itemStyle:{ color: '#528dbb'}
			},
		]
	};
	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>