1.action中获取到数据
@Override public String execute() throws Exception { List<Student> find = echartsService.find(); Gson g = new Gson(); String list = g.toJson(find); ServletActionContext.getResponse().setCharacterEncoding("UTF-8"); ServletActionContext.getResponse().getWriter().write(list); System.out.println(list); return NONE; }
2.jsp页面应用echarts
<script type="text/javascript" src="<%=path%>/js/jquery-3.1.1.js"></script> <script type="text/javascript" src="<%=path%>/js/echarts.js" /></script> <script type="text/javascript"> $(function() { var myChart = echarts.init(document.getElementById("main")); $("#btn").click(function() { $.ajax({ url : "echarts", success : function(data) { var result = eval("(" + data + ")"); var noe = new Array(); var two = new Array(); $.each(result, function(i, dom) { noe[i] = dom.name; two[i] = dom.address; }); // 指定图表的配置项和数据 var option = ({ title : { text : 'ECharts图表' }, tooltip : { trigger : 'axis', axisPointer : { // 坐标轴指示器，坐标轴触发有效 type : 'cross' // 默认为直线，可选为：'line' | 'shadow'|'cross' } }, toolbox : { show : true, feature : { dataView : { show : true, readOnly : true }, restore : { show : true }, magicType : { type : [ 'line', 'bar', 'stack', 'tiled' ] }, saveAsImage : { show : true } } }, legend : { data : [ '人数' ] }, xAxis : { data : two }, yAxis : {}, series : [ { name : '人数', type : 'bar', data : noe } ] }); myChart.setOption(option); }, error : function(data) { alert("请求报表错误"); } }); }); }); </script>
3.准备一个具有宽高的容器(必须有宽高)
<body>
<input type="button" value="显示图表" id="btn" />
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style=" 600px;height:400px;"></div>
</body>
4.效果
