Dans le domaine de la visualisation de données, ECharts est une bibliothèque de graphiques front-end largement utilisée, et ses puissantes fonctions de visualisation de données sont recherchées par diverses industries. Dans les projets réels, nous rencontrons souvent des situations dans lesquelles plusieurs graphiques doivent être affichés de manière liée. Cet article explique comment combiner les interfaces ECharts et PHP pour réaliser l'affichage de graphiques statistiques liés de plusieurs graphiques et donne des exemples de code spécifiques.
1. Compétences pré-requises
Dans la pratique de cet article, vous devez maîtriser les compétences suivantes :
- Connaissance de base de HTML, CSS et JavaScript ;
- Connaissance de base d'ECharts ; PHP.
- 2. Analyse des exigences
Notre exigence est d'afficher plusieurs graphiques interdépendants sur une seule page, et ces graphiques peuvent être liés les uns aux autres.
L'analyse des besoins est la suivante :
Il y a deux cartes sur la page, une carte principale et une carte secondaire.
- Il y a un graphique à barres et un graphique linéaire sur la page.
- Sur le côté gauche de la page, nous pouvons voir un menu déroulant. Ce menu déroulant contient plusieurs options. Chaque option déclenchera le rechargement des données correspondantes et mettra à jour le graphique correspondant.
- Lorsque nous sélectionnons une option dans le menu déroulant, tous les graphiques changeront. La carte principale et la sous-carte changeront en conséquence avec les changements de données, et les graphiques à barres et les graphiques linéaires seront également mis à jour en conséquence.
- 3. Plan de mise en œuvre
Mise en page
- Tout d'abord, présentez notre page dans un fichier HTML. Créez un conteneur div nommé wrap et placez tous les graphiques dans ce conteneur div. Parmi eux, la hauteur du conteneur de carte doit être définie à 100 % pour utiliser pleinement l'espace de la page.
<body>
<div id="wrap">
<div id="map1" style="height: 100%; width: 60%; float:left; "></div>
<div id="chart1" style="height: 400px; width: 40%; float:left;"></div>
<div id="map2" style="height: 100%; width:60%; float:left;"></div>
<div id="chart2" style="height: 400px; width: 40%; float:left;"></div>
</div>
</body>
Copier après la connexion
Appel d'ECharts
Nous devons introduire le fichier de bibliothèque ECharts dans la page. Ce fichier de bibliothèque peut être téléchargé depuis le site officiel d'ECharts (https://echarts.apache.org/en/download.html).
Utilisez la balise
Tutoriels populaires
Plus>
Recommandations populaires
Derniers téléchargements
Plus>