页面部分<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset=& ...
页面部分
<%@ page language="java" pageEncoding="UTF-8"%><!DOCTYPE html><html><head><meta charset="utf-8"><title>ECharts柱状图</title><script type="text/javascript" src='/images/loading.gif' data-original="../js/jquery.min.js"></script><script type="text/javascript" src='/images/loading.gif' data-original="../js/echarts.js"></script></head><body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style="width: 600px;height:400px;"></div> <script type="text/javascript"> $().ready(function() { var myChart = echarts.init(document.getElementById('main')); //图表显示提示信息 myChart.showLoading(); //定义图表options var options = { color : [ '#3398DB' ], title : { text : "通过Ajax获取数据呈现图标示例", subtext : "www.stepday.com", sublink : "http://www.stepday.com/myblog/?Echarts" }, tooltip : { trigger : 'axis' }, legend : { data : [] }, toolbox : { show : true, feature : { mark : false } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value', splitArea : { show : true } } ], series : [ { barWidth : '60%' } ] }; //通过Ajax获取数据 $.ajax({ type : "post", async : false, //同步执行 url : "showEchartBar.action", dataType : "json", //返回数据形式为json success : function(result) { if (result) { //将返回的category和series对象赋值给options对象内的category和series //因为xAxis是一个数组 这里需要是xAxis[i]的形式 options.xAxis[0].data = result.category; options.series = result.series; options.legend.data = result.legend; myChart.hideLoading(); myChart.setOption(options); } }, error : function(errorMsg) { alert("图表请求数据失败啦!"); } }); }); </script></body></html>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：基于SpringMVC框架使用ECharts3.0实现折线图，柱状图，饼状图的绘制
关键词：Spring
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
