huahuibao/app/platform/views/main/index.php

<link rel="stylesheet" href="/css/xenon-components.css">
<script src="/js/chart/Chart.bundle.js"></script>
<script src="/js/chart/utils.js"></script>	

<div class="row">
	<div class="col-sm-3">
		<div class="xe-widget xe-counter-block" style="cursor:;">
			<div class="xe-upper">
				<div class="xe-icon">
					<i class="fa-rmb"></i>
				</div>
				<div class="xe-label">
					<strong class="num"><?= 0 ?></strong>
					<span>今天收入</span>
				</div>
				
			</div>
			<div class="xe-lower">
				<div class="border"></div>
				<span>累计收入：<?= 0 ?>元</span>
			</div>
		</div>
		
	</div>
	
	<div class="col-sm-3">
		<div class="xe-widget xe-counter-block xe-counter-block-blue" style="cursor:;">
			<div class="xe-upper">
				<div class="xe-icon">
					<i class="linecons-user"></i>
				</div>
				<div class="xe-label">
					<strong class="num"><?= 0  ?></strong>
					<span>今天粉丝数</span>
				</div>
			</div>
			<div class="xe-lower">
				<div class="border"></div>
				<span>粉丝总数：<?= 0 ?>个</span>
			</div>
		</div>
	</div>
	<div class="col-sm-3">
	
		<div class="xe-widget xe-counter-block xe-counter-block-orange">
			<div class="xe-upper">
				
				<div class="xe-icon">
					<i class="fa-globe"></i>
				</div>
				<div class="xe-label">
					<strong class="num"><?= 0 ?></strong>
					<span>今天访问量</span>
				</div>
				
			</div>
			<div class="xe-lower">
				<div class="border"></div>
				<span>累计访问量：<?= 0 ?> 次</span>
			</div>
		</div>
	</div>

	<div class="col-sm-3">
	
		<div class="xe-widget xe-progress-counter xe-progress-counter-turquoise" onclick="window.location.href='/merchant/list'" style="cursor:pointer;">
			<div class="xe-upper">
				<div class="xe-icon">
					<i class="linecons-shop"></i>
				</div>
				<div class="xe-label">
					<strong class="num" style="font-size:28px;"><?= 0 ?></strong>
					<span>今天商家数</span>
				</div>
			</div>
			<div class="xe-lower">
				<div class="border"></div>
				<span>商家总数：<?= 0 ?> 家</span>
				</div>
			</div>
		</div>

		<div class="clearfix"></div>

    <div style="width:48%;background:white;display:inline-block;margin:10px 0 10px 15px;padding:5px;">
        <canvas id="canvas"></canvas>
    </div>
    <div style="width:48%;background:white;display:inline-block;float:right;margin:10px 15px 10px 0;padding:5px;">
		<canvas id="canvas2"></canvas>
	</div>

</div>

<script>
	var config = {
		type: 'line',
		data: {
			labels: ['2月'],
			datasets: [{
				label: "收入",
				borderColor: window.chartColors.blue,
				backgroundColor: window.chartColors.blue,
				data: [189],
				fill: false,
			}]
		},
		options: {
			responsive: true,
			title:{
				display: true,
				text: "最近20天收入情况表"
			},
			tooltips: {
				mode: 'index',
				callbacks: {
					footer: function(tooltipItems, data) {
						var sum = 0;
						tooltipItems.forEach(function(tooltipItem) {
							sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
						});
					},
				},
				footerFontStyle: 'normal'
			},
			hover: {
				mode: 'index',
				intersect: true
			},
			scales: {
				xAxes: [{
					display: true,
					scaleLabel: {
						show: true,
						labelString: 'Month'
					}
				}],
				yAxes: [{
					display: true,
					scaleLabel: {
						show: true,
						labelString: 'Value'
					}
				}]
			}
		}
	};

	var config2 = {
			type: 'line',
			data: {
				labels: ['2月'],
				datasets: [{
					label: "粉丝数",
					borderColor: window.chartColors.blue,
					backgroundColor: window.chartColors.blue,
					data: [39],
					fill: false,
				}]
			},
			options: {
				responsive: true,
				title:{
					display: true,
					text: "最近20天粉丝增长情况"
				},
				tooltips: {
					mode: 'index',
					callbacks: {
						// Use the footer callback to display the sum of the items showing in the tooltip
						footer: function(tooltipItems, data) {
							var sum = 0;
							tooltipItems.forEach(function(tooltipItem) {
								sum += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
							});
						},
					},
					footerFontStyle: 'normal'
				},
				hover: {
					mode: 'index',
					intersect: true
				},
				scales: {
					xAxes: [{
						display: true,
						scaleLabel: {
							show: true,
							labelString: 'Month'
						}
					}],
					yAxes: [{
						display: true,
						scaleLabel: {
							show: true,
							labelString: 'Value'
						}
					}]
				}
			}
		};

		$(function(){
			var ctx = document.getElementById("canvas").getContext("2d");
			window.myLine = new Chart(ctx, config);
			var ctx2 = document.getElementById("canvas2").getContext("2d");
			window.myLine2 = new Chart(ctx2, config2);
		});

</script>

<!-- footer -->
<?php 
use platform\widgets\FooterWidget;
?>
<?= FooterWidget::widget()?>
<!-- footer -->