extjs-扩展:百度echarts引入

本节介绍如何将百度的echarts引入extjs项目，echarts官网

先上个图，看一下效果

图片描述

思路

echarts正常情况下是以一个div作为渲染容器的，而且这个div必须指定高度初始化。在extjs里，适合干这件事的组件，就是panel面板了。可以在面板boxready事件中将echarts渲染到对应dom节点。

封装一个echart扩展:app/luter/ux/EchartsPanel.js

Ext.define(luter.ux.EchartsPanel, {
    extend: Ext.panel.Panel,
    alias: widget.echartspanel,
    liquidLayout: true,
    cls: chart-body,
    initComponent: function () {
        var me = this;
        if (!me.height) {
            showFailMesg({
                msg: 请正确配置图表参数:height
            })
        }
        if (!me.option) {
            showFailMesg({
                msg: 请正确配置图表参数:option
            })
        }
        me.on("boxready", function () {//boxready后，获取到panel的dom元素，把echarts渲染上去。
            me.echarts = echarts.init(me.getEl().dom);
            if (me.option) {
                me.echarts.setOption(me.option);
            }
        });
        me.callParent();
        //同时绑定panel的resize事件，对charts图进行大小适配
        me.on("resize", function (ta, width, height, ow, oh, e) {
            me.echarts.resize(ow - 10, oh - 5);
        });
    }
});

例子:

最后，记得在app.html里面引入echarts的js文件，如下:

<script src=";></script>

以下无正文

本节介绍如何将百度的echarts引入extjs项目，echarts官网 先上个图，看一下效果 图片描述 思路 echarts正常情况下是以一个div作为渲染容器的，而且这个div必须指定高度初始化。在extjs里，适合干这件事的组件，就是panel面板了。可以在面板boxready事件中将echarts渲染到对应dom节点。 封装一个echart扩展:app/luter/ux/EchartsPanel.js Ext.define(luter.ux.EchartsPanel, { extend: Ext.panel.Panel, alias: widget.echartspanel, liquidLayout: true, cls: chart-body, initComponent: function () { var me = this; if (!me.height) { showFailMesg({ msg: 请正确配置图表参数:height }) } if (!me.option) { showFailMesg({ msg: 请正确配置图表参数:option }) } me.on("boxready", function () {//boxready后，获取到panel的dom元素，把echarts渲染上去。 me.echarts = echarts.init(me.getEl().dom); if (me.option) { me.echarts.setOption(me.option); } }); me.callParent(); //同时绑定panel的resize事件，对charts图进行大小适配 me.on("resize", function (ta, width, height, ow, oh, e) { me.echarts.resize(ow - 10, oh - 5); }); } }); 例子: 最后，记得在app.html里面引入echarts的js文件，如下: