86 lines
1.9 KiB
Vue
86 lines
1.9 KiB
Vue
<template>
|
|
<div ref="chartContainer" style="width: 600px; 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: [
|
|
{
|
|
name: '祖父1',
|
|
symbolSize: 40,
|
|
children: [
|
|
{
|
|
name: '父亲',
|
|
symbolSize: 30,
|
|
children: [
|
|
{
|
|
name: '我',
|
|
symbolSize: 20,
|
|
children: [
|
|
{ name: '妻子', symbolSize: 20 }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: '母亲',
|
|
symbolSize: 30,
|
|
}
|
|
]
|
|
}
|
|
],
|
|
itemStyle: {
|
|
color: '#63b1f2', // 节点颜色
|
|
},
|
|
label: {
|
|
position: 'top',
|
|
verticalAlign: 'middle',
|
|
align: 'center',
|
|
fontSize: 12,
|
|
},
|
|
lineStyle: {
|
|
color: '#aaa',
|
|
width: 2,
|
|
curveness: 0.3,
|
|
}
|
|
}
|
|
]
|
|
};
|
|
|
|
//在组件挂载后初始化图表
|
|
onMounted(() => {
|
|
const myChart = echarts.init(chartContainer.value);
|
|
myChart.setOption(chartOption);
|
|
});
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 样式可根据需要自定义 */
|
|
</style>
|