huahuibao/app/admin/views/test/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" data-count=".num" data-from="0" data-to="99.9" data-suffix="%" data-duration="2">
						<div class="xe-upper">
							
							<div class="xe-icon">
								<i class="linecons-cloud"></i>
							</div>
							<div class="xe-label">
								<strong class="num">2187</strong>
								<span>今天收入</span>
							</div>
							
						</div>
						<div class="xe-lower">
							<div class="border"></div>
							
							<span>昨天：3028元</span>
							<strong>78% Increase</strong>
						</div>
					</div>
					
				</div>

				<div class="col-sm-3">
				
					<div class="xe-widget xe-progress-counter xe-progress-counter-turquoise" data-suffix="k" data-count="" data-from="0" data-to="310" data-duration="4" data-easing="false">
						<div class="xe-upper">
							
							<div class="xe-icon">
								<i class="linecons-user"></i>
							</div>
							<div class="xe-label">
								<strong class="num" style="font-size:28px;">19</strong>
								<span>今天成交量</span>
							</div>
							
						</div>
						<div class="xe-lower">
							<div class="border"></div>
							<span>昨天：21个</span>
							<strong>51.55%</strong>
						</div>
					</div>
					
				</div>
				
				<div class="col-sm-3">
				
					<div class="xe-widget xe-counter-block xe-counter-block-blue" data-suffix="k" data-count=".num" data-from="0" data-to="310" data-duration="4" data-easing="false">
						<div class="xe-upper">
							
							<div class="xe-icon">
								<i class="linecons-user"></i>
							</div>
							<div class="xe-label">
								<strong class="num">10</strong>
								<span>今天新增粉丝</span>
							</div>
							
						</div>
						<div class="xe-lower">
							<div class="border"></div>
							
							<span>昨天：29个</span>
							<strong>51.55%</strong>
						</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-life-ring"></i>
							</div>
							<div class="xe-label">
								<strong class="num">30</strong>
								<span>今天访问量</span>
							</div>
							
						</div>
						<div class="xe-lower">
							<div class="border"></div>
							<span>昨天：49 人</span>
							<strong data-count="this" data-from="0" data-to="14215" data-duration="2">0%</strong>
						</div>
					</div>
					
				</div>
	
				<div class="clearfix"></div>
	
	    <div style="width:48%;background:white;display:inline-block;margin-left:15px;padding:5px;margin-top:10px;">
	        <canvas id="canvas"></canvas>
	    </div>
	    <div style="width:48%;background:white;display:inline-block;float:right;margin-right:15px;padding:5px;margin-top:10px;">
	        <canvas id="canvas2"></canvas>
	    </div>
			</div>
	
    <script>
        var config = {
            type: 'line',
            data: {
                labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月","8月","9月","10月","11月","12月"],
                datasets: [{
                    label: "收入",
                    borderColor: window.chartColors.blue,
                    backgroundColor: window.chartColors.blue,
                    data: [1100,1200,3400,2100,1000,1020,2020,900,3045,2389,4500,2189],
                    fill: false,
                }]
            },
            options: {
                responsive: true,
                title:{
                    display: true,
                    text: "最近7天收入情况表"
                },
                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: ["1月", "2月", "3月", "4月", "5月", "6月", "7月","8月","9月","10月","11月","12月"],
                    datasets: [{
                        label: "粉丝数",
                        borderColor: window.chartColors.blue,
                        backgroundColor: window.chartColors.blue,
                        data: [110,120,340,210,100,120,220,30,40,190,223,450],
                        fill: false,
                    }]
                },
                options: {
                    responsive: true,
                    title:{
                        display: true,
                        text: "最近7天粉丝增长情况"
                    },
                    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'
                            }
                        }]
                    }
                }
            };

            window.onload = 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>