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

发布时间：2022-05-30 发布人：admin 分类：说明书资料大小：0.05M 资料格式：docx 举报版权申诉

fyx54260-10315755-4744302543332743967.docx.pdf-第1页.png

第1页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第2页.png

第2页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第3页.png

第3页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第4页.png

第4页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第5页.png

第5页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第6页.png

第6页 / 共7页

fyx54260-10315755-4744302543332743967.docx.pdf-第7页.png

第7页 / 共7页

文本预览

Echarts（3.x 版）官网实例的数据都是静态的，实际使用中往往会要求从服务器端取数据进行动态显示，官网教程里给出的异步数据加载很粗略，下面就以官网最简单的实例为例子，详细演示如下过程：1.客户端通过 ajax 发送请求；2.服务器端 Servlet 接收请求；3.生成 json 数据并返回给客户端；4.客户端接收数据后显示。 1.客户端通过 ajax 发送请求先绘制一个最简单的 Echarts 图表：（这里就直接贴上代码了，直接用的是官网教程里异步数据加载和更新里的代码） html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ECharts

看到了吧，现在 option 中的 xAxis 和 yAxis 里的 data 都是空值。待会儿我们会用从服务器取回的数据去”填满“它。下面贴上补充了 ajax 部分的完整前端代码： html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ECharts

2.服务器端 Servlet 接收请求客户端的请求 url 是’TestServlet‘，那我们得先在 web.xml 配置以下映射：

TestServlet

test.TestServlet

TestServlet

/TestServlet 然后就来着手写处理客户端请求的 TestServlet 啦！ 3.生成 json 数据并返回给客户端生成 Json 数据要用到额外的 jar 包，这里我使用的 jackson，json-lib 2010 年就没有再更新了… （2016-5-3 日更：发现 Google 出品的 Gson 也蛮好用的，重点是很小巧，只需引入一个 jar 就搞定，用法也很简单）简单介绍一下 jackson 的用法： ① ：先去 http://mvnrepository.com/ 下载 jackson-core.jar ， jackson-annotations.jar ， jackson-databind.jar（都是 2.x 版本，jackson 官网不知为何不提供服务了…这三个 jar 让我一阵好找） ②：在项目的项目 WEB-INF/lib 下引入这三个 jar 然后就可以在 TestServlet 里使用 jackson 提供的工具类了。（关于 jackson 的详细用法，这里贴一下官网教程：http://wiki.fasterxml.com/JacksonInFiveMinutes） TestServlet 代码如下： package test; import java.io.IOException; import java.util.*; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import com.fasterxml.jackson.databind.ObjectMapper; public class TestServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { doPost(req,resp); }

@Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List list = new ArrayList(); //这里把“类别名称”和“销量”作为两个属性封装在一个 Product 类里，每个 Product 类的对象都可以看作是一个类别（X 轴坐标值）与销量（Y 轴坐标值）的集合 list.add(new Product("衬衣", 10)); list.add(new Product("短袖", 20)); list.add(new Product("大衣", 30)); ObjectMapper mapper = new ObjectMapper(); //提供 java-json 相互转换功能的类 String json = mapper.writeValueAsString(list); //将 list 中的对象转换为 Json 格式的数组 //System.out.println(json); //将 json 数据返回给客户端 response.setContentType("text/html; charset=utf-8"); response.getWriter().write(json); } TestServlet 类中用到的自定义的 Product 类代码如下： package test; public class Product { private String name; private int num; //类别名称 //销量 public Product(String name, int num) { this.name = name; this.num = num; }

public String getName() { return name; } public void setName(String name) { this.name = name; } public int getNum() { return num; } public void setNum(int num) { this.num = num; } } 4.客户端接收数据后显示客户端接受服务器数据并解析后，就可以正常显示图表数据了：

分享到：

赞收藏

资料库

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

相关推荐

开发技术

热门标签

最新资料