{extend name="Public/base" /}
{block name="js"}
<script>
    var ON_SELECT_COLOR = "{$on_select_color}" ? "#{$on_select_color}" : '#ffd7dc';
    var colModel = {$colModel} ? {$colModel} : [];
    var colNames = {$colNames} ? {$colNames} : [];
    var R_menu_all = [];

    {volist name="right_menu_list" id="vo"}
    R_menu_all.push("{$vo}");
    {/volist}
</script>
<script src="__PUBLIC__/js/public.js?v={$Think.const.APP_VERSION}"></script>
<script src="__PUBLIC__/js/echarts.min.js"></script>
{/block}
{block name="css"}
<link rel="stylesheet" href="__PUBLIC__/font/fonts/iconfont.css?v={$Think.const.APP_VERSION}">

<style type="text/css">
    .bd3{
        width: 100% ;
        height: auto;
        max-width: 1750px;
        min-width: 1550px;
        overflow: hidden;
        padding: 12px;
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;
        align-content: flex-start;
    }
    .sb1{
        max-width: 560px;
        min-width: 470px;
        width: 32.5%;
        height: 350px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .sb1_title{
        width: 100%;
        height: 60px;
        border-bottom: 1px solid #e7e7e7;
        padding: 0 20px;
        box-sizing: border-box;
        font-size: 18px;
        color: #333;
        line-height: 60px;
    }
    .sb3{
        width: 100%;
        height: 300px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .sb2{
        width: 50%;
        height: 147px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        align-items: center;
    }
    .sb2 image{
        width: 66px;
        height: 66px;
    }
    .m2{
        width: 150px;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        padding-left: 15px;
    }
    .m2 strong{
        width: 100%;
        height: auto;
        font-size: 26px;
        color: #333;
    }
    .m2 span{
        width: 100%;
        height: auto;
        font-size: 16px;
        color: #666;
    }
    .sb12{
        max-width: 560px;
        min-width: 470px;
        width: 32.5%;
        height: 470px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .sb13{
        /*max-width: 1160px;*/
        width: 65.5%;
        height: 470px;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        margin-right: 12px;
        margin-bottom: 12px;
    }
    .schart2{
        height:450px;
        width: 100%;
    }
    .schart1{
        height:400px;
        width: 95%;
    }
</style>
{/block}
{block name="main"}
<div class="if_wrap" style="background-color: #eff3f8;">
    <div class="bd3">
        <div class="sb1">
            <div class="sb1_title">客户数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m1.png">
                    <div class="m2">
                        <strong>{$all}</strong>
                        <span>总客户数</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m2.png">
                    <div class="m2">
                        <strong>{$the_month}</strong>
                        <span>本月新增客户数</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m3.png">
                    <div class="m2">
                        <strong>{$all_vip}</strong>
                        <span>总会员数</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m4.png">
                    <div class="m2">
                        <strong>{$the_month_vip}</strong>
                        <span>本月新增会员数</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sb1">
            <div class="sb1_title">财务数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m5.png">
                    <div class="m2">
                        <strong>{$month_pay}</strong>
                        <span>本月实收</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m6.png">
                    <div class="m2">
                        <strong>{$vip_money}</strong>
                        <span>总会员卡余额</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m7.png">
                    <div class="m2">
                        <strong>{$month_cz}</strong>
                        <span>本月新增充值</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m8.png">
                    <div class="m2">
                        <strong>{$month_kx}</strong>
                        <span>本月卡销</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="sb1">
            <div class="sb1_title">订单数据</div>
            <div class="sb3">
                <div class="sb2">
                    <img src="__PUBLIC__/img/m9.png">
                    <div class="m2">
                        <strong>{$order}</strong>
                        <span>总订单数</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m10.png">
                    <div class="m2">
                        <strong>{$month_order}</strong>
                        <span>本月新增订单</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m11.png">
                    <div class="m2">
                        <strong>{$not_photo}</strong>
                        <span>待拍套系</span>
                    </div>
                </div>
                <div class="sb2">
                    <img src="__PUBLIC__/img/m12.png">
                    <div class="m2">
                        <strong>{$not_photo_money}</strong>
                        <span>待拍套系价值</span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 第二行显示内容 -->
        <div class="sb12">
            <div class="sb1_title">消费类型分析</div>
            <div class="sb3">
                <div id="container" class="schart2"></div>
            </div>
        </div>
        <div class="sb13">
            <div class="sb1_title">订单分析</div>
            <div class="sb3">
                <div id="psChart1" class="schart1"></div>
            </div>
        </div>

    </div>
</div>

<script type="text/javascript">


    var consumptiontype = JSON.parse('{$consumptiontype}');
    var consumption_type_arr = JSON.parse('{$consumption_type_arr}');

    var month_order_obj = JSON.parse('{$month_order_arr}');
    console.log(month_order_obj)
    var month_order_arr = [];
    $.each(month_order_obj,function(k,v){
        month_order_arr.push(v)
    })

    console.log(month_order_arr)
    console.log('示例',[320,914,958,255,356,586,444,336,999,332,222,222]);

    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        // title: {
        //     text: '南丁格尔玫瑰图',
        //     subtext: '纯属虚构',
        //     left: 'center'
        // },
        color: ['#5be3c1', '#fb7293', '#ffb69e', '#ffdb5c', '#8e86e2', '#58b1e0'],
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            right: '30',
            top: '60',
            data: consumptiontype
        },
        series: [
            {
                name: '消费类型',
                type: 'pie',
                radius: [30, 110],
                center: ['35%', '50%'],
                roseType: 'area',
                data: consumption_type_arr
            }
        ]
    };

    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
    // 使用刚指定的配置项和数据显示图表。
    // psChart1.setOption(option1);

    var psChart1 = echarts.init(document.getElementById('psChart1'));

    var option1 = {
        color: ['#4dcdad', '#c9f0e6'],
        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        // legend: {
        //     padding: 0,
        //     top: "5%",
        //     data: ['今年', '去年'],
        //     textStyle: {
        //         fontSize: 14,
        //         color: '#000'
        //     },
        //     itemWidth: 80,
        //     itemHeight: 20,
        // },
        grid: {
            top: '50',
            left: '50',
            right: 0,
            bottom: '30',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                lineStyle: {
                    color: '#333',
                    width: 1
                }
            }
        }],
        yAxis: [{
            type: 'value',
            axisLine: {
                lineStyle: {
                    color: '#333',
                    width: 1
                }
            }
        }],
        series: [
            {
                name: '订单量',
                type: 'bar',
                stack: '订单量',
                barWidth: '30%',
                data: month_order_arr
            },


        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    psChart1.setOption(option1);
</script>
{/block}