echarts树形图的使用_echarts tree datazoom

<script>
import { projectVehicles } from "../api/api";
export default {
  name: "tabvehicle",
  data() {
    return {
      activeNames: ["1"],
      vehicleData: [],
      TabsData: [],
      aaaa: [],
      option: [
        {
          name: "方案场景",
          children: [
            {
              name: "analytics",
            },
            {
              name: "animate",
            },
            {
              name: "data",
            },
          ],
        },
      ],
    };
  },
  created() {
    // console.log(this.sss[0]);
  },
  mounted() {
    this.showVehicle();
    var chartDom = document.getElementById("main");
    var myChart = this.$echarts.init(chartDom);
    var option;
    // myChart.setOption(this.option);
    // myChart.showLoading();
    // console.log(this.option);
    myChart.setOption(
      (option = {
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
 
            data: [this.option[0]],
 
            top: "0%",
            bottom: "14%", //距离
 
            layout: "radial", //分布的方式
 
            symbol: "circle", //点的形状
            
            symbolSize: 40, //圆点的大小
            initialTreeDepth: 1, //默认展开多少层
            animationDurationUpdate: 750, //展开动画的时常
            emphasis: {
              focus: "descendant",
            },
            subtextStyle:{
              align:"left",
            }
          },
        ],
      })
    );
    option && myChart.setOption(option);
  },