Echart在vue3.0中 resize的坑

Echart在vue3.0中 resize的坑

import { defineComponent, h } from 'vue'
const CHART_INSTANCES = new WeakMap<Object, ECharts | null>()

const HChart = defineComponent({
   methods: {
	  initChart (el: HTMLDivElement): Promise<ECharts> {
	    const renderer = this.renderer || 'canvas'
	    return new Promise((resolve) => {
	      this.$nextTick(() => {
	        const currentTheme = this.theme || defaultTheme
	        // 设置主题
	        echarts.registerTheme(currentTheme.name, currentTheme.value)
	        // 好坑啊 CHART_INSTANCE 不能做代理proxy 也就是说 echart 实例不能放在 data 里面 不然 resize 会报错。。。。。
	        CHART_INSTANCES.set(this, echarts.init(el, currentTheme.name, {
	          renderer,
	          width: 'auto',
	          height: 'auto'
	        }))
	        resolve(CHART_INSTANCES.get(this)!)
	      })
	    })
  },
  // .....
},
  render () {
    const { style } = this
    const initStyle = Object.assign({}, defaultStyle, style || {})

    return h('div', {
      style: initStyle
    })
  }
})

export default HChart

• 在vue3.0把 echarts实例 赋值的变量放在data做了proxy代理，resize的时候报不知名的错误（有哪位大佬知道原因了告诉下小弟）
• 因为想把echarts封装成组件，刚好看到vue3.0原理里面使用 WeakMap 做代码的映射，这样就保证每个echarts 实例都是唯一的，并且还容易取值，销毁等操作。

详细代码