关闭

Extjs4 封装echarts组件 2016.8.31

标签: extjs4
1313人阅读 评论(5) 收藏 举报
分类:

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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:214891次
    • 积分:2987
    • 等级:
    • 排名:第12528名
    • 原创:70篇
    • 转载:3篇
    • 译文:2篇
    • 评论:47条
    博客专栏
    文章分类