望云海

经验是生活的肥料

Extjs4 封装echarts组件 2016.8.31

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
阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zdb330906531/article/details/52386609
文章标签: extjs4
个人分类: Extjs
所属专栏: Extjs4 开发经验
上一篇sails-mysql 使用 groupBy 进行分组遇到的坑
下一篇Ext.ux.form.SearchField 添加placeholder属性 2016年9月19日
想对作者说点什么? 我来说一句

Extjs4.2整合Echarts组件

2016年02月20日 650B 下载

没有更多推荐了,返回首页

关闭
关闭