<script src="${base.contextPath}/resources/hls/hlsPage/javascript/hlsConponentBase.js" type="text/javascript"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/easypiechart/easypiechart-init.js"></script>
<#--<script src="${base.contextPath}/resources/script/VAT/vat-home-baseinfo.js"></script>-->


<style>
    .hls-precent-chart{
        width: 270px;
        float: left;
        background: #ffffff;
        border-radius: 5px;
    }
    .hls-precent-chart-img{
        background-color: #FF0000;
        border-radius: 45px;
        height: 15px;
        width: 15px;
        float: left;
        margin-left: 30px;
        margin-bottom: 20px
    }
    .hls-precent-chart-title{
        float: left;margin-bottom: 20px; width: 85px
    }
</style>


<div <#if style??> style="${style!}"</#if>  class="hls-precent-chart" >
    <div id="circle" style="width: 200px;height: 200px;margin:35px; float: left;">
        <div id="circle-canvas${id}" data-toggle="easypiechart" class="easyPieChart"
             data-barcolor="#FF0000" data-linecap="butt" data-animate="500" data-linewidth="15"
             data-size="200" data-trackcolor="#fff1a8">
            <span id="percent-span${id}" class="font-150"></span>
        </div>
    </div>
    <div height: 30px; ></div>
    <div id="${id}">

    </div>

</div>



<script>
    ${hlsDataSource}.fetch(function(datas){
        var config = ${config};
        config.hlsDataSource = datas;
    ${id} = new HlsPercentChart();
    ${id}._init(config);
    });
</script>