Graphique ECharts Sankey Rose : Comment afficher le flux et la proportion de données

ECharts Sankey Rose Chart : Comment afficher le flux et la proportion des données nécessite des exemples de code spécifiques

Avec l'avènement de l'ère du Big Data, l'analyse et la visualisation des données sont devenues des outils importants. En tant que puissante bibliothèque de visualisation, ECharts fournit une variété de types de graphiques, dont le graphique Sankey Rose. Le diagramme de Sankey Rose convient à l'affichage des flux de données et des relations de proportion dans plusieurs dimensions. Cet article présentera les concepts de base et l'utilisation de Sankey Rose Chart, et donnera des exemples de code spécifiques.

1. Le concept de base du Sankey Rose Chart
   Le Sankey Rose Chart est un type spécial de graphique radar, qui utilise des rayons de différentes longueurs pour représenter différentes valeurs et des angles pour représenter différentes dimensions. Le rayon du graphique représente la quantité de données, tandis que les angles de chaque dimension représentent les catégories de données. En connectant différentes dimensions, nous pouvons montrer les relations de flux et de proportion entre les données.
2. Exemple de code de Sankey Rose Chart
   Ce qui suit est un exemple de code d'un simple Sankey Rose Chart :

// 引入ECharts var echarts = require('echarts'); // 初始化图表 var myChart = echarts.init(document.getElementById('chart')); // 数据示例 var data = [ { source: 'A', target: 'B', value: 100 }, { source: 'A', target: 'C', value: 200 }, { source: 'B', target: 'C', value: 150 }, ]; // 将数据格式转换为桑基玫瑰图需要的格式 var seriesData = data.map(item => { return { name: item.source, type: 'sankey', data: [ { name: item.source }, { name: item.target }, ], links: [ { source: item.source, target: item.target, value: item.value }, ], }; }); // 配置项 var option = { tooltip: {}, series: seriesData, }; // 渲染图表 myChart.setOption(option);

Dans le code ci-dessus, nous introduisons d'abord la bibliothèque ECharts et initialisons une instance de graphique. Ensuite, un exemple de données simple est défini, comprenant trois nœuds et deux relations. Ensuite, nous convertissons les données au format requis par le diagramme de Sankey Rose, où l'attribut name du nœud représente le nom du nœud et l'attribut links représente la relation entre les nœuds.

Enfin, nous avons défini certains styles et comportements interactifs via des éléments de configuration, et avons transmis les données dans l'instance de graphique pour le rendu. Sur la page, la position du graphique peut être spécifiée par l'identifiant d'un élément div.

3. Scénarios d'utilisation de Sankey Rose Chart
   Sankey Rose Chart convient pour montrer la direction du flux de données et la relation de proportion entre plusieurs dimensions. Il est largement utilisé dans de nombreux domaines, tels que :

• Domaine commercial : afficher le flux et la proportion de marchandises entre différents pays
• Analyse des visites de sites Web : afficher le flux et la proportion de sauts entre différentes pages ; : Affiche le flux de transactions et la proportion entre les différentes classes d'actifs.
• Grâce au Sankey Rose Chart, nous pouvons comprendre intuitivement la relation entre les données et nous aider à prendre de meilleures décisions.

Résumé :

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!