<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/sparkline/jquery.sparkline.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/charts/sparkline/sparkline-init.js"></script>
<script src="${base.contextPath}/resources/hls/beyondChart/assets/js/beyond.min.js"></script>

<div <#if style??> style="${style!}" </#if>  class="hls-block-x1 hls-line-chart hls-block-y2 row-body-right-area ${class!}">
    <div id="${id}" class="right-area1-up" style=" background-color: ${bgColor!'#fb6e52'};padding-left:12px;" >
                        <span id="${id}-span" data-sparkline="compositebar" data-height="115px" data-width="270px"
                              data-barcolor="${barColor!'#b0dc81'}"
                              data-barwidth="15px" data-barspacing="5px"
                              data-fillcolor="false" data-linecolor="${lineColor!'#fff'}" data-spotradius="3" data-linewidth="2"
                              data-spotcolor="${spotColor!'#fafafa'}" data-minspotcolor="${minSpotColor!'#fafafa'}" data-maxspotcolor="${maxSpotColor!'#fff'}"
                              data-highlightspotcolor="${highLightSpotColor!'#fff'}" data-highlightlinecolor="${highLightLineColor!'#fff'}"
                              data-composite="7, 6, 5, 7, 9, 10, 8, 7, 6, 6, 4,8">
                                                    8,4,1,2,4,6,2,4,4,8,10,7
                         </span>
    </div>
    <div class="right-area1-down">
        <div class="right-area-down-left">
            <div id="${id}-total-description" class="right-area-down1"></div>
            <div id="${id}-total-amount" class="right-area-down2"></div>
        </div>
        <div class="right-area-down-right">
            <div id="${id}-every-description" class="right-area-down1"></div>
            <div id="${id}-every-amount" class="right-area-down2"></div>
        </div>
    </div>

</div>
<script>
    <#--(function (hlsDataSource){-->
        <#--if(!hlsDataSource){-->
            <#--Hls.showErrorMessage("数据源未定义");-->
        <#--}-->
        <#--var config = ${config};-->
        <#--config.hlsDataSource = hlsDataSource;-->
        <#--${id} = new HlsLineChart();-->
        <#--${id}._init(config);-->
    <#--})("${hlsDataSource!}");-->

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