Vue Project introduces the problem of Abscissa display of echarts Line Chart

1: problem description
use vue"s elmentui as background system! Use echarts to display data (line chart)! It is found that there is a problem with the introduction of updated Abscissa display when the data is normal! If the Abscissa array is empty, the display is normal!

2: related codes

axios.get(url).then((res) => {
        let data = res.data.resultset
        this.$nextTick(function () {
          let self = this
          self.xAxisData = []
          self.pv = []
          self.uv = []
          self.uv1 = []
          self.uv3 = []
          data.forEach(function (value, key) {
            // 
            
            
            **// self.xAxisData.push(value.date_str)
            self.pv.push(value.pv)
            self.uv.push(value.uv)
            self.uv1.push(value.uv1)
            self.uv3.push(value.uv3)**
            
            
          })
          console.log(this.xAxisData)
          this.drawPie("pic_1")
        })
      }).catch((error) => {
        console.log(error)
      })

in which * * the data in the package is read from the API and assigned to the relevant array. The data is correct and the self.xAxisData is not assigned, that is, if the default is empty, the display is normal. If the data is added normally, the display is not normal.

3: no error message

4: the correct discount is shown as follows

5: what solutions to try
the horizontal data is still not displayed correctly on the Internet by default, and there is no similar situation.