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