ExtJS 集成 ECharts 完整實現步驟

核心思路

ExtJS 組件渲染後獲取其 DOM 容器，作為 ECharts 初始化的 `dom` 參數。關鍵點：容器必須已佈局完成、有具體寬高。

完整示例代碼

Ext.define('MyApp.view.ChartPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.chartpanel',
    title: 'ECharts in ExtJS',
    layout: 'fit', // 關鍵：讓內部容器撐滿面板
    items: [{
        xtype: 'component',
        itemId: 'chartContainer',
        autoEl: { tag: 'div' }, // 生成一個 div 作為 ECharts 掛載點
        // 也可用 html: '<div id="chart"></div>' 但需手動管理 ID
    }],
    listeners: {
        afterrender: function(panel) {
            // 1. 獲取容器 DOM
            var container = panel.down('#chartContainer').getEl().dom;
            // 2. 初始化 ECharts
            var chart = echarts.init(container);
            // 3. 配置選項
            var option = {
                title: { text: 'ExtJS + ECharts Demo' },
                tooltip: {},
                xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] },
                yAxis: {},
                series: [{ name: 'Score', type: 'bar', data: [120, 200, 150, 80, 70, 110, 130] }]
            };
            chart.setOption(option);
            // 4. 面板 resize 時重繪圖表
            panel.on('resize', function() {
                chart.resize();
            });
            // 5. 面板銷毀時釋放
            panel.on('destroy', function() {
                chart.dispose();
            });
        }
    }
});

關鍵注意點

1. 容器尺寸：父面板用 `layout: 'fit'`，確保子容器有寬高；若用 `border` 佈局，需指定 `width`/`height` 或 `flex`。
2. 防止重複初始化：`afterrender` 只觸發一次，安全。若在 `boxready` 或 `resize` 中初始化，需加標記防止多次創建。
3. 引入順序：先載入 ExtJS，再載入 ECharts（`echarts.min.js`），確保 `echarts` 全局可用。
4. 主題適配：ExtJS 主題變更時可 `chart.dispose()` 重建，或用 `chart.setOption({ backgroundColor: ... })` 動態調整。

常見坑

• 容器 `display: none` 時初始化 → 圖表寬高為 0。解決：在 `show` 事件中初始化或 `chart.resize()`。
• Tab 面板中非活動標籤初始化 → 同理，需在 `activate` 事件處理。
• 內存洩漏：組件銷毀時必須 `chart.dispose()`，否則 ECharts 內部定時器、事件監聽不會釋放。

總結

ExtJS + ECharts 核心是「Ext 負責佈局生命週期，ECharts 負責渲染」。在 `afterrender` 獲取 DOM、初始化、綁定 `resize`/`destroy` 事件即可穩健集成。