随着对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"
}
]
}
}
如果有需要的同学可以一起探讨下。