echarts树形图的使用

该博客主要展示了如何在Vue应用中使用Echarts库创建一个树状图,并进行数据加载和配置。通过`import`引入`projectVehicles`数据,初始化并设置图表的各个属性,包括布局、符号大小、动画效果等。同时,还展示了如何在图表加载完成后设置选项并更新图表。
摘要由CSDN通过智能技术生成
<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);
  },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值