步骤:
一、引入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数据格式。我们要做的只需要把数据,封装成他们想要的格式,就可以轻松生成图标