94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<template>
|
|
<div ref="chartContainer" style="width: 800px; height: 550px;"></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { defineComponent, ref, onMounted } from "vue";
|
|
import * as echarts from "echarts";
|
|
import { getSonId, getDayId } from '@/api/Invite';
|
|
import { reactive } from "vue";
|
|
const chartContainer = ref(null);
|
|
const props = defineProps({
|
|
id: Number,
|
|
});
|
|
const data = reactive( {
|
|
name: '',
|
|
symbolSize:40,
|
|
children: []
|
|
});
|
|
// 树形数据
|
|
const chartOption = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}'
|
|
},
|
|
series: [
|
|
{
|
|
type: 'tree', // 使用树形图
|
|
layout: 'tree', // 布局类型：'radial' 或 'tree'
|
|
roam: true, // 启用拖动功能,
|
|
orient: 'vertical',// 方向改为自上而下
|
|
initialTreeDepth: -1, // 可以让所有节点都展开
|
|
data: [
|
|
data
|
|
],
|
|
itemStyle: {
|
|
color: '#63b1f2', // 节点颜色
|
|
},
|
|
label: {
|
|
position: 'top',
|
|
verticalAlign: 'middle',
|
|
align: 'center',
|
|
fontSize: 12,
|
|
},
|
|
lineStyle: {
|
|
color: '#aaa',
|
|
width: 2,
|
|
curveness: 0.3,
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
// 在组件挂载后初始化图表
|
|
onMounted(() => {
|
|
getSonId(props.id).then(res => {
|
|
data.name = props.id || '';
|
|
|
|
if(res.data!=null){
|
|
res.data.forEach((element: any) => {
|
|
let item = {
|
|
name:element.invitename,
|
|
symbolSize:20,
|
|
children: []
|
|
}
|
|
getSonId(element.invitename).then(res1 => {
|
|
if(res1.data!=null){
|
|
res1.data.forEach((element1: any) => {
|
|
let item1 = {
|
|
name: element1.invitename,
|
|
symbolSize:20,
|
|
children: []
|
|
};
|
|
item.children.push(item1);
|
|
})
|
|
data.children.push(item);
|
|
const myChart = echarts.init(chartContainer.value);
|
|
myChart.setOption(chartOption);
|
|
}
|
|
})
|
|
|
|
|
|
});
|
|
}
|
|
|
|
})
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 样式可根据需要自定义 */
|
|
</style>
|