Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiques-tutoriel php-php.cn

Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiques

WBOY

Libérer： 2023-12-18 10:08:02

original

902 Les gens l'ont consulté

Comment combiner ECharts et linterface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiques

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 liés pour être affichés. Cet article explique comment combiner les interfaces ECharts et PHP pour réaliser l'affichage de graphiques statistiques liés à 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

Utilisez la balise

Derniers articles par auteur