Cómo utilizar PHP jQuery MySQL para implementar la carga asincrónica de datos de ECharts (código fuente adjunto)_jquery

Los mapas de ECharts se utilizan principalmente para visualizar datos geográficos y mostrar información de distribución de datos en diferentes regiones. El sitio web oficial de ECharts proporciona descargas de datos de mapas, como mapas de China y mapas del mundo. Los mapas se pueden llamar introduciendo archivos jsON a través de JS o carga asincrónica.

Descarga del código fuente de demostración del efecto

Este artículo explicará cómo utilizar PHP jQuery MySQL para implementar la carga asincrónica de datos de mapas de ECharts. Tomamos el mapa de China como ejemplo para mostrar los datos del PIB de cada provincia de China el año pasado (2015). Al solicitar PHP de forma asincrónica, los datos en MySQL se leen y luego se muestran en el mapa. Además del conocimiento de front-end, este documento también requiere que comprenda PHP y MySQL.

Lenguaje de marcado de hipertexto

Primero, coloque div#myChart en la página donde se debe cargar el mapa.

Luego cargue los archivos Echarts y China map js. Debido a que en este ejemplo se utiliza ajax asíncrono para cargar datos, es necesario cargar el archivo de la biblioteca jQuery.

lenguaje de descripción java

A continuación, en la parte js, primero configure el contenido de la opción Echarts. Consulte el código y los comentarios a continuación.

Luego usamos Ajax() de jQuery para solicitar los datos de forma asincrónica.

Aparentemente, vemos que se envía una solicitud POST a mapdata.php a través de jQuery. ajax(), la solicitud devuelve datos en formato json. Cuando la solicitud tiene éxito y se obtiene una respuesta, los datos del mapa se vuelven a representar.

Lenguaje de programación del lado del servidor (abreviatura de Preprocesador de hipertexto profesional)

La tarea de Mapdata.php es leer los datos en la tabla de datos de MySQL y luego devolverlos al front-end. . Lo primero es conectarse a la base de datos. Esta parte del código está en connect.php. Descargue el código fuente para verlo. Luego está la consulta SQL, que lee los datos de la tabla echarts_map y finalmente los devuelve en formato json.

Salida de datos en formato json

Base de datos relacional

Finalmente, proporcione información de la estructura de la tabla de datos mysql. Después de descargar el código fuente, importe el sql a su mysql. Preste atención a modificar la información de configuración de la base de datos de connect.php durante la demostración.

Si no existe crea la tabla ` echarts_map `(

` id ' int(10)NOT NULL AUTO _ INCREMENT

` provincia ' varchar (30 ) no está vacío,

` pib ' el número decimal (10, 2) no está vacío,

Clave principal (` id `)

) MOTOR=MyISAM Juego de caracteres predeterminado = utf8