vue2使用echarts做从左到右树图tree

在 Vue2 中使用 ECharts 做一个从左到右的树状图 (Tree)，你可以按照以下步骤操作：

1. 首先，确保已经安装了 Vue 和 ECharts 的依赖。如果你还没有安装，可以在项目中通过 npm 或 yarn 安装：

   npm install vue echarts @types/echarts
   # 或者
   yarn add vue echarts @types/echarts

2. 在 Vue 组件中引入 ECharts：

   import { ECharts } from 'echarts';

3. 创建一个新的 Vue 组件并绑定数据结构。数据应包含节点 ID、父节点 ID 和显示文本等属性。假设数据格式如下：

   export default {
     data() {
       return {
         treeData: [
           { id: 0, name: '根节点', parent: null },
           { id: 1, name: '子节点1', parent: 0 },
           { id: 2, name: '子节点2', parent: 0 },
           // ... 更多子节点
         ]
       };
     }
   };

4. 在模板中添加 ECharts 实例，并配置选项。这里将使用 `ECharts.init()` 初始化图表，并设置树图相关配置：

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

   <script>
   export default {
     mounted() {
       this.createChart();
     },
     methods: {
       createChart() {
         const chart = new ECharts(this.$refs.chart);
         const option = {
           type: 'treemap',
           data: this.treeData,
           // 其他配置项，如分形布局、颜色映射等
           roam: true, // 开启自动缩放
           label: {
             normal: {
               formatter: function (params) {
                 return params.name;
               }
             }
           },
         };

         chart.setOption(option);
       }
     }
   }
   </script>

5. 根据需要调整样式和其他配置，例如设置层级深度、鼠标交互事件等。