Echarts通过Ajax实现动态数据加载.docxVIP

Echarts（3.x版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过ajax发送请求；2.服务器端Servlet接收请求；3.生成json数据并返回给客户端；4.客户端接收数据后显示。1.客户端通过ajax发送请求先绘制一个最简单的Echarts图表：（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码）!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtml lang=zh-CNhead meta http-equiv=Content-Type content=text/html; charset=UTF-8 titleECharts/title!-- 引入 echarts.js -- script type=text/javascript src=echarts.min.js/script!-- 引入jquery.js -- script type=text/javascript src=jquery-1.12.3.js/script/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom -- div id=main style=width: 600px;height:400px;/div script type=text/javascriptvarmyChart = echarts.init(document.getElementById(main)); // 显示标题，图例和空的坐标轴myChart.setOption({title: { text: 异步数据加载示例 },tooltip: {},legend: { data:[销量] },xAxis: {data: [] },yAxis: {},series: [{ name: 销量,type: bar,data: [] }] });　　/script/body/html看到了吧，现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。下面贴上补充了ajax部分的完整前端代码：!DOCTYPE html PUBLIC -//W3C//DTD HTML 4.01 Transitional//EN /TR/html4/loose.dtdhtml lang=zh-CNhead meta http-equiv=Content-Type content=text/html; charset=UTF-8 titleECharts/title!-- 引入 echarts.js -- script type=text/javascript src=echarts.min.js/script!-- 引入jquery.js -- script type=text/javascript src=jquery-1.12.3.js/script/headbody!-- 为ECharts准备一个具备大小（宽高）的Dom -- div id=main style=width: 600px;height:400px;/div script type=text/javascriptvarmyChart = echarts.init(document.getElementById(main)); // 显示标题，图例和空的坐标轴myChart.setOption({title: { text: 异步数据加载示例 },tooltip: {},legend: { data:[销量] },xAxis: {data: [] },yAxis: {},series: [{ name: 销量,type: bar,data: [] }] });myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画var names=[];