echart動態獲取數據不顯示

當時寫完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(() => {})
    },