EXTJS系列笔记(6.X)————集成echarts

随着对extjs的开发使用，发现它自带的图表系统并不十分友好，所以打算集成 百度的echarts系统来做我们自己系统的图形报表。

开发过程中遇到了不少问题，这里记录一下。

首先引入echarts的js文件（不做介绍了）

定义echart组件,我这里使用的是散点图（其他图也是一样），代码如下

Ext.define('PAS.util.echart.ScatterEchart', {
    extend: 'Ext.Container',
    alias: 'widget.echartsscatterpanel',
    liquidLayout: true,
    cls: 'chart-body',
    initComponent: function () {
        var me = this;
        if (!me.height) {
            showFailMesg({
                msg: '请正确配置图表参数:height'
            })
        };
        if (!me.option) {
            showFailMesg({
                msg: '请正确配置图表参数:option'
            })
        };
        me.on("render", function () {//render后，获取到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(ow - 10, oh - 5);
        });
    }
});

具体应用代码：

首先引入

requires : [
        'PAS.util.echart.ScatterEchart'
 ]

然后使用的代码：

{
	xtype : "echartsscatterpanel",						
	height:500,
	option : {
		
		xAxis : [
			{
				type : 'category',
				name:'站点\nRecipe',
				data : []
			}
		],
		yAxis : [
			{
				type : 'category',
				name:'Eqp ID',
				data : []
			}
		],
		series : [
			 {
				 itemStyle:{ 
						normal: {
							color:['black']
						}
				 },
				 type:"scatter"
			 }
		]
	}
}

如果有需要的同学可以一起探讨下。