Maison > Article > développement back-end > Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiques

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

WBOYoriginal: 2023-12-18 10:07:08555parcourir

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 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>

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 <script> dans le fichier HTML pour introduire le fichier de bibliothèque ECharts et créer l'instance de graphique correspondante. Nous nommons les instances de graphique dans le code chart1, chart2, map1 et map2. </script>

<!-- 引入ECharts的库文件 -->
<script src="echarts.common.min.js"></script>

<script>
    // 创建主地图的图表实例
    var map1 = echarts.init(document.getElementById('map1'));

    // 创建次地图的图表实例
    var map2 = echarts.init(document.getElementById('map2'));

    // 创建条形图的图表实例
    var chart1 = echarts.init(document.getElementById('chart1'));

    // 创建折线图的图表实例
    var chart2 = echarts.init(document.getElementById('chart2'));

</script>

Obtenir des données

Nous utilisons PHP pour écrire une interface permettant d'obtenir des données du serveur. Le format de données spécifique peut être conçu en fonction des besoins réels. Dans cet article, nous supposons que le format des données renvoyées est le suivant :

{
    "map1_data":[...],
    "map2_data":[...],
    "chart1_data":[...],
    "chart2_data":[...],
    ...
}

Ici, nous utilisons la méthode .ajax() de jQuery pour demander des données au serveur et appelons la fonction correspondante pour dessiner le graphique une fois la requête réussie.

function getData(option) {
    $.ajax({
        type: "POST",
        url: "getdata.php",
        data: option,
        dataType: "json",
        success: function(response) {
            drawMap1(response.map1_data);
            drawMap2(response.map2_data);
            drawChart1(response.chart1_data);
            drawChart2(response.chart2_data);
            ...
        }
    });
}

Dessiner des graphiques

Ensuite, nous devons écrire des fonctions pour dessiner des cartes, des graphiques à barres et des graphiques linéaires en utilisant les données que nous recevons. Dans cet article, nous utilisons l'API ECharts pour dessiner des graphiques. Pour une utilisation spécifique de l'API, veuillez vous référer à la documentation officielle d'ECharts.

function drawMap1(data) {
    // 使用接收到的数据进行地图实例的数据更新
    map1.setOption(option);
}

function drawMap2(data) {
    // 使用接收到的数据进行地图实例的数据更新
    map2.setOption(option);
}

function drawChart1(data) {
    // 使用接收到的数据进行条形图实例的数据更新
    chart1.setOption(option);
}

function drawChart2(data) {
    // 使用接收到的数据进行折线图实例的数据更新
    chart2.setOption(option);
}

Lien entre les graphiques

Dans la dernière étape, nous devons réaliser le lien entre les graphiques. Lorsque l'utilisateur sélectionne une option dans le menu déroulant, tous les graphiques changeront en conséquence.

Nous pouvons utiliser la méthode dispatchAction() dans l'API ECharts pour configurer des liens entre les graphiques. Lorsqu'un graphique est sélectionné, nous devons transmettre les données sélectionnées du graphique à d'autres graphiques.

option1.on('mapSelect', function(params) {
    // 获取地图选中的区域
    var selectedData = params.batch[0].selected[0];

    // 为条形图和折线图设置选中数据
    chart1.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: selectedData.dataIndex
    });
    chart2.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: selectedData.dataIndex
    });

    // 为次地图设置选中数据
    map2.dispatchAction({
        type: 'mapSelect',
        name: selectedData.name,
        seriesIndex: 0
    });

    // 为请求数据添加参数
    var option = {
        map1_data: selectedData.name,
        ...
    }

    // 请求更新数据
    getData(option);
});

4. Résumé

Dans cet article, nous avons présenté comment combiner les interfaces ECharts et PHP pour obtenir l'affichage de graphiques statistiques de liaison multi-graphiques. Nous avons d'abord compris les exigences, puis avons donné un plan de mise en œuvre détaillé et fourni des exemples de code spécifiques sous cinq aspects : la mise en page, l'appel de la bibliothèque ECharts, l'obtention de données et le dessin de graphiques, et la réalisation de liens entre les graphiques. Après avoir étudié cet article, je pense que les lecteurs peuvent mieux appliquer la bibliothèque ECharts pour visualiser les données affichées dans une liaison multi-graphiques.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php JavaScript jquery css ajax echarts html 接口 apache https

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiquesArticle suivant：Comment combiner ECharts et l'interface PHP pour réaliser un affichage de graphiques statistiques de liaison multi-graphiques

Articles Liés

Voir plus