Extjs4 封装echarts组件 2016.8.31

最新推荐文章于 2019-04-30 15:59:39 发布

重庆-传说

最新推荐文章于 2019-04-30 15:59:39 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： Extjs Extjs4 开发经验文章标签： extjs4

原创不易，白嫖不好，如果有用，请点赞，让更多的朋友看到这篇文章。

本文链接：https://blog.youkuaiyun.com/zdb330906531/article/details/52386609

Extjs 同时被 2 个专栏收录

31 篇文章

订阅专栏

Extjs4 开发经验

18 篇文章

订阅专栏

本文档介绍如何在ExtJS4中封装ECharts图表组件，由于ExtJS4自带的图形报表功能有限，作者提供了详细的步骤和代码示例，包括新建Echarts.js文件，将其放入ExtJS的ux文件夹，并设置Ext.ux的路径，以及使用组件时引入echarts脚本的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Extjs4自带的图形报表不够强大，所以有了封装echarts的想法。
举个栗子：
http://blog.youkuaiyun.com/zdb330906531/article/category/1105002
这里写图片描述
 http://blog.youkuaiyun.com/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