Vue echarts树图 从上到下结构

如果您需要在 Vue 中使用 ECharts 绘制一个从上到下的树状图，可以通过配置 series 中的 layout 属性来实现。具体来说，将 layout 设置为 'orthogonal' 即可。以下是一个简单的示例代码：

<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',
                  },
                ],
              },
            ],

            layout: 'orthogonal', // 设置为从上到下布局

            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>

在上面的代码中，我们将 series 中的 layout 属性设置为 'orthogonal'，即可实现从上到下的树状布局。其他属性的设置与之前的示例代码相同。