// 路径配置 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请到下载