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> |