一、引入Highcharts和echarts的资源文件
highcharts官网:http://www.hcharts.cn/
echarts官网:http://echarts.baidu.com/
二、页面修改(subarea.jsp)
引入js文件
在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}
{b} : {c} ({d}%)"
},
//图例属性
legend: {
orient: 'vertical',
left: '50',
top:'80',
data: function(){
var res = [];
for(var i=0;i',
pointFormat: '{point.name}: {point.percentage:.1f}%'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: false
},
showInLegend: true
}
},
series: [{
type: 'pie',
name: '分区分布',
data: data
}]
});
});
}
/**
* 展示图表
* @return
*/
public String showChart(){
List
/**
* 展示图表
* @return
*/
List
@Override
public List
/**
* 按省份分组查询分区信息
* @return
*/
List
@Override
public List
highcharts和echarts都是数据可视化插件。都是使用JavaScript书写的。两者的区别在于构造数据时使用的json数据格式。我们要做的只需要把数据,封装成他们想要的格式,就可以轻松生成图表