extjs引入echart问题

[几禾泡泡]

Ext.define('App.view.echart.EchartsPanel', {
extend: "Ext.panel.Panel",
//alias: "widget.echartscmp",
xtype:'</span><span style="color:#ff0000;">echartspanel</span><span style="color:#333333;">', //xtype定义好
//requires: ['App.view.echarts.EchartView'],
border: false,
style:{
width: '95%',
marginBottom: '10px'
},
initComponent: function(){
var me = this;
config: {
option{

title : {
text: '区域人口构成',
//subtext: '来源于IIS日志',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['国外','北京','河北','山东','河南','黑龙江','其他','本地居住人','本地工作人','规律出行人','自由职业人','经常到访人']
},
series : [
{
name: '人口占比',
type: 'pie',
radius : '25%',
center: ['40%',220],
data:[
{name: '国外',value: 860},
{name: '北京',value: 604833},
{name: '河北',value: 19678},
{name: '山东',value: 12240},
{name: '河南',value: 2400},
{name: '黑龙江',value: 1430},
{name: '其他',value: 2800}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
{
name:'人口占比',
type:'pie',
radius : '25%',
center: ['40%', 600],
data:[
{name: '本地居住人',value: 860},
{name: '本地工作人',value: 604833},
{name: '规律出行人',value: 19678},
{name: '自由职业人',value: 12240},
{name: '经常到访人',value: 2400},
]
}
]
}
},

if(!me.height){
throw new Error("图表组件要高度");
}
me.on("boxready", function () {
me.echarts = echarts.init(me.getElementById().dom);
if (me.option) {
me.echarts.setOption(me.option);
}
});
me.callParent();
}
});

调用的时候总是不能显示界面，刚刚接触，也不知道问题到底出在哪里了