vue 异步加载接口数据渲染echarts

 

之前的文章  https://blog.csdn.net/qq_38830964/article/details/110545637 中，有对echarts的基础使用有过阐述。

由于在实际使用环境中，通常的图表数据是后台经过聚合计算而来，所以本文主要整理一下如何从接口获取数据，并显示在图表上

由于vue渲染组件是在挂载的时候，所以当我们使用异步方法获取数据时，由于js同步异步任务执行的机制。可能在页面渲染时，异步数据还未请求到，导致图表渲染不成功。

此时，比较合理的解决办法，应该是使用 async/await 语法进行模拟同步请求。

 

代码如下：

以下代码是通过接口，获取一个饼图的数据

图表容器

方法执行

 mounted() {
    this.getdata();
}

数据获取逻辑

 async getdata() {
      this.$echarts.init(document.getElementById("myChart2")).showLoading();
      await this.$axios.get("api/Base/GetRwsForNow").then((response) => {
        //console.log(response);
        if (response.data.result == "1") {
          //let contacts = response.data.seriesList;
          //this.pieData.push(contacts);
          //this.temp = contacts;
          // console.log(response)
          this.$echarts.init(document.getElementById("myChart2")).hideLoading();
          this.$echarts.init(document.getElementById("myChart2")).setOption(
            {
              title: { text: "任务情况" },
              tooltip: {},
              legend: {
                data: response.data.legendList,
              },
              //backgroundColor: "#2c343c", //设置全局背景颜色
              textStyle: {
                //全局文本样式
                // color: "rgba(255, 255, 255, 0.3)",
              },
              //设置视觉引导线
              lineStyle: {
                color: "rgba(255, 255, 255, 0.3)",
              },
              itemStyle: {
                //高亮样式
                emphasis: {
                  //color: "#c23531",
                  shadowBlur: 200,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              series: {
                type: "pie",
                radius: "55%",
                //roseType: "angle", //南丁格尔图
                //this.pieData,

                data: response.data.seriesList,
                //[
                // { value: 2, name: "启用" },
                // { value: 1, name: "暂停" },
                //],
              },
            },
            true
          );
        }else{
          this.$ant_message.error(response.data.msg);
        }
      });

除了使用 async/await语法之外，还有很多其他的方法可以这种因为异步数据加载而导致数据未渲染的情况。比如使用定时器、$nextTick等，大家可以根据实际情况，自行选用。