Red de conocimiento informático - Conocimiento informático - Implementar adquisición dinámica de datos en Echarts

Implementar adquisición dinámica de datos en Echarts

1. El cliente envía una solicitud a través de ajax

Primero dibuje el gráfico Echarts más simple:

(Aquí pegamos el código directamente y usamos directamente el código de carga y actualización de datos asincrónicos en el código oficial tutorial del sitio web )

②: Introducido en WEB-INF/lib de el proyecto proyecto Estos tres frascos

luego pueden usar las clases proporcionadas por la herramienta Jackson en TestServlet (para el uso detallado de Jackson, consulte el tutorial publicado en el sitio web oficial:

clase pública. TestServlet extiende HttpServlet {

@Override

protected void doGet(HttpServletRequest req.HttpServletResponse resp) lanza ServletException, IOException {

doPost(req,resp) );

}

@Override

doPost vacío protegido (solicitud HttpServletRequest, respuesta HttpServletResponse) lanza ServletException, IOException {

List< Producto> list = new ArrayList();

//Aquí, "nombre de categoría" y "ventas" están encapsulados como dos atributos en la clase Producto, y cada objeto de la clase Producto es visible Es una categoría (o un objeto de la clase Producto).

list.add(new Product("Camisa", 10));

list.add(new Product("Manga corta", 20));

list.add(new Product("Manga corta", 20));

list.

list.add(new Product("Manga corta", 20));

list.add(new Product("Manga corta", 20));

list.add(new Product("Abrigo", 30));

ObjectMapper mapper = new ObjectMapper(); //Una clase que proporciona la función de conversión interactiva java-json

String json = mapper.writeValueAsString( list); Formato json

//System.out.println(json);

// Devuelve datos json al cliente

response.setContentType("text/html . charset=utf-8");

response.getWriter().write(json);

}

Clase de producto personalizado utilizada en la clase TestServlet. El código es el siguiente:

prueba del paquete;

producto de clase pública {

nombre de cadena privada //nombre de categoría

int privado; num; //ventas

Producto público(nombre de cadena, int num) {

this.name = nombre;

this.num = num;

}

cadena pública getName() {

nombre de retorno;

}

nombre de conjunto vacío público (nombre de cadena ) {

this.name = nombre;

}

public int getNum() {

return num;

}

public void setNum(int num) {

this.num = num;

}

}

4.

4. El cliente recibe los datos y los muestra

Después de que el cliente recibe los datos del servidor y los analiza, los datos del gráfico se pueden mostrar normalmente. :

5.