SSH-BOS项目：引入数据可视化工具（Highcharts和echarts）

步骤：

    一、引入Highcharts和echarts的资源文件

        highcharts官网：http://www.hcharts.cn/

        

        echarts官网：http://echarts.baidu.com/

        

    二、页面修改（subarea.jsp）

        引入js文件

<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/echarts.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/highcharts/highcharts.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/highcharts/modules/exporting.js"></script>
<script type="text/javascript">

        在toolbar中新增两个按钮：

{
		id : 'button-chart',	
		text : '查看图表(echarts)',
		iconCls : 'icon-search',
		handler : doShowChart
	},
	{
		id : 'button-chart',	
		text : '查看图表(Highcharts)',
		iconCls : 'icon-search',
		handler : doShowHighchart
	}

        对应的按钮点击事件：

//图表展示
	function doShowChart(){
		$('#showChart').window("open");
		var myChart = echarts.init(document.getElementById("charts"));
		
		$.post('SubareaAction_showChart.action',function(data){
			//生成图表数据
			var option = {
					//标题属性
				    title : {
				        text: '分区分布',
				        top:50,
				        x:'center'
				    },
				    //提示框属性
				    tooltip : {
				        trigger: 'item',
				        formatter: "{a} <br/>{b} : {c} ({d}%)"
				    },
				   	//图例属性
				    legend: {
				        orient: 'vertical',
				        left: '50',
				        top:'80',
				        data: function(){
				        	var res = [];
				        	for(var i=0;i<data.length;i++){
				        		res.push(data[i][0]);
				        	}
				        	return res;
				        }()
				    },
				    //数据
				    series : [
				        {
				            name: '分区分布',
				            type: 'pie',
				            radius : '55%',
				            center: ['50%', '60%'],
				            data:function(){
					        	var res = [];
					        	for(var i=0;i<data.length;i++){
					        		res.push({
				            			name:data[i][0],
				            			value:data[i][1]
				            		});
					        	}
					        	return res;
					        }(),
				            itemStyle: {
				                emphasis: {
				                    shadowBlur: 10,
				                    shadowOffsetX: 0,
				                    shadowColor: 'rgba(0, 0, 0, 0.5)'
				                }
				            }
				        }
				    ]
				};
			
			myChart.setOption(option);
		});
	}
	
	function doShowHighchart(){
		$('#showHighcharts').window("open");
		
		$.post('SubareaAction_showChart.action',function(data){
			$('#highcharts').highcharts({
		        title: {
		            text: '分区分布'
		        },
		        tooltip: {
		            headerFormat: '{series.name}<br>',
		            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
		        },
		        plotOptions: {
		            pie: {
		                allowPointSelect: true,
		                cursor: 'pointer',
		                dataLabels: {
		                    enabled: false
		                },
		                showInLegend: true
		            }
		        },
		        series: [{
		            type: 'pie',
		            name: '分区分布',
		            data: data
		        }]
		    });
		});
		
		
	}

SubareaAction（新增方法）：

	/**
	 * 展示图表
	 * @return
	 */
	public String showChart(){
		List<Object> list = subareaService.showChart();
		BOSUtils.writerJson(list, null);
		
		return NONE;
	}

SubareaService、SubareaServiceImpl（新增方法及实现）：

	/**
	 * 展示图表
	 * @return
	 */
	List<Object> showChart();

	@Override
	public List<Object> showChart() {
		return subareaDao.findSubareaGroupByProvince();
	}

SubareaDao、SubareaDaoImpl（新增方法及实现）：

	/**
	 * 按省份分组查询分区信息
	 * @return
	 */
	List<Object> findSubareaGroupByProvince();

	@Override
	public List<Object> findSubareaGroupByProvince() {
		String hql = "SELECT r.province,COUNT(*) FROM Subarea s LEFT OUTER JOIN s.region r GROUP BY r.province";
		return (List<Object>) this.getHibernateTemplate().find(hql);
	}

效果图（第一张图片为echarts构造的图标、第二张则为highcharts构造的图标）：

highcharts和echarts都是数据可视化插件。都是使用JavaScript书写的。两者的区别在于构造数据时使用的json数据格式。我们要做的只需要把数据，封装成他们想要的格式，就可以轻松生成图标