Extjs4 封装echarts组件 2016.8.31

来源：互联网发布：软件测试简历项目经验编辑：程序博客网时间：2024/05/22 01:43

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

0 0