Générez facilement les graphiques statistiques avec des étiquettes et des légendes à l'aide d'écharts combinés à l'interface PHP

Générez des graphiques statistiques avec des étiquettes et des légendes à l'aide d'interfaces Echarts et PHP

Avec le développement de la technologie Internet, la visualisation des données est devenue une partie indispensable de l'analyse des données et du soutien à la prise de décision. Les graphiques statistiques, en tant que méthode d'affichage intuitive et facile à comprendre, ont été largement utilisés. Echarts est une bibliothèque de graphiques puissante et open source avec des types de graphiques et des caractéristiques riches, et est largement favorisé par les développeurs.

Cet article combinera des exemples spécifiques pour expliquer comment utiliser les Echarts et les interfaces PHP pour générer des graphiques statistiques avec des étiquettes et des légendes.

Introduire des fichiers de ressources Echarts

Premièrement, les ressources liées aux Echarts doivent être introduites dans le projet. Vous pouvez obtenir la dernière version du site officiel ou GitHub, la placer dans le répertoire du projet et introduire les fichiers JS et CSS correspondants dans HTML.

Préparer les données

Du côté PHP, les données sont généralement obtenues via une requête de base de données ou une API d'appel, puis converties au format JSON pour une utilisation frontale. Les exemples de données sont les suivantes:

 $data = [
    ['name' => 'légende1', 'value' => 100],
    ['name' => 'légende2', 'value' => 200],
    ['name' => 'légende3', 'value' => 300],
    // ...
];

Créer un conteneur de graphiques

Dans le fichier html, créez un élément de conteneur pour afficher le graphique:

 <div id="chart" style="width: 600px; height: 400px;"></div>

Initialiser les échartes et les tirages

Ensuite, initialisez l'instance Echarts via le code JavaScript et configurez le graphique:

 // PrésentéEChartsBibliothèque
import echarts from 'echarts';

// Obtenir des éléments de conteneur
var chartContainer = document.getElementById('chart');

// initialisationEChartsExemple
var chart = echarts.init(chartContainer);

// Définissez les éléments de configuration et les données du graphique
var option = {
    title: {
        text: 'Graphiques statistiques',
        subtext: 'Source de données: PHPinterface',
    },
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)',
    },
    legend: {
        orient: 'vertical',
        left: 'left',
        data: <?=json_encode(array_column($data, 'name'))?>,
    },
    series: [
        {
            name: 'Nom de tag',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: <?=json_encode($data)?>,
            label: {
                normal: {
                    show: true,
                    formatter: '{b} : {c} ({d}%)',
                },
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '20',
                    fontWeight: 'bold',
                },
            },
        },
    ],
};

// Afficher les graphiques à l&#39;aide des éléments de configuration et des données que vous venez de spécifier
chart.setOption(option);

Analyse des effets de mise en œuvre

Dans le code, introduisez d'abord la bibliothèque Echarts et obtenez le conteneur du graphique, puis créez une instance de graphique via eCharts.Init () . L'objet Option définit le titre, la boîte invite, la légende et la série de données du graphique. Ici, les graphiques circulaires sont utilisés et les étiquettes et les légendes sont affichées via les données générées dynamiquement via l'interface PHP.

Enfin, appelez la méthode setOption () pour terminer le rendu du graphique.

Résumer

Les étapes principales pour implémenter les graphiques statistiques basés sur les écharts et les interfaces PHP:

• Introduire les fichiers de ressources Echarts;
• Préparer et convertir les données du graphique au format JSON;
• Créer des éléments HTML du conteneur du graphique;
• Écrivez du code JavaScript pour initialiser et configurer les graphiques;
• Appelez la méthode setOption () pour dessiner le graphique.

Grâce aux étapes ci-dessus, vous pouvez personnaliser des graphiques statistiques plus diversifiés et plus riches en fonction de vos besoins pour améliorer l'effet d'affichage des données et l'expérience utilisateur. J'espère que cet article sera utile à votre projet de visualisation des données.