ECharts est une bibliothèque d'affichage de données visuelles qui peut rendre les données plus vivantes et intuitives. Parmi eux, le graphique Sankey Rose peut être d'une grande aide pour montrer la direction du flux de données et les changements de proportion. Cet article explique comment utiliser le graphique Sankey Rose dans ECharts, tout en fournissant des exemples de code spécifiques.
- Introduction
Le Sankey Rose Chart est un graphique en rose spécial qui affiche les données à travers des anneaux concentriques de cercles intérieurs et extérieurs et de longueurs de secteur. Il a une structure hiérarchique claire et convient à l'affichage de flux de données multidimensionnels. Dans ECharts, le graphique Sankey Rose peut être utilisé pour montrer les proportions entre différentes dimensions et la relation entre les proportions dans le temps. De plus, dans les situations où la quantité de données est importante et où il y a trop de dimensions, ECharts prend également en charge l'affichage défilant et l'aperçu miniature pour faciliter l'interaction visuelle des utilisateurs.
- Mise en œuvre
Ce qui suit présentera comment utiliser le graphique rose Sankey dans ECharts pour afficher la direction du flux de données et les changements de proportion, y compris quatre étapes d'initialisation, de définition des données, de définition des styles et des effets interactifs.
2.1 Initialisation
L'initialisation implique l'introduction du fichier js d'ECharts et la création d'un nouveau conteneur de canevas. Le code spécifique est le suivant :
<!-- 引入ECharts插件 -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 定义画布容器 -->
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>
Copier après la connexion
2.2 Définition des données
La définition des données implique de définir des nœuds et des arêtes. Les nœuds font référence à des attributs spécifiques dans les données. Par exemple, dans un diagramme Sankey Rose de données de ventes, les nœuds peuvent être des types de produits ou des régions de vente ; les bords font référence aux connexions et aux directions de flux entre les différents nœuds, représentant la relation logique des données. Le code spécifique est le suivant :
// 设置节点
var data = {
nodes: [
{name: 'A'},
{name: 'B'},
{name: 'C'},
{name: 'D'},
{name: 'E'}
],
// 设置边
links: [
{
source: 'A',
target: 'B',
value: 10
},
{
source: 'B',
target: 'C',
value: 20
},
{
source: 'C',
target: 'D',
value: 30
},
{
source: 'D',
target: 'E',
value: 40
}
]
};Copier après la connexion
Parmi eux, nodes contient tous les nœuds, chaque nœud est un objet, et name représente le nom du nœud (type chaîne) . links contient toutes les arêtes, chaque arête est un objet, source représente le nom du nœud source, target représente le nom du nœud cible, < code>value représente la valeur des données (type numérique). nodes包含了所有的节点，每个节点是一个对象，name表示节点的名称（字符串类型）。links包含了所有的边，每个边是一个对象，source表示源节点的名称，target表示目标节点的名称，value表示数据的值（数值类型）。
2.3 设置样式
样式是指桑基玫瑰图的整体风格和节点之间的关联。在ECharts中，样式可以通过配置series来实现。具体代码如下：
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};Copier après la connexion
其中，type表示图表类型，data和links分别对应前面定义的nodes和links。layoutIterations表示布局迭代次数，值越大表示布局越密集，通常设为32即可。lineStyle表示边的样式，color表示边的颜色，这里设为使用源节点的颜色；curveness表示边的弧度，设为0.5表示为曲线。label表示节点标签的样式，formatter表示节点标签的显示内容，这里设为使用节点的名称。
2.4 交互效果
交互效果指用户在与桑基玫瑰图进行互动时触发的效果和操作。在ECharts中，交互效果可以通过配置toolbox来实现。具体代码如下：
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};Copier après la connexion
其中，feature是一个包含多种交互型工具的对象。dataZoom表示缩放工具，restore表示还原工具，saveAsImage
2.3 Définir le style
- Le style fait référence au style général du diagramme Sankey Rose et à l'association entre les nœuds. Dans ECharts, les styles peuvent être implémentés en configurant la
série. Le code spécifique est le suivant : <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>桑基玫瑰图示例</title>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<div id="sankey-rose" style="width: 800px;height: 600px;"></div>
<script>
// 初始化
var myChart = echarts.init(document.getElementById('sankey-rose'));
// 设置数据
var data = {
nodes: [
{name: '华东地区'},
{name: '华南地区'},
{name: '华北地区'},
{name: '东北地区'},
{name: '中西部地区'},
{name: '电子产品'},
{name: '家用电器'},
{name: '食品饮料'},
{name: '化妆品'},
{name: '家居生活'}
],
links: [
{
source: '华东地区',
target: '电子产品',
value: 300
},
{
source: '华东地区',
target: '家用电器',
value: 200
},
{
source: '华东地区',
target: '食品饮料',
value: 100
},
{
source: '华南地区',
target: '化妆品',
value: 400
},
{
source: '华南地区',
target: '家居生活',
value: 500
},
{
source: '华北地区',
target: '电子产品',
value: 200
},
{
source: '华北地区',
target: '家用电器',
value: 150
},
{
source: '东北地区',
target: '家用电器',
value: 100
},
{
source: '东北地区',
target: '化妆品',
value: 50
},
{
source: '中西部地区',
target: '电子产品',
value: 120
},
{
source: '中西部地区',
target: '食品饮料',
value: 80
},
{
source: '中西部地区',
target: '家居生活',
value: 200
}
]
};
// 设置样式
var option = {
series: [{
type: 'sankey',
data: data.nodes,
links: data.links,
layoutIterations: 32,
lineStyle: {
color: 'source',
curveness: 0.5
},
label: {
color: '#000',
formatter: '{b}'
}
}]
};
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};
// 渲染图表
myChart.setOption(option);
</script>
</body>
</html>Copier après la connexion
type représente le type de graphique, et data et links correspondent respectivement au type défini précédemment nœuds et liens. layoutIterations représente le nombre d'itérations de mise en page. Plus la valeur est grande, plus la mise en page est dense. Elle est généralement définie sur 32. lineStyle représente le style du bord, color représente la couleur du bord, ici il est défini pour utiliser la couleur du nœud source courbe ; > représente le radian du bord, réglé sur 0,5 est représenté sous forme de courbe. label représente le style de l'étiquette du nœud, formatter représente le contenu d'affichage de l'étiquette du nœud, ici il est configuré pour utiliser le nom du nœud. 2.4 Effets interactifs
- Les effets interactifs font référence aux effets et opérations déclenchés lorsque l'utilisateur interagit avec le Sankey Rose Chart. Dans ECharts, des effets interactifs peuvent être obtenus en configurant la
toolbox. Le code spécifique est le suivant : rrreee
Parmi eux, feature est un objet contenant une variété d'outils interactifs. dataZoom représente l'outil de zoom, restore représente l'outil de restauration et saveAsImage représente l'outil de sauvegarde. Ces outils peuvent aider les utilisateurs à changer, interroger et exporter des données. 🎜Code complet🎜🎜🎜Le code final est ci-dessous. Voici un exemple de données de ventes, utilisant un graphique en rose de Sankey pour montrer la proportion des ventes de différents types de produits dans différentes régions. 🎜rrreee🎜🎜Conclusion🎜🎜🎜Ce qui précède représente l'ensemble du processus d'utilisation du graphique rose de Sankey pour afficher la direction du flux de données et les changements de proportion dans les ECharts, y compris des étapes telles que l'initialisation, la définition des données, la définition des styles et les effets interactifs. En application réelle, il peut être modifié et étendu en fonction des besoins spécifiques. J'espère que cet article pourra vous aider à mieux maîtriser l'utilisation des diagrammes de roses de Sankey. 🎜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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
