先上代码,这是封装的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之后就不会出现此问题了,-_-||