107 lines
3.2 KiB
HTML
107 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>ECharts</title>
|
||
<!-- 引入刚刚下载的 ECharts 文件 -->
|
||
<script src="/ui/assets/echarts.js"></script>
|
||
</head>
|
||
<body>
|
||
<!-- 为 ECharts 准备一个定义了宽高的 DOM -->
|
||
<div id="main" style="width: 1100px;height:800px;"></div>
|
||
<script type="text/javascript">
|
||
// 基于准备好的dom，初始化echarts实例
|
||
|
||
let myChart = window.echarts.init($node.children[0]);
|
||
function convertToTree(data) {
|
||
const map = {};
|
||
const roots = [];
|
||
|
||
// 首先创建所有节点的映射
|
||
data.forEach(item => {
|
||
map[item.id] = {
|
||
name: item.name,
|
||
value:item.id,
|
||
children: []
|
||
};
|
||
});
|
||
|
||
// 构建树形结构
|
||
data.forEach(item => {
|
||
const node = map[item.id];
|
||
if (!item.parent_id || item.parent_id === ''|| item.parent_id === '-1') {
|
||
roots.push(node);
|
||
} else {
|
||
const parent = map[item.parent_id];
|
||
if (parent) {
|
||
parent.children.push(node);
|
||
}
|
||
}
|
||
});
|
||
|
||
return roots;
|
||
}
|
||
|
||
// 获取数据并展示图表
|
||
async function fetchAndShowChart() {
|
||
myChart.showLoading();
|
||
try {
|
||
const response = await fetch('http://127.0.0.1:5002/api/tree/', {
|
||
method: 'GET',
|
||
|
||
});
|
||
//console.log(response)
|
||
const result = await response.json();
|
||
if (result.code === 0) {
|
||
const treeData = convertToTree(result.data);
|
||
console.log(treeData)
|
||
const option = {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
triggerOn: 'mousemove'
|
||
},
|
||
series: treeData.map((root, index) => ({
|
||
type: 'tree',
|
||
name: `tree${index + 1}`,
|
||
data: [root],
|
||
top: '5%',
|
||
orient: 'vertical',
|
||
left: `${index * 30 + 5}%`,
|
||
bottom: '2%',
|
||
right: `${(treeData.length - index - 1) * 30 + 5}%`,
|
||
symbolSize: 7,
|
||
label: {
|
||
position: 'left',
|
||
verticalAlign: 'middle',
|
||
align: 'right'
|
||
},
|
||
leaves: {
|
||
label: {
|
||
position: 'right',
|
||
verticalAlign: 'middle',
|
||
align: 'left'
|
||
}
|
||
},
|
||
emphasis: {
|
||
focus: 'descendant'
|
||
},
|
||
expandAndCollapse: true,
|
||
animationDuration: 550,
|
||
animationDurationUpdate: 750
|
||
}))
|
||
};
|
||
|
||
myChart.hideLoading();
|
||
myChart.setOption(option);
|
||
}
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
myChart.hideLoading();
|
||
}
|
||
}
|
||
|
||
// 执行获取数据和展示图表
|
||
fetchAndShowChart();
|
||
</script>
|
||
</body>
|
||
</html> |