uniapp 画树状图

在 uni-app 中，可以使用 `echarts` 库来画树状图。下面是一个简单的示例：

1. 首先，在 `pages` 目录下创建一个页面，例如 `tree.vue`。

2. 在 `tree.vue` 中引入 `echarts` 库：

<template>
  <view class="container">
    <ec-canvas id="mychart" canvas-id="mychart" :ec="ec"></ec-canvas>
  </view>
</template>

<script>
import * as echarts from '@/components/ec-canvas/echarts';

export default {
  data() {
    return {
      ec: {
        lazyLoad: true
      }
    };
  },
  onLoad() {
    this.ecComponent = this.$refs['mychart'].getComponent();
    this.initChart();
  },
  methods: {
    initChart() {
      this.ecComponent.init((canvas, width, height) => {
        const chart = echarts.init(canvas, null, {
          width,
          height,
          devicePixelRatio: this.$devicePixelRatio
        });

        // 在这里编写树状图的配置项和数据
        const option = {
          series: [{
              type: 'tree',
              data: [{
                  name: '节点1',
                  children: [{
                      name: '节点2'
                    },
                    {
                      name: '节点3'
                    }
                  ]
                },
                {
                  name: '节点4',
                  children: [{
                      name: '节点5'
                    },
                    {
                      name: '节点6'
                    }
                  ]
                }
              ]
            }
          ]
        };

        chart.setOption(option);

        return chart;
      });
    }
  }
};
</script>

在这个示例中，我们使用 `ec-canvas` 组件来渲染 `echarts` 图表。在 `onLoad` 生命周期中，我们使用 `getComponent` 方法获取 `ec-canvas` 实例，然后在 `init` 回调函数中初始化 `echarts` 实例。

3. 在 `echarts` 中，我们可以使用 `type: 'tree'` 来指定图表类型为树状图。然后，在 `data` 中指定树状图的数据。例如：

const option = {
  series: [{
      type: 'tree',
      data: [{
          name: '节点1',
          children: [{
              name: '节点2'
            },
            {
              name: '节点3'
            }
          ]
        },
        {
          name: '节点4',
          children: [{
              name: '节点5'
            },
            {
              name: '节点6'
            }
          ]
        }
      ]
    }
  ]
};

在这个示例中，我们定义了一个根节点，两个子节点，每个子节点又有两个子节点。您可以根据需要修改数据。

4. 最后，我们调用 `chart.setOption(option)` 来设置树状图的配置项和数据。

这就是一个简单的 uni-app 画树状图的示例。您可以根据需要修改配置项和数据来实现自己的树状图。