Extjs4 封装echarts组件 2016.8.31

原创 2016年08月31日 16:47:01

Extjs4自带的图形报表不够强大,所以有了封装echarts的想法。
举个栗子:
http://blog.csdn.net/zdb330906531/article/category/1105002
这里写图片描述
http://blog.csdn.net/zdb330906531/article/category/1105002
新建脚本文件Echarts.js,复制粘贴一下代码:

Ext.define('Ext.ux.Echarts', {
    alias: 'widget.echarts',
    extend: 'Ext.panel.Panel',
    alternateClassName: 'Ext.form.Echarts',
    text: '',
    subtext: '',
    option: null,
    initComponent : function(){
        var me = this;
        me.addEvents('resize');
        me.callParent(arguments);
        me.on({
            resize: me.onResize,
            scope: me
        });
    },
    finishRenderChildren: function () {
        this.callParent();
    },
    onRender: function() {
        var me = this;
        me.inputEl = document.createElement('div');
        document.body.appendChild(me.inputEl);
        me.echarts = echarts.init(me.inputEl);
        if (me.option) {
            me.echarts.setOption(me.option);
        }
        me.echartsInnerId=Ext.id();
        me.inputEl.id=me.echartsInnerId;
        me.inputEl.style.height="100%";
        me.inputEl.style.width="100%";
        me.contentEl=me.echartsInnerId;
        me.callParent(arguments);
        me.rendered = true;
    },
    onResize: function(o, width, height) {
        var me = this;
        if (me.echarts) {
            me.inputEl.style.height = width;
            me.inputEl.style.width = height;
            me.echarts.resize();
        }
    },
    onDestroy: function(){
        var me = this;
        if(me.rendered){
            try {
                Ext.EventManager.removeAll(me.echarts);
                for (prop in me.echarts) {
                    if (me.echarts.hasOwnProperty(prop)) {
                        delete me.echarts[prop];
                    }
                }
            }catch(e){}
        }
        me.callParent();
    },
    setOption: function(option){
        var me = this;
        me.echarts.setOption(option);
        me.echarts.resize();
    },
    getOption: function(){
        var me = this;
        return me.echarts.getOption();
    },
    resize: function(){
        var me = this;
        me.echarts.resize();
    }
});

把Echarts.js文件放到extjs的组件文件夹下面,比如ux文件夹
然后设置好Ext.ux对应的目录,比如:

Ext.Loader.setPath('Ext.ux', '/extjs/ux');

注意:使用组件时,必须引入echarts脚本

<script type="text/javascript" src="/js/echarts.min.js"></script>

创建并使用组件

var chart = Ext.create('Ext.ux.Echarts');
chart.setOption({ 参数 });
参照实例:http://echarts.baidu.com/examples.html
版权声明:本文为博主原创文章,未经博主允许不得转载。

【ExtjsV6.0初级】Extjs引入Echarts方法(Extjs整合Echarts)

背景:Extjs的框架很强大,Echarts的图标功能很强大,开发时候想在Extjs中引入Echarts,使用它的图标功能。 说明:Extjs版本为ext-6.0.1,使用的是GPL开源版本;Echa...
  • zhengwangzw
  • zhengwangzw
  • 2016年08月31日 15:58
  • 4081

java后台封装echarts

前些日子用到了Echarts,觉得比之前用的funshioncharts好用太多!可是拼装数据到前台显示的时候,有点费时费力,于是对Echarts在后台做了封装。具体做法了抽象出众图类、零件之上用零件...
  • qq_33556185
  • qq_33556185
  • 2016年01月30日 19:43
  • 7842

前端框架Vue(5)——Vue+Echarts

Echarts 是数据可视化中佼佼者!推荐大家可以玩一玩,非常实用!  如果第一次接触Echarts的同学,这边有我以前写过的一篇入门:浅谈Echarts3.0 Vue+Echarts  现附上代码:...
  • DOCALLEN
  • DOCALLEN
  • 2017年04月05日 19:55
  • 10068

ExtJS4组件_Grid配置-属性-方法详解-案例

1、Ext.grid.GridPanel 主要配置项: store:表格的数据集 columns:表格列模式的配置数组,可自动创建ColumnModel列模式 autoExpandColumn...
  • middlekingt
  • middlekingt
  • 2012年12月10日 10:07
  • 4456

Extjs4中up()和down()的用法以及组件查找_ComponentQuery类

Extjs4中up()和down()的用法 Extjs4.x中,新增加了两个方法up()和down()方法。这两个方法都是用来获取组件的,下面我们来看下官方解释。 up( Stri...
  • ilhxasll
  • ilhxasll
  • 2015年08月26日 10:06
  • 249

ExtJS4组件_form表单配置-属性-方法详解

1、Ext.form.Action   配置项:         success:执行成功后回调的函数,包括两个参数:form和action          failure:执行失败后回调...
  • u013076044
  • u013076044
  • 2015年09月13日 14:45
  • 3432

EXTJS4自学手册——EXT组件布局

一、Dock  说明:在组件的上下左右添加其他组件 通过dock属性设置添加的组件在原组件的位置 例子: script type="text/javascript"> ...
  • wh591344741
  • wh591344741
  • 2013年04月20日 11:28
  • 357

Extjs4 日期+时分秒组件datetimefield

截止目前最新的Ext-4.2.1.883版本,分别提供日期组件(xtype:'datefield')和时间组件(xtype:'timefield'),却没有提供日期+时分秒组件。 搜索到的牛人扩...
  • fengoh
  • fengoh
  • 2014年07月29日 09:44
  • 2267

ExtJs4入门之九: 补充Grid组件杂项

一:编辑事件 C层: //5.edit事件 /* "usergrid":{ edit:function(editor , e , options){...
  • ruantao1989
  • ruantao1989
  • 2013年06月05日 09:47
  • 884

G4Studio平台下基于ExtJS的下拉复选组件实现案例

描述 实现一个下拉复选功能的组件。本例采用Combox组件和Tree组件结合实现。 实现代码 var zcxdRoot = new Ext.tree.AsyncTreeNo...
  • xiongchuntian
  • xiongchuntian
  • 2013年06月22日 01:54
  • 1102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Extjs4 封装echarts组件 2016.8.31
举报原因:
原因补充:

(最多只允许输入30个字)