[JavaScript知识库]请求来数据echart图形不显示

问题描述

调试代码的时候数据已经请求成功，而且打印对象里面的属性，数据是有的，但是图表就是没展示

问题分析

想要解决这个问题就要彻底了解什么是异步请求和什么是同步请求

• 同步请求，客户端向服务端发送请求，服务端响应以后客户端才渲染页面
• 异步请求，客户端向服务端发送请求，客户端不等服务端响应就行行页面渲染，一般做页面的局部刷新。

那么造成上面原因就是我的页面向服务端发送请求，页面不等服务端响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染成功，页面此时只知道他所渲染图表时数据为空，所以不会显示数据

解决方案：

1.把渲染图表的代码放到请求返回数据的对象里

    get("/energy/secondQuery", this.form)
        .then((res) => {
          this.echarts_config.chain = {
            backgroundColor: "rgba(0,0,0,0)",
            series: [
              {
                type: "gauge",
                radius: "90%", // 仪表盘的大小调整
                center: ["50%", "45%"], // 仪表盘的位置调整
                min: 0,
                max: 10000,
                splitNumber: 10, // 仪表盘刻度的分割段数,默认 10。
                //。。。此处省略配置
                data: [
                  {
                    value: this.analysisVo.currentValue * 100,
                    name: "当前",
                    title: {
                      offsetCenter: ["-40%", "80%"],
                      color: "rgba(255, 255, 255, 0.65)",
                      fontSize: 10,
                    },
                    detail: {
                      fontSize: 10,
                      offsetCenter: ["-40%", "100%"],
                    },
                  },
                  {
                    value: this.analysisVo.hbValue * 100,
                    name: "同比",
                    title: {
                      offsetCenter: ["0%", "80%"],
                      color: "rgba(255, 255, 255, 0.65)",
                      fontSize: 10,
                    },
                    detail: {
                      fontSize: 10,
                      offsetCenter: ["0%", "100%"],
                    },
                  },
                  {
                    value: this.analysisVo.historyValue * 100,
                    name: "历史平均值",
                    title: {
                      offsetCenter: ["50%", "80%"],
                      color: "rgba(255, 255, 255, 0.65)",
                      fontSize: 10,
                    },
                    detail: {
                      fontSize: 10,
                      offsetCenter: ["40%", "100%"],
                    },
                  },
                ],
              },
            ],
          };
})

2.在获取数据后重新加载配置

init(){
echart配置代码
}

api(){
调取接口后的函数，获取数据后调用
this.init()
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖