{extend name="common/common2" /}
{block name="main"}
<div class="row">
    <div class="col-sm-12">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>{$meta_title}</h5>

            </div>
            <div class="ibox-content">
                <div class="panel-body" id="printer">
                    <div class="form-horizontal">
                        <div>
                            <fieldset>
                                <div class="col-xs-6">
                                    {foreach $data as $k=>$v}
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">{$v.name}订单数</label>
                                        <div class="col-sm-5"><input class="form-control" value='{$v.value}' readonly ></div>
                                    </div>
                                    {/foreach}
                                </div>
                                <div class="col-xs-6">
                                    <div id="orders-chart" style="height:400px;"></div>
                                </div>
                            </fieldset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script src="/static/echarts.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("orders-chart");
    var myChart = echarts.init(dom);

    var labels = {:json_encode($data)};
    var datas = [];
    for (let o in labels){
        datas.push({
            name: labels[o].name,
            value:labels[o].value
        })
    }
    option = null;
    option = {
        title: {
            text: '订单情况',
            subtext: '',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '订单量',
                type: 'pie',
                radius: '50%',
                data:datas,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }
</script>
{/block}