vue中echarts的動態渲染資料watch

剛用到echarts，之前也有看過，看了之後感覺挺簡單的，但是後來用的時候遇到了一個小問題，一般echarts都是獲取後端資料動態載入資料，而網上好多demo都不是很好用，讓我搞了好長一會才明白過來，話不多說，直接上程式碼。

<template>
  <div id="myChart" ref="myChart" style="width: 100%; height: 200px"></div>
</template>

<script>
import moment from 'moment'
import { queryLine } from '@/apis/statistics/daily.js'
export default {
  props: ['postData'],
  data() {
    return {
      getDataNum: [],
      getDataTime: []
    }
  },
 watch:{
   postData:{
     immediate: true,
     handler(val){
       console.log(val,'差點撒旦阿薩=============');
       val.forEach((item) => {
        this.getDataNum.push(Number(item.ytdUvNew))
        this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
      })
       this.$nextTick(() => { //這裡需要重新載入渲染
        this.initData()
      })
     }
   }
   
 },
  methods: {
    initData() {
      const myCharts = this.$echarts.init(this.$refs.myChart)
      let option = {
         title :{
           show:true,
           text:'使用者趨勢圖',
            textStyle:{
              fontSize:'12px',
              fontWeight:'400',
              color:'#808080'
            }
         },
        xAxis: {
          type: 'category',
          data: this.getDataTime,
        },
        grid: {
          top: '30px',
          left: '30px',
          right: '30px',
          bottom: '30px'
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            symbolSize: 6, //折線點的大小
            data: this.getDataNum,
            type: 'line',
            symbolSize: 6, //折線點的大小
            itemStyle: {
              normal: {
                color: "#1bdaf8", //折線點的顏色
                lineStyle: {
                  color: '#6672FB' //折線顏色
                }
              }
            }
          }
        ]
      }
      myCharts.setOption(option)
    }
  },
  mounted() {
    this.initData()
    queryLine().then((res) => {
      res.jsonData.reportUserList.forEach((item) => {
        this.getDataNum.push(Number(item.ytdUvNew))
        this.getDataTime.push(moment(item.dt).format('YYYY-MM-DD'))
      })
      console.log(this.getDataNum, this.getDataTime, '顯示資料===')
      this.$nextTick(() => { //最重要的就是這點，重新載入，要不然根本就無法渲染資料
        this.initData()
      })
    })
  }
}
</script>

<style>
</style>

同樣，我這邊也需要監聽資料實時渲染，好了，其實沒什麼東西，也不難，喜歡的小夥伴記得來個三連，嘿嘿！