Comment utiliser le diagramme de Sankey pour afficher le flux de données dans ECharts

Comment utiliser le diagramme de Sankey pour afficher le flux de données dans ECharts

Introduction :
La visualisation des données est une partie importante de l'analyse des données, qui peut afficher visuellement des données complexes à l'aide de graphiques et d'autres méthodes. ECharts est une puissante bibliothèque de visualisation de données qui prend en charge plusieurs types de graphiques. Parmi eux, Sankey Diagram peut afficher la relation de flux des données de manière très intuitive. Cet article explique comment utiliser les diagrammes Sankey pour afficher le flux de données dans ECharts et fournit des exemples de code spécifiques.

1. Présentation de la bibliothèque ECharts
   Tout d'abord, nous devons présenter la bibliothèque ECharts. Il peut être importé via CDN, ou la bibliothèque ECharts peut être téléchargée localement et importée. L'exemple suivant utilise la méthode CDN comme exemple :

   <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js"></script>

   Copier après la connexion

2. Créer un conteneur
   Créer un conteneur div pour afficher le diagramme de Sankey :

   <div id="sankeyChart" style="width: 800px; height: 600px;"></div>

   Copier après la connexion

3. Préparer les données
   Préparer les données pour l'affichage, le format des données doit se conformer aux exigences de la carte ECharts Sankey Base. Voici un exemple de données :

   var data = {
    nodes: [
        {name: '节点1'},
        {name: '节点2'},
        {name: '节点3'},
        {name: '节点4'}
    ],
    links: [
        {source: '节点1', target: '节点2', value: 100},
        {source: '节点1', target: '节点3', value: 200},
        {source: '节点2', target: '节点3', value: 150},
        {source: '节点3', target: '节点4', value: 120}
    ]
   };

   Copier après la connexion

   Les nœuds représentent la source ou la destination des données, et les liens représentent la relation de connexion entre les nœuds et le flux de données. Chaque nœud doit contenir l'attribut name, les liens doivent contenir les attributs source et cible et la valeur représente la taille du trafic de données.

4. Initialiser le graphique
   Utilisez la méthode de la bibliothèque ECharts pour initialiser un graphique Sankey :

   var chart = echarts.init(document.getElementById('sankeyChart'));
   
   // 设置图表配置项
   var option = {
    series: [{
        type: 'sankey',
        data: data.nodes,
        links: data.links
    }]
   };
   
   // 渲染图表
   chart.setOption(option);

   Copier après la connexion
5. Configuration personnalisée
   Selon les besoins, nous pouvons personnaliser le style et la configuration du graphique. Voici quelques éléments de configuration couramment utilisés :
6. info-bulle : configuration de la boîte de dialogue lorsque la souris survole un nœud ou une ligne de connexion.
7. color : configuration des couleurs des nœuds et des lignes de connexion.
8. label : Configuration du nom du nœud et de l'affichage des données de la ligne de connexion.
9. mise en page : Configuration de la mise en page du graphique, vous pouvez modifier le mode d'affichage du graphique en ajustant la position des nœuds.

10. Mise à jour des données
    Si vous avez besoin de mettre à jour dynamiquement les données, vous pouvez y parvenir via les méthodes suivantes :

    // 更新数据
    data.nodes.push({name: '节点5'});
    data.links.push({source: '节点4', target: '节点5', value: 80});
    
    // 更新图表配置
    option.series[0].data = data.nodes;
    option.series[0].links = data.links;
    
    // 重新渲染图表
    chart.setOption(option);

    Copier après la connexion

Résumé :
Cet article explique comment utiliser le diagramme de Sankey pour afficher le flux de données dans ECharts et créer un conteneur en introduisant la bibliothèque ECharts, préparez les données et initialisez des graphiques, qui peuvent afficher visuellement la relation de flux des données. Dans le même temps, nous avons également découvert les méthodes de configuration personnalisée et de mise à jour des données. J'espère que cela pourra aider les lecteurs à mieux utiliser ECharts pour l'analyse de visualisation de données.

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!