echarts 树形图 修改版

上一篇博客中遇到了一些问题 例如赋值没有效果等  是因为作用域的问题   渲染视图的数据，也怪我没有完成就把它发了出来   需要数据接收的过程定义在data中！

data() {
    return {
      activeNames: ["1"],
      vehicleData: [],
      TabsData: [],
      aaaa: [],
      myChart: "",
      option: {
        name: "方案场景",
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            data: [
              {
                children: [],
              },
            ],
            top: "10%",
            bottom: "28%", //距离
            layout: "radial", //分布的方式
            symbol: "circle", //点的形状
            symbolSize: 40, //圆点的大小
            initialTreeDepth: 1, //默认展开多少层
            animationDurationUpdate: 750, //展开动画的时常
            emphasis: {
              focus: "descendant",
            },
          },
        ],
      },
    };
  },

话不多说      我把代码都放这 

async created() {
    await this.showVehicle();
  },
  mounted() {
    this.echartsCall();
  },
  methods: {
    echartsCall() {
      var chartDom = document.getElementById("main");
      this.myChart = this.$echarts.init(chartDom);
      this.myChart.setOption(this.option);
    },
    showVehicle() {
      projectVehicles().then((res) => {
        res.data.map((item) => {
          this.option.series[0].data[0].children.push(item);
        });
        this.vehicleData = res.data;
        this.TabsData = res.data[0];
      });
    },
  },
  watch: {
    option: {
      handler(a, b) {
        if (this.myChart) {
          if (a) {
            this.myChart.setOption(a);
          } else {
            this.myChart.setOption(b);
          }
        } else {
          this.init();
        }
      },
      deep: true,
    },
  },