在vue项目中，获取到数据后在echart数据配置项部分一直报错获取不到数据（钩子函数部分），但是在取数据的方法中可以打印出数据?

Z时代
2024-02-24
分类：IT

报错：

vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'map')" found in ---> <ChartOne> at src/charts/ChartOne.vue <MyCharts> at src/views/MyCharts.vue <HomeView> at src/views/HomeView.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <App> at src/App.vue <Root> warn @ vue.runtime.esm.js:4605 logError @ vue.runtime.esm.js:3045 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 invokeWithErrorHandling @ vue.runtime.esm.js:3024 callHook$1 @ vue.runtime.esm.js:4031 insert @ vue.runtime.esm.js:4423 invokeInsertHook @ vue.runtime.esm.js:6942 patch @ vue.runtime.esm.js:7153 Vue._update @ vue.runtime.esm.js:3765 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 eval @ main.js:37 ./src/main.js @ app.js:1730 __webpack_require__ @ app.js:2556 （匿名） @ app.js:3694 __webpack_require__.O @ app.js:2610 （匿名） @ app.js:3695 （匿名） @ app.js:3697 vue.runtime.esm.js:3049 TypeError: Cannot read properties of null (reading 'map') at VueComponent.initOption (ChartOne.vue:33:1) at VueComponent.mounted (ChartOne.vue:19:1) at invokeWithErrorHandling (vue.runtime.esm.js:3017:1) at callHook$1 (vue.runtime.esm.js:4031:1) at Object.insert (vue.runtime.esm.js:4423:1) at invokeInsertHook (vue.runtime.esm.js:6942:1) at Vue.patch [as __patch__] (vue.runtime.esm.js:7153:1) at Vue._update (vue.runtime.esm.js:3765:1) at Vue.updateComponent (vue.runtime.esm.js:3875:1) at Watcher.get (vue.runtime.esm.js:3446:1) logError @ vue.runtime.esm.js:3049 globalHandleError @ vue.runtime.esm.js:3041 handleError @ vue.runtime.esm.js:3008 invokeWithErrorHandling @ vue.runtime.esm.js:3024 callHook$1 @ vue.runtime.esm.js:4031 insert @ vue.runtime.esm.js:4423 invokeInsertHook @ vue.runtime.esm.js:6942 patch @ vue.runtime.esm.js:7153 Vue._update @ vue.runtime.esm.js:3765 updateComponent @ vue.runtime.esm.js:3875 Watcher.get @ vue.runtime.esm.js:3446 Watcher @ vue.runtime.esm.js:3436 mountComponent @ vue.runtime.esm.js:3892 Vue.$mount @ vue.runtime.esm.js:8772 eval @ main.js:37 ./src/main.js @ app.js:1730 __webpack_require__ @ app.js:2556 （匿名） @ app.js:3694 __webpack_require__.O @ app.js:2610 （匿名） @ app.js:3695 （匿名） @ app.js:3697 vue.runtime.esm.js:4605 [Vue warn]: Error in mounted hook: "TypeError: Cannot read properties of null (reading 'map')" found in ---> <StationYield1> at src/charts/StationYield1.vue <MyCharts> at src/views/MyCharts.vue <HomeView> at src/views/HomeView.vue <ElMain> at packages/main/src/main.vue <ElContainer> at packages/container/src/main.vue... (1 recursive calls) <App> at src/App.vue

<Root>

代码：

export default {
  data () {
    return {
      chartInstance: null,
      allData: null
    }
  },
  // created () {
  //   this.initChart()
  //   this.getData()
  // },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
      this.getData()
      this.updateChart()
    })
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.repairstationyield_ref, 'chalk')
      const chartOption = {
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          top: '15%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        seires: [
          {
            type: 'bar',
            lable: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            }
          }
        ]
      }
      this.chartInstance.setOption(chartOption)
    },
    async getData () {
      const { data: ret } = await this.$http.get('http://127.0.0.1:8888/api/rank')
      this.allData = ret
      // console.log(ret)
      // console.log(this.allData.map(item => {
      //   return item.name
      // }))
      this.updateChart()
    },
    updateChart () {
      // 拿x轴信息
      const xAxisValue = this.allData.map(item => {
        return item.name
      })
      this.initChart.xAxis.data = xAxisValue
      // 拿y轴信息
      const yAxisValue = this.allData.map(item => {
        return item.value
      })
      this.initChart.series[0].data = yAxisValue
      const dataOption = {
        xAxis: {
          data: this.initChart.xAxis.data
        },
        series: [
          { data: this.initChart.series[0].data }
        ]
      }
      this.chartInstance.setOption(this.initOption)
    },
    // 来给我自适应吧
    screenAdapter () {
      this.chartInstance.resize()
    }
  }
}</script>

回答：

你在生命周期钩子函数 mounted 中触发三个函数调用，this.getData获取数据的函数是异步的，并不会按着顺序执行完后再执行 this.updateChart，所以在 this.updateChart 函数中，你的 this.allData 其实是没有值的，你可以将 this.updateChart 放在请求成功后再调用。

回答：

async 是异步，this.allData第一次被使用还是null,报的是 null.map 的错。感觉还有其他问题，太乱了，你这。

回答：

1.初始化可以执行initChart()方法没问题
2.获取数据后给option里面的data赋值，option里面其它属性也要带上，建议将initChartOption放data里面
我稍微改了一下代码：

export default {
  data () {
    return {
      chartInstance: null,
      allData: null,
      initChartOption: {
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          top: '15%',
          right: '4%',
          bottom: '1%',
          containLabel: true
        },
        seires: [
          {
            type: 'bar',
            lable: {
              show: true,
              position: 'right',
              textStyle: {
                color: 'white'
              }
            }
          }
        ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
      this.getData()
    })
    window.addEventListener('resize', this.screenAdapter)
  },
  destroyed () {
    window.removeEventListener('resize', this.screenAdapter)
  },
  methods: {
    initChart () {
      this.chartInstance = this.$echarts.init(this.$refs.repairstationyield_ref, 'chalk')
      this.chartInstance.setOption(this.initChart)
    },
    async getData () {
      const { data: ret } = await this.$http.get('http://127.0.0.1:8888/api/rank')
      this.allData = ret
      // console.log(ret)
      // console.log(this.allData.map(item => {
      //   return item.name
      // }))
      this.updateChart()
    },
    updateChart () {
      // 拿x轴信息
      const xAxisValue = this.allData.map(item => {
        return item.name
      })
      this.initChart.xAxis.data = xAxisValue
      // 拿y轴信息
      const yAxisValue = this.allData.map(item => {
        return item.value
      })
      this.initChart.series[0].data = yAxisValue
      this.chartInstance.setOption(this.initChart)
    },
    // 来给我自适应吧
    screenAdapter () {
      this.chartInstance.resize()
    }
  }}