【ExtjsV6.0初級】Extjs引入Echarts方法（Extjs整合Echarts）

背景：Extjs的框架很強大，Echarts的圖標功能很強大，開發時候想在Extjs中引入Echarts，使用它的圖表功能。

說明：Extjs版本爲ext-6.0.1，使用的是GPL開源版本；Echarts是3.2.3版本，例子就拿Echarts官網的柱狀圖演示效果（圖1.1），代碼和圖像都在官網

開幹：

1.  index.html文件中引入Echarts

<script type="text/javascript" src="js/echarts-min.js"></script>

  “js/echarts-min.js”替換成自己的echart文件路徑

2.  新建一個Panel（其他控件都OK），名字叫做EchartsPanel，名字可以根據自己項目需要取，代碼如下：

//創建一個名字叫做EchartsPanel的Panel，繼承Ext原生Panel

Ext.define('Test.view.main.EchartsPanel', {
    extend: 'Ext.Container',
    xtype:'</span><span style="color:#ff0000;">echartspanel</span><span style="color:#333333;">', //xtype定義好
    height: 380,  

    bodyPadding: 15,
    border: false,

    style:{
        width: '95%',
        marginBottom: '10px'
    },

//config中配置option，option代碼來源於echarts官網
    config: {

        option: {
            title: {
                text: 'ECharts 入門示例'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        }
    },

    initComponent: function(){
        var me = this;
        if(!me.height){
            throw new Error("圖表組件要高度");
        }
        me.on("boxready", function () {
            me.echarts = echarts.init(me.getEl().dom);
            if (me.option) {
                me.echarts.setOption(me.option);
            }
        });
        me.callParent();
    }
});

3. 在需要的地方引入創建的ExtjsPanel,例如，我這裏是有一個Container，我在Container中放入ExtjsPanel，代碼如下：

Ext.define('Test.view.main.Home', {
    extend: 'Ext.Container',
    xtype: 'home',
    items: [
        {
            xtype:'</span><span style="color:#ff0000;">echartspanel</span><span style="color:#333333;">'
        }
    ]
});</span>

效果如下圖：

大功告成！

附：另外一種引入Echarts圖表的方式：直接通過html+option方式（有影響Extjs佈局的風險），Sample如下：

1.我現在有一個Panel，我需要在Panel局部或整個頁面放置Echarts控件，代碼如下：

Ext.define('Test.view.main.Home', {
    extend: 'Ext.Container',
    xtype: 'home',
    items: [
        {
            html:'<div id="first01chart" style="width: 600px;height:400px"></div>',

            afterRender: function(){
                console.log("[afterrender] start:");
                var overTimeChart = echarts.init(document
                    .getElementById("first01chart"));
                // 指定圖表的配置項和數據
                var option = {
                    title: {
                        text: 'ECharts 入門示例'
                    },
                    tooltip: {},
                    legend: {
                        data:['銷量']
                    },
                    xAxis: {
                        data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
                    },
                    yAxis: {},
                    series: [{
                        name: '銷量',
                        type: 'bar',
                        data: [5, 20, 36, 10, 10, 20]
                    }]
                };
                // 使用剛指定的配置項和數據顯示圖表。
                overTimeChart.setOption(option);
                console.log("[afterrender] end");

            }
        }
    ]
});

2.這種方式更接近Echarts官方的方式，但是引入了新的div，經測試，如果用到Panel 的 split等屬性會對Extjs佈局有影響，應該是css選擇器的造成的。

Mark:機哥的Extjs學習之路開始啦！歡迎同樣是做Extjs開發的加我QQ 493967121學習交流