EXT中使用echarts时的问题

先上代码，这是封装的echarts

Ext.define('app.ux.EchartsPanel', {
  //   extend: 'Ext.panel.Panel',
  extend: 'Ext.Container',
  alias: 'widget.echartspanel',
  //   layout: 'border',
  //   resizable: true,
  width: 300,
  margin: 10,
  //   liquidLayout: true,
  //   cls: 'chart-body',
  initComponent: function () {
    var me = this

    if (this.panel) {
      return
    }
    if (!me.height) {
      console.log('请正确配置图表参数:height')
    }
    if (!me.option) {
      console.log('请正确配置图表参数:option')
    }
    me.on('boxready', function () {
      //boxready后，获取到panel的dom元素，把echarts渲染上去。
      me.echarts = echarts.init(me.getEl().dom)
      if (me.option) {
        me.echarts.setOption(me.option)
      }
    })
    me.callParent()
    //同时绑定panel的resize事件，对charts图进行大小适配
    me.on('resize', function (ta, width, height, ow, oh, e) {
      me.echarts.resize()
    })
  },
})

当我选用panel作为容器时，会报错
这个错误并不是渲染的时候出现，而是在包含echarts图表的不同tab页的切换时，并且经过一定时间后切换才会出现（# 调试的时候，bug浮现也是一项技术活… #）

当把容器换成container之后就不会出现此问题了，-_-||