echart动态获取数据不显示

Posted 2021-11-30 zhaocainiao

当时写完echart,然后当模拟数据动态显示的时候,把里面的data直接替换成获取回来的数据不显示,后来发现是当页面初始加载的时候就已经取数据了且只取一次,所以就用了一个watch监视,监视变化需要在重新渲染,但是发现一直在发送请求,所以后来就在获取数据之后再创建echart示例就好了呀,代码如下

drawLine() {
      getLine(this.lineQuery).then(response => {
        // 基于准备好的dom，初始化echarts实例,发送请求回来再创建实例
        this.lineDatas = response.data
        this.myChart = echarts.init(document.getElementById(‘myChart‘))
        const option = {
          tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
              type: ‘cross‘,
              label: {
                backgroundColor: ‘#6c6c6c‘
              },
              lineStyle: {
                color: ‘#004E52‘,
                opacity: 0.5,
                width: 2
              }
            }
          },
          legend: {
            data: this.lineDatas.emotionLevel,
            icon: ‘circle‘
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          grid: {
            left: ‘3%‘,
            right: ‘4%‘,
            bottom: ‘3%‘,
            containLabel: true
          },
          xAxis: [
            {
              type: ‘category‘,
              boundaryGap: false,
              data: this.lineDatas.statTime
            }
          ],
          yAxis: [
            {
              type: ‘value‘
            }
          ],
          series: [
            {
              name: this.lineDatas.emotionCharts[0].emotionLevel,
              type: ‘line‘,
              itemStyle: {
                normal: {
                  color: ‘#F56C6C‘,
                  lineStyle: {
                    color: ‘#F56C6C‘
                  }
                }
              },
              data: this.lineDatas.emotionCharts[0].statNum
            },
            {
              name: this.lineDatas.emotionCharts[1].emotionLevel,
              type: ‘line‘,
              itemStyle: {
                normal: {
                  color: ‘#E6A23C‘,
                  lineStyle: {
                    color: ‘#E6A23C‘
                  }
                }
              },
              data: this.lineDatas.emotionCharts[1].statNum
            },
            {
              name: this.lineDatas.emotionCharts[2].emotionLevel,
              type: ‘line‘,
              itemStyle: {
                normal: {
                  color: ‘#409EFF‘,
                  lineStyle: {
                    color: ‘#409EFF‘
                  }
                }
              },
              // stack: ‘总量‘,
              data: this.lineDatas.emotionCharts[2].statNum
            }
          ]
        }
        // 绘制折线
        this.myChart.setOption(option)
      }).catch(() => {})
    },