45 lines
1.2 KiB
HTML
45 lines
1.2 KiB
HTML
<!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>
|