本节介绍如何将百度的echarts引入extjs项目,echarts官网
先上个图,看一下效果
图片描述
思路
echarts正常情况下是以一个div作为渲染容器的,而且这个div必须指定高度初始化。在extjs里,适合干这件事的组件,就是panel面板了。可以在面板boxready事件中将echarts渲染到对应dom节点。
封装一个echart扩展:app/luter/ux/EchartsPanel.js
Ext.define('luter.ux.EchartsPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.echartspanel',
liquidLayout: true,
cls: 'chart-body',
initComponent: function () {
var me = this;
if (!me.height) {
showFailMesg({
msg: '请正确配置图表参数:height'
})
}
if (!me.option) {
showFailMesg({
msg: '请正确配置图表参数: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(ow - 10, oh - 5);
});
}
});
例子:
{
xtype: 'echartspanel',
height: 300,//初始化高度
option: {//charts的配置,来自百度echarts官网例子,具体参考百度官方的说明,
title: {
x: 'right',
text: '用户来源类型',
subtext: '纯属虚构'
},
tooltip: {
trigger: 'item',
formatter: "{a}
{b}: {c} ({d}%)"
},
legend: {
orient: 'vertical',
x: 'left',
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
}
}```
最后,记得在app.html里面引入echarts的js文件,如下:
以下无正文