{extend name="common/common2" /}
{block name="main"}
<div class="ibox-content">
<div class="ibox">
    <style>
        .order-data {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .order-data-content {
            flex: 0.1;
        }
        .order-data-title, .order-data-num {
            font-size: 24px;
            text-align: center;
        }
        .order-data-num {
            display: block;
            color: #d43030;
        }
        .order-chart {
            height: 500px;
        }
    </style>
    <div class="panel-group">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="order-data">
                    <div class="order-data-content">
                        <p class="order-data-title">用户总数</p>
                        <span class="order-data-num">{$allCount}</span>
                    </div>
                   {foreach $list as $k=>$v}
                    <div class="order-data-content">
                        <p class="order-data-title">{$v['name']}</p>
                        <span class="order-data-num">{$v['value']}</span>
                    </div>
                    {/foreach}
                </div>
                <div class="order-chart">
                    <div id="mountNode"></div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
{/block}
{block name="script"}
<script src="/static/antv/g2.min.js"></script>
<script src="/static/antv/data-set.min.js"></script>
<script>

    var data = {:json_encode($list)};

    var chart = new G2.Chart({
        container: 'mountNode',
        forceFit: true,
    });

    chart.source(data);

    chart.legend({
        position: 'bottom', // 设置图例的显示位置
        itemGap: 20 // 图例项之间的间距
    });

    chart.coord('theta', {
        radius: 0.75,
        innerRadius: 0.6
    });
    // 辅助文本
    chart.guide().html({
        position: ['50%', '50%'],
        html: '<div style="color:#8c8c8c;font-size: 24px;text-align: center;width: 10em;">{$allCount}<br><span style="color:#8c8c8c;font-size:14px">用户总数</span></div>',
        alignX: 'middle',
        alignY: 'middle'
    });
    chart.tooltip({
        showTitle: false
    });
    chart.intervalStack().position('value').color('name').shape('sliceShape');

    chart.render();

</script>
{/block}