关于vue3异步=＞同步,请求接口数据再echarts图表渲染

问题：解决通过异步请求后的数据进行处理和渲染，而页面加载时还未有数据渲染

问题原因：因为异步的请求，所以还未全部请求完数据，页面加载就已经渲染了，导致未拿到数据

解决：

可以用async 和 await 将异步请求转换为同步，便于后面的数据处理与图表渲染

async 和 await 说明：

1.  async关键字：用于定义一个函数或方法为异步函数。异步函数在执行过程中可以暂停，让出执行权给其他代码，然后在某个条件满足后再继续执行。异步函数使用`async`关键字来修饰函数定义。

2. await关键字：用于等待一个异步操作的完成。当遇到`await`关键字时，它会暂停当前异步函数的执行，等待后面的异步操作完成，并返回其结果。在使用`await`等待异步操作时，它会将控制权交给其他代码，直到异步操作完成才会继续执行

直接上代码：(注意看请求段代码！)

<template>
  <div ref="barone" id="root"></div>
  <!-- {{  Alldata  }} -->
</template>

<script>
import * as echarts from "echarts";
import axios from "axios";
import { onMounted, ref } from "vue";
//2020年消费额最高的5个省份
export default {
  name: "DomeBar",
  setup() {
    let barone = ref(null);
    let ydata = "";
    let xdata = "";
// 用async 和 await 将异步请求转换为同步，便于后面的数据处理与图表渲染
    async function getdata() {
    // 带参请求
      var parme = {
        startTime: "2020-01-01 00:00:00",
        endTime: "2020-12-31 23:59:59",
      };
      //获取接口数据
      let dataAll = await axios
        .post("your_ip_address", parme)
        .then(
          (response) => {
            return response.data.data;
          },
          (error) => {
            console.log("请求失败", error.message);
          }
        );
      culdata(dataAll);
    }

    //数据处理
    function culdata(dataArray) {
      let dataMap = new Map(); //准备一个map容器

      for (let index in dataArray) {
        let finalTotalAmount = dataArray[index].finalTotalAmount; //取出金额
        let provinceName = dataArray[index].provinceName; //取出省名称
        if (dataMap.has(provinceName)) {
          //如果存在则相加
          dataMap.set(
            provinceName,
            dataMap.get(provinceName) + finalTotalAmount
          );
        } else {
          //如果不存在则是第一个，直接存
          dataMap.set(provinceName, finalTotalAmount);
        }
      }
      let newarr = Array.from(dataMap)
        .sort((a, b) => b[1] - a[1])
        .slice(0, 5);
      console.log(newarr);

      //声明两个数组进行接收
      let yAxisdata = [];
      let xAxisdata = [];
      //将处理后的数据进行拆解
      for (let [k, v] of newarr) {
        yAxisdata.push(k);
        xAxisdata.push(v);
      }
      ydata = yAxisdata;
      xdata = xAxisdata;
      //最后将处理好的数据以对象形式进行返回

      // return { ydata: yAxisdata, xdata: xAxisdata }
      SerEcharts();
    }

    function SerEcharts() {
      let setBar = echarts.init(barone.value);
      setBar.setOption({
        title: {
          text: "柱状图",
        },
        xAxis: {
          type: "category",
          data: ydata,
        },
        yAxis: {
          type: "value",
        },
        series: {
          name: "2020年消费额最高的5个省份",
          type: "bar",
          data: xdata,
        },
      });
    }
    onMounted(() => {
      getdata();
    });
    return {
      barone,
    };
  },
};
</script>

<style>
#root {
  width: 700px;
  height: 400px;
  border: 1px solid red;
  float: right;
}
</style>