play with sankey

2025-10-17 14:08:35 +02:00
parent 5f731842d4
commit 56083b4580
1 changed files with 44 additions and 0 deletions
--- a/test.html
+++ b/test.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>Sankey Expenses</title>
+  <script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
+  <style>
+    #chart { width: 100%; height: 600px; }
+  </style>
+</head>
+<body>
+  <div id="chart"></div>
+
+  <script>
+    const data = {"nodes": [
+      {"name": "X-August"},
+      {"name": "X-September"},
+      {"name": "X-Oktober"},
+      {"name": "X-November"}
+   ],
+   "links": [
+      {"source": "X-August", "target": "X-September", "value": 1},
+      {"source": "X-September", "target": "X-Oktober", "value": 3},
+      {"source": "X-Oktober", "target": "X-November", "value": 2}
+  ]};
+    const chart = echarts.init(document.getElementById('chart'));
+    const option = {
+        title: { text: 'Monthly Expenses by Category' },
+        tooltip: { trigger: 'item', triggerOn: 'mousemove' },
+        series: [
+        {
+            type: 'sankey',
+            layout: 'none',
+            emphasis: { focus: 'adjacency' },
+            data: data.nodes,
+            links: data.links,
+            lineStyle: { color: 'gradient', curveness: 0.5 }
+        }
+        ]
+    };
+    chart.setOption(option);
+  </script>
+</body>
+</html>