Cómo usar PHP jQuery MySQL para cargar datos de mapas de ECharts de forma asincrónica (con descarga del código fuente)_jquery

Los mapas de ECharts se utilizan principalmente para visualizar datos de áreas geográficas y mostrar información de distribución de datos en diferentes áreas. El sitio web oficial de ECharts ofrece descargas de datos de mapas, como mapas de China y mapas del mundo. Estos mapas se denominan introducciones js o archivos json cargados de forma asincrónica.

Descargue el código fuente para la demostración del efecto

Este artículo explicará cómo usar PHP jQuery MySQL para cargar datos de mapas de ECharts de forma asincrónica con ejemplos. Tomamos el mapa de China como ejemplo para mostrar. China datos del PIB del año pasado (2015) por provincia. Al solicitar php de forma asincrónica, los datos en mysql se leen y luego se muestran en el mapa. Por lo tanto, en este artículo, además del conocimiento de front-end, también necesita conocimientos relevantes de PHP y MySQL.

HTML

Primero, coloque div#myChart en la página que necesita cargar el mapa.

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

Javascript

Para la siguiente parte de js, primero configure el contenido de la opción Echarts; consulte el siguiente código y comentarios.

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

Obviamente, vemos que se envía una solicitud de publicación a mapdata.php a través de $.ajax() de jQuery, y la solicitud devuelve datos en formato json. Cuando la solicitud tiene éxito y se obtiene una respuesta, la solicitud se envía a mapdata.php. Los datos del mapa se volverán a renderizar.

PHP

La tarea de mapdata.php es leer datos de la tabla de datos mysql y devolverlos al front-end. La primera es conectarse a la base de datos. Esta parte del código está en connect.php. Descargue el código fuente para verlo. Luego lea los datos de la tabla echarts_map mediante una consulta SQL y finalmente devuélvalos en formato json.

Datos de salida en formato json

MySQL

Finalmente, proporcione información de la estructura de la tabla de datos MySQL. Para obtener información sobre los datos, puede descargar el código fuente y luego importar SQL. en su mysql Eso es todo, preste atención a la demostración de cómo modificar la información de configuración de la base de datos en connect.php.

CREAR TABLA SI NO EXISTE `echarts_map` (

`id` int(10) NOT NULL AUTO_INCREMENT,

`province` varchar(30) NOT NULL ,

`pib` decimal(10,2) NOT NULL,

CLAVE PRIMARIA (`id`)

)ENGINE=MyISAM DEFAULT CHARSET=utf8;