请求来数据echart图形不显示

x33g5p2x  于2022-05-05 转载在 其他  
字(1.4k)|赞(0)|评价(0)|浏览(248)

问题描述

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

问题分析

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

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

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

解决方案:

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()
}

相关文章

微信公众号

最新文章

更多