Echarts 动态获取数据进行图表展示的Java示例
Echarts官网的demo都采用的数据都是静态数据，本demo是在Echarts官网入门demo的基础上改的，从后台 获取数据并展示，供入门参考 </div>
前端页面代码
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <% String path = request.getContextPath(); %> <!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 800px; height: 300px"></div> <!-- ECharts单文件引入 --> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script type="text/javascript" src="build/dist/echarts.js"></script> <script src="http://echarts.baidu.com/build/dist/echarts.js"></script> <script type="text/javascript"> // 路径配置 require.config({ paths : { echarts : 'build/dist' } }); // 使用 require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载 ], function(ec) { // 基于准备好的dom，初始化echarts图表 var myChart = ec.init(document.getElementById('main')); var option = { tooltip : { show : true }, legend : { data : [] }, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value' } ], series : [] }; $.ajax({ type : "POST", url : "gettestdata", dataType : "json", success : function(result) { //将从后台接收的json字符串转换成json对象 var jsonobj = eval(result); //给图标标题赋值 option.legend.data = jsonobj.legend; //读取横坐标值 option.xAxis[0].data = jsonobj.axis; var series_arr = jsonobj.series; //驱动图表生成的数据内容，数组中每一项代表一个系列的特殊选项及数据 for (var i = 0; i < series_arr.length; i++) { option.series[i] = result.series[i]; } //过渡控制，隐藏loading（读取中） myChart.hideLoading(); // 为echarts对象加载数据 myChart.setOption(option); } }); }); </script> </body> 后台数据封装代码
//通过ajax请求数据 将请求的数据返回到页面进行图表的显示 @RequestMapping("gettestdata") public void getTestData(HttpServletResponse response) { List<String> legend = new ArrayList<String>(Arrays.asList(new String[] { "销量"})); List<String> axis = new ArrayList<String>( Arrays.asList(new String[] { "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" })); List<Series> series = new ArrayList<Series>(); series.add(new Series("销量", "bar", new ArrayList<Integer>(Arrays.asList(5, 20, 40, 10, 10, 20)))); Echarts echarts = new Echarts(legend, axis, series); response.setContentType("text/html;charset=utf-8"); PrintWriter out; try { out = response.getWriter(); Gson gson = new Gson(); String str = gson.toJson(echarts); System.out.println("str:"+str); out.write(str); out.flush(); out.close(); } catch (IOException e) { e.printStackTrace(); } }