Extjs4整合echarts问题

Ext.define("xxx.xxx.historyData.HistoryDataCharts", {

	extend : "Ext.panel.Panel",

	initComponent : function() {

		var me = this;

		var dataType = 0;

		var title = requestParams.title;

		var queryBegin = null;

		var queryEnd = null;

		// var interval = null;

		var myChart;

		var option;

		var drawChart = function(object) {

			option = {

				title : {

					text : title + "趋势图",

					x : 'center'

				},

				tooltip : {

					formatter : function(params, ticket, callback) {

						var res = '<b>监测时间 :</b>' + params[0][1];

						for (var i = 0, l = params.length; i < l; i++) {

							res += '<br/>' + params[i][0] + ' : '

									+ params[i][2];

						}

						return res;

					},

					trigger : 'axis'

				},

				legend : {

					data : [],

					y : 40

				},

				toolbox : {

					show : true,

					feature : {

						mark : {

							show : true

						},

						dataView : {

							show : true,

							readOnly : false

						},

						magicType : {

							show : true,

							title : {

								line : '折线图',

								bar : '柱形图'

							},

							type : ['line', 'bar']

						},

						restore : {

							show : true

						},

						saveAsImage : {

							show : true

						},

						dataZoom : {

							show : true

						}

					}

				},

				// 是否启用拖拽图表效果

				calculable : false,

				xAxis : [],

				yAxis : [{

							type : 'value',

							splitArea : {

								show : true

							}

						}],

				series : []

			};

			Ext.Ajax.request({

						url : "xxx/xxx/ByCondition",

						method : "POST",

						params : {



							'queryBegin' : queryBegin,

							'queryEnd' : queryEnd,

							'dataType' : dataType,

							'isAsc' : 1

						},

						callback : function(gd, success, resp) {

							try {

								if (success) {

									var rst = Ext.decode(resp.responseText);

									if (rst.success) {

										var data = rst.data;

										var categories = data.categories;

										var arr = data.seriesObj;

										Ext.Array.each(arr, function(v) {

													var name = v["name"];

													var lines = v["data"];

													option.legend.data

															.push(name);

													option.series.push({

																name : name,

																type : 'line',

																smooth : true,

																data : lines

															});

												});

										option.xAxis.push({

													type : 'category',

													splitLine : false,

													axisLabel : {

														interval : 40,

														margin : 2,

														rotate : 30

													},

													data : categories

												});

										myChart.setOption(option);

										return;

									}

								}

								Ext.tools.tips("获取数据失败！");

							} catch (e) {

								Ext.tools.tips("获取数据失败:" + e);

							}

							

						}

					});

		}

		Ext.apply(me, {

					html : ['<div id="main" style="width:' + (appWidth - 20)

							+ 'px;height:' + (appHeight - 80) + 'px;"></div>'],

					loadRtData : function(object) {

						queryBegin = object.queryBegin;

						queryEnd = object.queryEnd;

						dataType = object.dataType;

						drawChart();

					}

				});

		me.on("render", function() {

					require(['echarts', 'echarts/chart/bar',

									'echarts/chart/line'], function(ec) {

								myChart = ec.init(document

										.getElementById('main'));

							});

				});

		me.callParent();

	}

});