如何在ECharts中使用桑基玫瑰圖展示資料流向和佔比變化
- WBOY原創
- 2023-12-18 13:47:45689瀏覽
ECharts是一個視覺化的資料展示庫，它可以使資料變得更加生動和直觀。其中，桑基玫瑰圖可以在展示資料流向和占比變化時提供很大的幫助。本文將介紹如何在ECharts中使用桑基玫瑰圖，同時提供具體的程式碼範例。
- 簡介
桑基玫瑰圖是一種特殊的玫瑰圖，透過內外圓的同心圓環和扇區長度展示數據，具有清晰的層級結構，適合展示多維資料流向。在ECharts中，桑基玫瑰圖可以用來展示不同維度之間的比例和隨時間變化的比例關係。此外，針對資料量較大且維度過多的情況，ECharts也支援滾動展示和縮圖預覽，方便使用者進行視覺化互動。
- 實作
以下將介紹如何在ECharts中使用桑基玫瑰圖展示資料流向和佔比變化，包括初始化、設定資料、設定樣式和互動效果等四個步驟。
2.1 初始化
初始化涉及到引入ECharts的js檔案和新建一個畫布容器。具體程式碼如下：
<!-- 引入ECharts插件 --> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <!-- 定义画布容器 --> <div id="sankey-rose" style="width: 800px;height: 600px;"></div>
2.2 設定資料
設定資料涉及到定義節點和邊。節點是指資料中的特定屬性，例如在一個銷售資料的桑基玫瑰圖中，節點可以是商品類型或銷售地區；邊是指不同節點之間的連線和流向，代表資料的邏輯關係。具體程式碼如下：
// 设置节点
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
}
]
};其中，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}'
}
}]
};其中，type表示圖表類型，data和links分別對應前面定義的nodes和links。 layoutIterations表示佈局迭代次數，數值越大表示佈局越密集，通常設為32即可。 lineStyle表示邊的樣式，color表示邊的顏色，這裡設為使用來源節點的顏色；curveness表示邊的弧度，設為0.5表示為曲線。 label表示節點標籤的樣式，formatter表示節點標籤的顯示內容，這裡設為使用節點的名稱。
2.4 互動效果
互動效果指使用者在與桑基玫瑰圖進行互動時觸發的效果和操作。在ECharts中，互動效果可以透過配置toolbox來實現。具體程式碼如下：
// 设置交互效果
option.toolbox = {
feature: {
dataZoom: {},
restore: {},
saveAsImage: {}
}
};其中，feature是一個包含多種互動型工具的物件。 dataZoom表示縮放工具，restore表示還原工具，saveAsImage表示儲存工具。這些工具可以幫助使用者對資料進行切換、查詢和匯出等操作。
- 完整程式碼
下面是最終的程式碼。這裡以一個銷售資料的範例為例，使用桑基玫瑰圖展示不同類型商品在不同區域的銷售佔比情況。
<!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>- 結語
以上就是如何在ECharts中使用桑基玫瑰圖展示資料流向和占比變化的全部過程，包括初始化、設定資料、設定樣式和互動效果等步驟。在實際運用中，可以根據具體需求進行修改和擴展。希望本文能幫助大家更能掌握桑基玫瑰圖的使用。
以上是如何在ECharts中使用桑基玫瑰圖展示資料流向和佔比變化的詳細內容。更多資訊請關注PHP中文網其他相關文章！