huahuibao/app/admin/views/stat/index.php

<?php
use backend\widgets\TabWidget;

echo TabWidget::widget(['list' => $this->context->menuList, 'currentMenu' => $this->context->id]);
?>
<div class="panel panel-default">
	<?php
	use backend\widgets\SubTabWidget;
	
	echo SubTabWidget::widget(['list' => $this->context->subMenuList, 'currentMenu' => $this->context->action->id]);
	?>

    <div class="dataTables_wrapper form-inline dt-bootstrap no-footer">

        <div class="row">
            <form action="" method="GET">
                <div class="col-xs-6">
                    <div class="dataTables_length" style="margin:15px 0 15px 0;">
                        <button class="btn btn-info btn-single">最近7天</button>
                        <button class="btn btn-secondary btn-single">最近30天</button>
                        <button class="btn btn-info btn-single">本月</button>
                        <button class="btn btn-info btn-single">上个月</button>
                        <button class="btn btn-info btn-single">最近3个月</button>
                        &nbsp;&nbsp;
                        <label>自定义时间：<input type="text" name="date" class="form-control" autocomplete="off" id="getDate"></label>
                        <input class="btn btn-secondary btn-single" type="submit" name="" value="搜索">
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="panel-heading" style="margin-top:30px;margin-bottom:10px;">
        <span>总收入：<?= $source['totalAmount'] ?>&nbsp;</span>
		<?php foreach ($source['data'] as $thisIncome) { ?>
            <span><?= $thisIncome['name'] ?>：<?= $thisIncome['value'] ?>&nbsp;</span>
		<?php } ?>
    </div>
    <div class="panel-heading" style="margin-top:30px;margin-bottom:10px;">
        <h5 class="panel-title" style="font-size:14px">变化趋势</h5>
    </div>
    <div id="myTrend" style="height:300px;"></div>

    <div class="panel-heading" style="margin-top:30px;margin-bottom:10px;">
        <h5 class="panel-title" style="font-size:14px">占比情况</h5>
    </div>
    <div style="padding:0 0 0 60px;margin-top:50px;">
        <div id="source_category" style="height:300px;width:28%;display:inline-block;margin-left:80px;"></div>
        <div id="product_category" style="height:300px;width:28%;display:inline-block;"></div>
        <div id="usage_category" style="height:300px;width:28%;display:inline-block;margin-left:80px;"></div>
    </div>

    <div class="panel-heading" style="margin-top:30px;margin-bottom:10px;">
        <h5 class="panel-title" style="font-size:14px">用途明细</h5>
    </div>
    <div id="latestDay" style="height:300px;"></div>
</div>
<!-- footer -->
<?php
use backend\widgets\FooterWidget;

?>
<?= FooterWidget::widget() ?>
<!-- footer -->
<script src="/js/layDate-v5.0.9/laydate.js"></script>
<script>
    //执行一个laydate实例

    laydate.render({
        elem: '#getDate',
        range: true,
        value: '<?= $_GET['date'] ?>',
    });
</script>

<script src="/js/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
    // 路径配置
    require.config({
        paths: {
            echarts: '/js/echarts/build/dist'
        }
    });

    // 使用
    require(
        [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
            'echarts/chart/pie',
            'echarts/chart/line'
        ],
        function (ec) {

            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('product_category'));
            var option = option = {
                title: {
                    text: '主要用途',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: <?= json_encode($usage['usageName']) ?>
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: <?= json_encode($usage['data']) ?>
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);


            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('usage_category'));
            var option = option = {
                title: {
                    text: '收入来源',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: <?= json_encode($source['sourceTypeName']) ?>
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: <?= json_encode($source['data']) ?>
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);

            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('source_category'));
            var option = option = {
                title: {
                    text: '分类占比',
                    subtext: '',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    x: 'left',
                    data: <?= json_encode($category['categoryName']) ?>
                },
                calculable: true,
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: <?= json_encode($category['data']) ?>
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);

            var myTrend = ec.init(document.getElementById('myTrend'));
            option = {
                title: {
                    text: '',
                    x: 'left'
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['金额']
                },
                calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: <?= $latestIncomeDate ?>
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    }
                ],
                series: [
                    {
                        name: '金额',
                        type: 'line',
                        data: <?= $latestIncomeAmount ?>
                    }
                ]
            };
            myTrend.setOption(option);

            // 基于准备好的dom，初始化echarts图表。
            var myChart = ec.init(document.getElementById('latestDay'));
            var option = {
                tooltip: {
                    show: true
                },
                legend: {
                    data: ['收入']
                },
                xAxis: [
                    {
                        type: 'category',
                        data: ["年销花", "婚礼布置", "培训", "花束", "开业花篮", "绿植"]
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        "name": "收入",
                        "type": "bar",
                        "data": [5, 20, 40, 10, 10, 20]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);

        }
    );
</script>