ECharts require.config 動態加載機制詳解與最佳實踐

核心概念

require.config 是 RequireJS（AMD 模塊加載器）的配置接口。ECharts 官方構建採用 AMD 規範，配置 require.config 後，即可通過 require([...], callback) 按需動態加載 ECharts 模塊，而非一次性載入整個 echarts-all.js，從而減少首屏加載體積，提升性能。

配置示例

require.config({
  paths: {
    echarts: '/path/to/echarts/dist'
  }
});
// 按需加載
require(['echarts', 'echarts/chart/bar', 'echarts/chart/line'], function(ec) {
  var chart = ec.init(document.getElementById('main'));
  chart.setOption({...});
});

關鍵點

• paths 指定 ECharts 構建文件的基礎路徑。
• 按需引入圖表類型（chart/bar、chart/line 等），避免打包無用代碼。
• 生產環境建議使用構建工具（Webpack、Rollup）預打包，而非運行時動態加載。

簡化方案

若不需極致優化，直接引入 echarts.min.js 或 echarts-all.min.js 即可，無需配置 RequireJS。官方文檔亦推薦：「對，只引入 echarts.js 或 echarts-all.js 就可以了」。