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