echarts获取不同动态数据渲染问题

问题:点击不同标题,发送不同数据请求,进行echarts渲染,但是由于异步问题,多次出错

第一步:分别在created中获取初始数据,在mounted中进行echarts初始化

 mounted() {

    this.InitEcharts();

  },

  async created() {

    this.getChartData();

  },

// 获取echarts数据
    async getChartData() {
      let res = null;
      let data = null;

      switch (this.cksearchIndex) {
        case 0:
          res = await getDispatchSum();
          data = res.data.data.countOrderTimeVO;
          break;
        case 1:
          res = await getPersonSum();
          data = res.data.data.countOrderPVO;
          break;
        default:
          res = await getOrderPay();
          data = res.data.data.countOrderPayVO;
          break;
      }
      this.timeData = Object.keys(data).map((item) => {
        switch (item) {
          case "dayOrder":
            item = "日";
            break;
          case "weekOrder":
            item = "周";
            break;
          case "monthOrder":
            item = "月";
            break;

          default:
            item = "年";
            break;
        }
        return item;
      });
      this.chartData = Object.values(data);
      this.updateChart();
    },

//初始化
 InitEcharts() {
      this.chart = echarts.init(this.$refs.main);
    },

第二步:设置option以及自适应

updateChart() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: this.timeData,
            axisTick: {
              alignWithLabel: true,
            },
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "数据",
            type: "bar",
            barWidth: "40%",
            data: this.chartData,
          },
        ],
      };

      option && this.chart.setOption(option);
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },

第三步:根据标题点击事件,设置index,再根据不同index来发送不同接口获取数据