// 路径配置
require.config({
paths : {
echarts : 'js/build/dist'//注意路径问题
}
});
// 使用
require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
], draw);
function draw(ec) {
// 基于准备好的dom,初始化echarts图表
$("#main").css({"width":"780px","height":"400px"});
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '降水' ]
},
toolbox : {
show : true,
feature : {
saveAsImage : {
show : true
}
}
},
xAxis : [ {
type : 'category',
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "降水",
"type" : "bar",
} ]
};
// 为echarts对象加载数据
loadDATA(option);
myChart.setOption(option);
}
function loadDATA(option) {
$.ajax( {
url : 'yearOnePicRain.action',
type : 'get',
dataType : 'json',
async : false,
data : {
'beginyear' : beginyear,
'endyear' : endyear,
'station' : station
},
success : function(result) {
if (result) {
$('#main').show();
option.xAxis[0].data = [];
for (var i = 0; i < result.length; i++) {
option.xAxis[0].data
.push(result[i].YEAR);
}
option.series[0].data = [];
for (var i = 0; i < result.length; i++) {
option.series[0].data
.push(result[i].AVG);
}
}
}
});
}
后台代码:
HttpServletRequest req = ServletActionContext.getRequest();
req.setCharacterEncoding("UTF-8");
int rows = Integer.parseInt(req.getParameter("rows"));
int page = Integer.parseInt(req.getParameter("page"));
String begindate = req.getParameter("begindate");
String enddate = req.getParameter("enddate");
String station = req.getParameter("station");
station = new String(station.getBytes("ISO-8859-1"), "UTF-8");
Map map = new HashMap();
map.put("begindate", begindate);
map.put("enddate", enddate);
map.put("station", station);
map.put("rows", rows);
map.put("page", page);
HttpServletResponse response = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
PageInfo pageInfo = this.hRainService.historyquery(map);
PrintWriter writer = response.getWriter();
JSONObject jsondata = JSONObject.fromObject(pageInfo);
writer.print(jsondata.toString());
所需echarts.js文件请到
点击打开链接下载