vue2使用echarts做从上到下树图tree

在 Vue 2 中，使用 ECharts 制作从上到下的树形图（通常称为层级图或组织结构图），你可以按照以下步骤进行：

1. **安装依赖**：
首先，你需要在项目中安装 ECharts 和相关的 Vue 插件，例如 `vue-echarts`。可以在命令行中运行：

   npm install echarts @vue/echarts-v3

2. **引入组件**：
在你的 Vue 组件文件中，导入 ECharts 的 Vue 实例化方法并创建一个组件选项对象：

   import { ECharts } from '@vue/echarts-v3';

   export default {
     components: {
       EChartsComponent: {
         extends: ECharts,
         props: {
           options: {
             type: Object,
             required: true,
             default: () => {}
           }
         },
         mounted() {
           this.initChart();
         },
         methods: {
           initChart() {
             this.renderOn(this.$el);
           },
         },
         watch: {
           '$data': 'updateOptions', // 如果数据发生变化，自动更新图表
         },
         updated() {
           this.updateOptions(); // 初始化图表时也更新一次
         },
         updateOptions() {
           // 根据 data 更新图表配置，这里假设 data 是树状结构的对象数组
           const treeData = ...; // 你的树形数据格式
           this.setOption({
             series: [
               {
                 type: 'tree',
                 data: treeData,
                 layout: 'radial',
                 symbolSize: function (val) {
                   return val * 50;
                 },
               },
             ],
           });
         },
       },
     },
   };

3. **数据格式**：
数据应该是树形结构，每个节点通常包含 `name`, `children` 等字段。例如：

   {
     "name": "根",
     "children": [
       {
         "name": "部门A",
         "children": [ /* 子节点 */ ]
       },
       {
         "name": "部门B",
         "children": [ /* 子节点 */ ]
       }
     ]
   }

4. **在模板中使用**：
将这个自定义的 ECharts 组件添加到 Vue 模板中，并传递配置数据：

   <template>
     <div id="tree-chart">
       <EChartsComponent :options="chartOptions" />
     </div>
   </template>

   <script>
   // ...
   export default {
     data() {
       return {
         chartOptions: {}, // 初始化为空，待你通过组件的 prop 或计算属性填充
       };
     },
     computed: {
       // 根据需要计算生成 treeData，然后传递给组件
       chartOptions: {
         get() {
           // 生成并返回树形图配置
           return {/* 根据你的树数据动态构建配置 */}
         },
         set(newOptions) {
           // 当外部传入新选项时，更新图表
           this.$refs.treeChart.setOption(newOptions);
         },
       },
     },
   };
   </script>

记得初始化 ECharts 时设置好容器 ID (`id="tree-chart"`)，这样图表才会显示在对应的位置。