摘要:本节介绍如何将百度的引入项目,官网先上个图,看一下效果图片描述思路正常情况下是以一个作为渲染容器的,而且这个必须指定高度初始化。
先上个图,看一下效果</>复制代码
本节介绍如何将百度的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文件,如下: