jsp
<div id ="chartContainer" style="width:98%;height:48%" >
</div >
js
require .config({paths : {echarts : basePath+'/libs/echarts' }});
require ([ 'echarts' ,'echarts/chart/bar' , 'echarts/chart/line' ],DrawEChart);
function DrawEChart (echarts) {
option = {
title : {'text' :'用电量' },
tooltip : {
trigger: 'axis' ,
axisPointer : {
type : 'shadow'
}
},
legend: {
x:'right' ,
data:['用电量预测值' , '用电量预测最大值' , '用电量预测最小值' ]
},
toolbox: {
show : true ,
orient: 'vertical' ,
x: 'right' ,
y: 'center' ,
feature : {
magicType : {show: true , type: ['line' , 'bar' , 'stack' , 'tiled' ]},
restore : {show: true },
saveAsImage : {show: true }
}
},
calculable : true ,
xAxis : [
{
type : 'category' ,
data : ['' ]
}
],
yAxis : [
{
'type' :'value' ,
'name' :'万千瓦时'
}
],
series : [
{
name:'用电量预测值' ,
type:'line' ,
data:[]
},
{
name:'用电量预测最大值' ,
type:'line' ,
data:[]
},
{
name:'用电量预测最小值' ,
type:'line' ,
data:[]
}
]
};
$.ajax({
type : "get" ,
cache : false ,
url : basePath + "/sumServlet.do?action=chartData" ,
dataType : "json" ,
success : function (result) {
console.log(Object .keys(result).length);
for (var key in result){
console.log("属性:" + key + ",值:" + JSON .stringify(result[key]));
if (result["Axis" ].length>0 ){
option.xAxis[0 ].data = result["Axis" ];
option.series[0 ].data = result["powerFore" ];
option.series[1 ].data = result["powerForeMax" ];
option.series[2 ].data = result["powerForeMin" ];
}
}
myChart = echarts.init(document.getElementById('chartContainer' ));
myChart.setOption(option);
}
});
}
servlet
PrintWriter out = response.getWriter ()
JSONObject data = new JSONObject()
data = this.sumService .chartData ()
logger.info ("datachart:" + data.toString ())
out .write (data.toString ())
out .flush ()
out .close ()
service
...
data.put("powerFore" , powerForeArray);
data.put("powerForeMax" , powerForeMaxArray);
data.put("powerForeMin" , powerForeMinArray);
data.put("Axis" ,xArray);//年份
...