一、Hwebui图形统计组件说明
Hwebui图形统计组件是由fusioncharts-suite-xt图形组件开发而成，图形组件分为：饼图、柱形图、曲线图、仪表图，可以通过属性配置的方式直接展示图形。并且可以实现图形界面的导出。
二、图形界面
三、界面代码
3.1、引入js代码文件
<#macro head color>
<script type="text/javascript" src="${basePath}/js/system_ui/constants.js" ></script>
<script type="text/javascript" src="${basePath}/js/jquery-3.1.0.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery-ui.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.visible.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.validate.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.serializejson.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/messages_zh.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.dataTables.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/dataTables.fixedColumns.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.core.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.excheck.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/jquery.ztree.exhide.min.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/css_browser_selector.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/dist/template.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/template.custom.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/templatePlugin/template.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.charts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.gantt.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.maps.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.powercharts.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.ssgrid.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.treemap.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.widgets.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/fusioncharts/js/fusioncharts.zoomscatter.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/tagsinput.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.base.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.fn.funsioncharts.extends.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/system_ui/poo.main.js" data="deafult"></script>
<script type="text/javascript" src="${basePath}/js/select2.full.min.js" data="deafult"></script>
<script type="text/javascript" language="javascript" src="${basePath}/js/My97DatePicker/WdatePicker.js" data="deafult"></script>
<link rel="stylesheet" href="${basePath}/css/normalize.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/jquery-ui.min.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/jquery-ui-sysbase.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/${color}/main.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/form.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/select2.min.css" data="deafult"></link>
<link rel="stylesheet" href="${basePath}/css/zTreeStyle/zTreeStyle.css" data="deafult" />
<link rel="stylesheet" href="${basePath}/css/buttons.css" data="deafult" />
<link rel="stylesheet" href="${basePath}/css/tagsinput.css" data="deafult"></link>
<script type="text/javascript">
var basePath = "${basePath}";
var currentColor = "${currentColor}";
</script>
<#nested>
</#macro>3.2、界面代码
<button type="button" onclick="batchExport()">批量导出</button>
<div class="bar-panel">
<div class="bar no-shadow">
<ul></ul>
</div>
<div class="context-panel" >
<div class="funshionChart-container" datatype="charts" chartType="doughnut2d" width="400" height="350" dataFormat="json">
<div class="funshionChart-data">{"chart":{"caption":"大标题","subCaption":"子标题","numberPrefix":"￥","paletteColors":"#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000","bgColor":"#ffffff","showBorder":"0","use3DLighting":"0","showShadow":"0","enableSmartLabels":"0","startingAngle":"310","showLabels":"0","showPercentValues":"1","showLegend":"1","legendShadow":"0","legendBorderAlpha":"0","defaultCenterLabel":"Total revenue: 64.08K","centerLabel":"Revenue from $label: $value","centerLabelBold":"1","showTooltip":"0","decimals":"0","captionFontSize":"14","subcaptionFontSize":"14","subcaptionFontBold":"0","exportEnabled":1,"exportAction":"_save","exportHandler":"${basePath}/default-export-charts.do"},"data":[{"label":"Food","value":"28504"},{"label":"Apparels","value":"14633"},{"label":"Electronics","value":"10507"},{"label":"Household","value":"4910"}]}</div>
<div class="funshionChart-content"></div>
</div>
</div>
</div>
<div class="bar-panel">
<div class="bar no-shadow">
<ul>
</ul>
</div>
<div class="context-panel">
<div class="funshionChart-container" datatype="charts" chartType="scrollline2d" width="500" height="350" dataFormat="json">
<div class="funshionChart-data">{"chart":{"caption":"Sales Trends","subCaption":"(FY 2012 to FY 2013)","xAxisName":"Month","yAxisName":"Revenue","showValues":"0","numberPrefix":"$","showBorder":"0","showShadow":"0","bgColor":"#ffffff","paletteColors":"#008ee4","showCanvasBorder":"0","showAxisLines":"0","showAlternateHGridColor":"0","divlineAlpha":"100","divlineThickness":"1","divLineIsDashed":"1","divLineDashLen":"1","divLineGapLen":"1","lineThickness":"3","flatScrollBars":"1","scrollheight":"10","numVisiblePlot":"12","showHoverEffect":"1"},"categories":[{"category":[{"label":"Jan 2012"},{"label":"Feb 2012"},{"label":"Mar 2012"},{"label":"Apr 2012"},{"label":"May 2012"},{"label":"Jun 2012"},{"label":"Jul 2012"},{"label":"Aug 2012"},{"label":"Sep 2012"},{"label":"Oct 2012"},{"label":"Nov 2012"},{"label":"Dec 2012"},{"label":"Jan 2013"},{"label":"Feb 2013"},{"label":"Mar 2013"},{"label":"Apr 2013"},{"label":"May 2013"},{"label":"Jun 2013"},{"label":"Jul 2013"},{"label":"Aug 2013"},{"label":"Sep 2013"},{"label":"Oct 2013"},{"label":"Nov 2013"},{"label":"Dec 2013"}]}],"dataset":[{"data":[{"value":"27400"},{"value":"29800"},{"value":"25800"},{"value":"26800"},{"value":"29600"},{"value":"32600"},{"value":"31800"},{"value":"36700"},{"value":"29700"},{"value":"31900"},{"value":"34800"},{"value":"24800"},{"value":"26300"},{"value":"31800"},{"value":"30900"},{"value":"33000"},{"value":"36200"},{"value":"32100"},{"value":"37500"},{"value":"38500"},{"value":"35400"},{"value":"38200"},{"value":"33300"},{"value":"38300"}]}]}</div>
<div class="funshionChart-content"></div>
</div>
</div>
</div>
<div class="bar-panel">
<div class="bar no-shadow">
<ul>
</ul>
</div>
<div class="context-panel">
<div class="funshionChart-container" datatype="charts" chartType="bar3d" width="400" height="350" dataFormat="json">
<div class="funshionChart-data">{"chart":{"caption":"Top 5 Stores by Sales","subCaption":"Last month","xAxisName":"Stores","yAxisName":"Sales (in USD)","numberPrefix":"$","alignCaptionWithCanvas":"0","canvasBgAlpha":"0","theme":"fint"},"data":[{"label":"Bakersfield Central","value":"880000"},{"label":"Garden Groove harbour","value":"730000"},{"label":"Los Angeles Topanga","value":"590000"},{"label":"Compton-Rancho Dom","value":"520000"},{"label":"Daly City Serramonte","value":"330000"}]}</div>
<div class="funshionChart-content"></div>
</div>
</div>
</div>
<div class="bar-panel">
<div class="bar no-shadow">
<ul>
</ul>
</div>
<div class="context-panel">
<div class="funshionChart-container" datatype="charts" chartType="angulargauge" width="400" height="350" dataFormat="json">
<div class="funshionChart-data">{"chart":{"caption":"Speedometer","captionFont":"Arial","captionFontColor":"#333333","manageresize":"1","origw":"320","origh":"320","tickvaluedistance":"-10","bgcolor":"#FFFFFF","upperlimit":"240","lowerlimit":"0","basefontcolor":"#FFFFFF","majortmnumber":"9","majortmcolor":"#FFFFFF","majortmheight":"8","majortmthickness":"5","minortmnumber":"5","minortmcolor":"#FFFFFF","minortmheight":"3","minortmthickness":"2","pivotradius":"10","pivotbgcolor":"#000000","pivotbordercolor":"#FFFFFF","pivotborderthickness":"2","tooltipbordercolor":"#FFFFFF","tooltipbgcolor":"#333333","gaugeouterradius":"115","gaugestartangle":"240","gaugeendangle":"-60","gaugealpha":"0","decimals":"0","showcolorrange":"0","placevaluesinside":"1","pivotfillmix":"","showpivotborder":"1","annrenderdelay":"0","gaugeoriginx":"160","gaugeoriginy":"160","showborder":"0"},"dials":{"dial":[{"value":"65","bgcolor":"000000","bordercolor":"#FFFFFF","borderalpha":"100","basewidth":"4","topwidth":"4","borderthickness":"2","valuey":"260"}]},"annotations":{"groups":[{"x":"160","y":"160","items":[{"type":"circle","radius":"130","fillasgradient":"1","fillcolor":"#4B4B4B,#AAAAAA","fillalpha":"100,100","fillratio":"95,5"},{"type":"circle","x":"0","y":"0","radius":"120","showborder":"1","bordercolor":"cccccc","fillasgradient":"1","fillcolor":"#ffffff,#000000","fillalpha":"50,100","fillratio":"1,99"}]},{"x":"160","y":"160","showbelow":"0","scaletext":"1","items":[{"type":"text","y":"100","label":"KPH","fontcolor":"#FFFFFF","fontsize":"14","bold":"1"}]}]}}</div>
<div class="funshionChart-content"></div>
</div>
</div>
</div>代码说明：
datatype="charts"：组件类别
chartType="doughnut2d"：图形组件类别
funshionChart-data：图形json数据
dataFormat="json"：数据格式类型
下载web项目地址：