原因:vue的data里不能放函数,会被序列化
解决方法:
只能手动setOptions,需要通过获取实例$curChart后。
通过this.$refs['uni-ec-canvas'].$curChart.setOption来设置echart配置
mounted() {
this.$nextTick(function(){
console.log(this.$refs['uni-ec-canvas'])
console.log(this.$refs['uni-ec-canvas'].$curChart)
})
},
发现 this.$refs['uni-ec-canvas']这个对象中存在$curChart这个属性,但是输出确是undefined
mounted() {
this.$nextTick(function(){
console.log(this.$refs['uni-ec-canvas'])
setTimeout(()=>{
console.log(this.$refs['uni-ec-canvas'].$curChart)
}, 2000)
})
},
加了个延迟后,发现可以获取到
发现setOption又是undefined
mounted() {
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)
})
},
此法行不通。。。
通过观察发现,this.$refs['uni-ec-canvas']中存在ec属性和init,尝试通过以下的方式
mounted() {
this.initChart()
},
methods: {
initChart() {
this.$refs['uni-ec-canvas'].ec.option = this.getOption()
this.$refs['uni-ec-canvas'].init()
}
}
ojbk。。。成功了
自定义 的formatter生效