Cómo Echarts utiliza los datos json en segundo plano
& lthead & gt
& ltmeta? http-equiv="Tipo de contenido "? content = " text/html;? charset=UTF-8 " >>p>
& lttitle & gtECharts & lt/title & gt;
& Script? tipo="texto/javascript "? src="js/jquery-3.2.1.js " >& lt/script & gt;
& ltScript? tipo="texto/javascript "? src = " js/echarts . js " & gt; & lt/script & gt;
& lt/head & gt; ><! - ?Preparar un Dom con tamaño (ancho y alto) para ECharts? ->
<div? id="principal"? style="ancho:?600px alto:400px"& gt& lt/div>
& ltScript? tipo = " texto/JavaScript ">
var? ¿Mi gráfico? =?e charts . init(document . getelementbyid(' main '));
//?Muestra el título, la leyenda y el eje vacío.
myChart.setOption({
Título:?{
Texto:?'Ejemplo de carga de datos asincrónicos'
},
p>
Información sobre herramientas:?{},
Leyenda:?{
Datos:['Ventas']
},
Eje x:? {
Datos:? []
},
Eje: {},
Serie:?[{
Nombre:?',
Tipo:?',
Datos:?[]
} ]
});
mychart . show loading(); // Muestra una animación de carga simple antes de cargar los datos.
var? nombres =[]; //Matriz de categorías (en realidad se utiliza para guardar el valor de las coordenadas del eje X)
var? nums = []; //Matriz de ventas (en realidad se usa para guardar los valores de las coordenadas Y)
$.ajax({
Tipo?:? "Posición",
¿Asincrónico?:?True, //Solicitud asincrónica (la solicitud sincrónica bloqueará el navegador y las otras operaciones del usuario deben esperar a que se complete la solicitud antes de ejecutarse)
URL:?"file_ashx/Czmj .ashx" , //La solicitud se envía a TestServlet.
Tipo de datos?:?"json", //Los datos devueltos son json.
¿Éxito?:?Función (resultado)? {
//El contenido de esta función se ejecuta cuando la solicitud es exitosa
If )? .length;i++){
names.push(result[i]);/ / Saque las categorías una por una y complete la matriz de categorías.
}
for(var?I = 0;i<result.length;i++){
nums.push(resultado[I].je 1); // Saque el volumen de ventas uno por uno y complete la matriz de volumen de ventas.
}
mychart . hide loading(); //Ocultar animación de carga
Mi gráfico. setoption({//Cargar gráfico de datos
xEje:?{
Datos:? Nombre
},
Serie:?[ {
//?Según la serie correspondiente
Nombre:? 'Volumen de ventas',
Datos: }]
});
}
},
¿Error? :?Función(mensaje de error)? {
//Ejecuta esta función cuando la solicitud falla.
Alert("¡Error en la solicitud de datos del gráfico!");
mychart . ocultar carga()
}
})
& lt/script & gt;
& lt/body & gt;
& lt/html & gt;