Vue echarts树图

要在 Vue 中使用 echarts 树图，你需要先安装 echarts。

可以使用 npm 安装 echarts：

npm install echarts --save

安装完成后，你可以在 Vue 组件中引入 echarts：

import echarts from 'echarts'

然后，在 Vue 中使用 echarts 树图，你可以按照以下步骤：

1. 在模板中添加一个 div 容器，用于显示 echarts 树图：

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

2. 在 Vue 组件的 mounted 钩子中初始化 echarts 实例，并配置树图的数据和样式：

mounted() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(this.$refs.chart);

  // 配置树图的数据和样式
  const option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
    },
    series: [
      {
        type: 'tree',
        data: [
          {
            name: '节点1',
            children: [
              {
                name: '节点1.1',
                children: [
                  {
                    name: '节点1.1.1'
                  },
                  {
                    name: '节点1.1.2'
                  }
                ]
              },
              {
                name: '节点1.2',
                children: [
                  {
                    name: '节点1.2.1'
                  }
                ]
              }
            ]
          }
        ],
        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
      }
    ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

这样，你就可以在 Vue 中使用 echarts 树图了。