${Styles.htmlOverflowHidden()}
${Scripts.src("/zinc/chart/highcharts.js")}
${Scripts.src("/zinc/chart/exporting.js")}
${Scripts.src("/zinc/chart/highcharts-zh_CN.js")}
<script>
Z.onload(function()
{
    var chart = Highcharts.chart('container', 
    {
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false,
        type: 'pie',
        title: {text: '质检违规原因分析'},
        tooltip: {headerFormat: '{series.name}<br>',pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'},
        plotOptions: 
        {
            pie: 
            {
                allowPointSelect: true,  // 可以被选择
                cursor: 'pointer',       // 鼠标样式
                dataLabels: 
                {
                    enabled: true,
                    useHTML: true,
                    format: '<span style=" white-space:normal;">{point.name}</span>'
                    + '<span style="display:block;">订单数量：{point.y}</span>'
                    + '<span style="display:block;">占比：{point.percentage:.1f} % </span>',
                }
            }
        },
        series: 
        [{
            type: 'pie',
            name: '违规原因占比',
            data: 
            [
                <#for item : map.entrySet()>
                ['${item.getKey()}', ${item.getValue()}],
                </#for>
            ]
        }]
    });
});

</script>
${zhiqim_manager_breadcrumb("质检原因统计")}
${zhiqim_manager_content()}

<#-- 导航 -->
<div data-role="z-tabnav" class="z-tabnav-main z-mg-b20 ${zmr_color_class}">
<nav>
<ul>
    <li class="z-active">质检原因统计</li>
    <#if ZmrPathRule.check(request, "/qcDesignerStat.htm")><li onclick="Z.L.href('/qcDesignerStat.htm');">设计师质检统计</li></#if>
    <#if ZmrPathRule.check(request, "/qcDisposeStat.htm")><li onclick="Z.L.href('/qcDisposeStat.htm');">质检处理统计</li></#if>
</ul>
<div class="z-float-left z-mg10 z-lh30">
<form name="theForm" action="/qcReasonStat.htm" method="post">
    &nbsp;质检日期：
    <input name="beginDate" class="z-input z-w100 ${zmr_color_class}" readonly="true" onfocus="Z.date(this);" value="${beginDate}">&nbsp;-
    <input name="endDate" class="z-input z-w100 ${zmr_color_class}" readonly="true" onfocus="Z.date(this);" value="${endDate}">
    <button class="z-button z-w80 z-blue z-mg-l10"><i class="z-font z-query"></i>查询</button>
</form>
</div>
</nav>
</div>

    
<table class="z-table z-bordered z-pd6 z-bg-white">
<tr>
    <td width="60%"><div id="container" class="z-bg-white" style="min-width:400px;height:600px"></div></td>
    <td width="*">
        <table class="z-table z-bordered-line z-h40-tr z-pd5 z-bg-white z-text-center">
             <tr>
                <td width="50%">违规原因</td>
                <td width="50%">违规单数</td>
             </tr>
             <#for item : map.entrySet()>
             <tr>
                <td>${item.getKey()}</td>
                <td>${item.getValue()}</td>
             </tr>
             </#for>
             ${zhiqim_manager_tr_no_record(pageResult, 20, "没有质检订单")}
        </table>
    </td>
</tr>
</table>
${zhiqim_manager_content_end()}