ext中引用ux_extjs-扩展:百度echarts引入

本节介绍如何将百度的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文件，如下:

以下无正文