uniapp中树状图并收缩展示

UniApp中的树状图组件通常用于展示层级结构的数据，如目录、组织架构或者是产品分类等。在uni-app中，可以使用Echarts这样的第三方库来创建树形图表，Echarts提供了一个Tree组件，支持数据驱动的动态渲染。

要展示并能进行收缩展开的操作，你可以按照以下步骤操作：

1. 首先，在项目中引入Echarts和相应的依赖库。

<template>
  <div ref="treeChart"></div>
</template>

<script>
import ECharts from '@vant/wechart';
...
export default {
  components: {
    ECharts,
  },
  ...
</script>

2. 然后，在data中初始化树状图的数据结构，并设置默认状态（例如初始展开级别）。

data() {
  return {
    treeData: [
      // 树状图的数据配置
    ],
    expandLevel: 0, // 初始展开级别
  };
}

3. 在 mounted 或者需要更新的时候，绑定数据到树形图组件，并处理点击事件来切换节点的展开与收起。

methods: {
  toggleNode(node) {
    if (node.level <= this.expandLevel) {
      node.children.forEach(child => this.toggleNode(child));
    } else {
      this.expandLevel = node.level;
    }
  },
  initChart() {
    const chart = new ECharts(this.$refs.treeChart);
    // 初始化ECharts Tree实例，并设置节点数据和点击事件监听
    ...
    chart.on('click', ({ item }) => this.toggleNode(item.data));
  },
  mounted() {
    this.initChart();
  },
}

4. 最后，记得在模板中显示ECharts实例，并开启树图组件。

<template>
  <e-charts :options="chartOptions" @ready="initChart" />
</template>

注意，这只是一个基本示例，实际应用中可能还需要根据具体的业务需求定制更多的功能，比如加载提示、自定义样式等。