【echarts】vue+echarts树状图

完整代码如下:

<template>
  <div>
    <div id="treeChart" :style="{width: 500px, height: 500px, padding: 30px}"></div>
  </div>
</template>

<script>
export default {
          
   
  name: "eCharts",
  data() {
          
   
    return {
          
   
      treedata:[{
          
    //一定一定要注意这里有[]
        name: 本科发展方向,
        children: [
          {
          
   
            name: 考研,
          },
          {
          
   
            name: 就业,
            children: [
              {
          
   
                name: 相关就业详见菜单栏‘培养方向’
              }
            ]
          },
          {
          
   
            name: 考公
          },
          {
          
   
            name: 留学,
            children: [
              {
          
   
                name: 相关文件（申请流程、交换要求）
              }
            ]
          },
          {
          
   
            name: 创业
          }
        ]
      }]
    }
  },
  mounted() {
          
   
    this.showChart();
  },
  methods: {
          
   
    showChart() {
          
   
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById(treeChart));

      // 指定图表的配置项和数据
      var option = {
          
   
        title: {
          
   
            text: ECharts 入门示例
        },
        tooltip: {
          
   
          trigger: item,
          triggerOn: mousemove
        },
        series: [
            {
          
   
                type: tree,

                data: this.treedata,

                top: 1%,
                left: 7%,
                bottom: 1%,
                right: 20%,

                symbolSize: 7,

                label: {
          
   
                    position: left,
                    verticalAlign: middle,
                    align: right,
                    fontSize: 13
                },

                leaves: {
          
   
                    label: {
          
   
                        position: right,
                        verticalAlign: middle,
                        align: left
                    }
                },

                expandAndCollapse: true,
                animationDuration: 550,
                animationDurationUpdate: 750
            }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    }
  }
}
</script>

<style>
.ml30{
          
   
  margin-left: 30px;
}
.m50{
          
   
  margin: 50px
}
</style>

不知道为什么文字显示不全，下次再更。

PS: 谁**能想到找了那么久bug竟是少加了中括号，哭晕在厕所。