Reason: Vue data can not put functions, will be serialized

Solutions:

SetOptions can only be done manually, which is required after obtaining the instance $curChart.

Refs [‘uni − EC −canvas ‘].refs[‘uni − EC −canvas ‘].refs[‘uni − EC −canvas ‘].curchart.setoption to set the ECHART configuration

this.$nextTick(function(){ console.log(this.$refs['uni-ec-canvas']) console.log(this.$refs['uni-ec-canvas'].$curChart) })},Copy the code

Found this.
r e f s [ ‘ u n i – e c – c a n v a s ‘ ] Exists in this object Refs [‘uni-ec-canvas’] exists in the object CurChart property, but the output is undefined

      this.$nextTick(function(){
        console.log(this.$refs['uni-ec-canvas'])
        setTimeout(()=>{
          console.log(this.$refs['uni-ec-canvas'].$curChart)
        }, 2000)
      })
    },
Copy the code

After adding a delay, it was found that it could be retrieved

SetOption is undefined again

      this.$nextTick(function(){
        console.log(this.$refs['uni-ec-canvas'])
        console.log(this.$refs['uni-ec-canvas'].$curChart)
        setTimeout(()=>{
          console.log(this.$refs['uni-ec-canvas'].$curChart)
          console.log(this.$refs['uni-ec-canvas'].$curChart.setOption)
          // this.$refs['uni-ec-canvas'].$curChart.setOption(this.getOption())
        }, 2000)
      })
    },
Copy the code

This method won’t work…

This.$refs[‘uni-ec-canvas’] contains an ec attribute and init

        this.initChart()
       
    },
    methods: {
      initChart() {
        this.$refs['uni-ec-canvas'].ec.option = this.getOption()
        this.$refs['uni-ec-canvas'].init()
      }
}
Copy the code

Ojbk… A success

Custom formatter takes effect