vue chart树状

您可以使用基于 Vue.js 的一些图表库，如 ECharts、D3.js等。这些库都支持树状图的绘制。以下是使用 ECharts 绘制树状图的示例代码：

<template>
  <div id="chart" style="width: 100%; height: 600px;"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      const chart = echarts.init(document.getElementById('chart'))

      const option = {
        tooltip: {
          trigger: 'item',
          triggerOn: 'mousemove',
        },
        series: [
          {
            type: 'tree',

            data: [
              {
                name: '父节点 1',
                children: [
                  {
                    name: '子节点 1',
                  },
                  {
                    name: '子节点 2',
                  },
                ],
              },
              {
                name: '父节点 2',
                children: [
                  {
                    name: '子节点 3',
                  },
                  {
                    name: '子节点 4',
                  },
                ],
              },
            ],

            top: '1%',
            left: '7%',
            bottom: '1%',
            right: '20%',

            symbolSize: 7,

            label: {
              position: 'left',
              verticalAlign: 'middle',
              align: 'right',
              fontSize: 9,
            },

            leaves: {
              label: {
                position: 'right',
                verticalAlign: 'middle',
                align: 'left',
              },
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      }

      chart.setOption(option)
    },
  },
}
</script>

在上面的代码中，我们使用 ECharts 绘制了一个简单的树状图。其中，我们定义了一个 type 为 'tree' 的系列，通过给这个系列的 data 属性设置一个嵌套的对象数组，来表示树状结构。除此之外，还可以通过配置 label、symbolSize 等属性，来调整树状图的样式。最后，我们通过调用 chart.setOption() 方法，将配置好的 option 对象传递给 ECharts 实例，即可在页面上显示出树状图。