实现Echarts中数据的动态获取

2025年03月18日 00:58
有2个网友回答
网友(1):

1.客户端通过ajax发送请求
先绘制一个最简单的Echarts图表:
(这里就直接贴上代码了,直接用的是官网教程里异步数据加载和更新里的代码)




ECharts















看到了吧,现在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。
下面贴上补充了ajax部分的完整前端代码:




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.客户端接收数据后显示
客户端接受服务器数据并解析后,就可以正常显示图表数据了:

网友(2):

Echarts 是用javascript 展示的 要动态的的获取数据 可以用 AJAX 获取后台数据。