JS中动态导入ECharts可按需加载，减少首屏体积；支持精简组件引入、加载状态与错误处理，并需注意框架生命周期及构建工具代码分割。
在 JS 中用动态导入（import()）按需加载 ECharts，核心是避免初始打包时引入整个库，等真正需要渲染图表时再加载。这样能显著减少首屏体积，尤其适合页面中只在部分路由、弹窗或交互后才显示图表的场景。
动态导入 ECharts 的基本写法
直接使用 import() 函数，它返回一个 Promise，解析后得到模块对象：
async function initChart() {
const { default: echarts } = await import('echarts');
const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
title: { text: '动态加载的图表' },
tooltip: {},
xAxis: { data: ['A', 'B', 'C'] },
yAxis: {},
series: [{ type: 'bar', data: [10, 20, 15] }]
});
}
注意：ECharts 的默认导出是构造函数，所以解构时用 default；如果用的是 ECharts 5+，也可直接解构命名导出（如 import('echarts').then(({ init, use }) => {...})）。
配合模块拆分，只加载所需组件
ECharts 支持按需引入内置组件和图表类型，可进一步减小加载体积。例如只用柱状图和提示框：
- 先确保项目已安装
echarts（无需额外插件） - 动态导入时，显式引入精简版或指定组件：
async function initBarChart() {
const echarts = await import('echarts/core');
const { CanvasRenderer } = await import('echarts/renderers');
const { BarChart } = await import('echarts/charts');
const {
TitleComponent,
TooltipComponent,
GridComponent,
DataZoomComponent
} = await import('echarts/components');
<p>echarts.use([
CanvasRenderer,
BarChart,
TitleComponent,
TooltipComponent,
GridComponent,
DataZoomComponent
]);</p><p>const chart = echarts.init(document.getElementById('chart'), null, { renderer: 'canvas' });
chart.setOption({ /<em> 配置同上 </em>/ });
}</p>
这种写法比 import('echarts') 更轻量，适合对包大小敏感的项目。
加个加载状态 & 错误处理更健壮
网络加载有延迟，用户点击“查看图表”后应有反馈，失败时也需兜底：
- 显示 loading 提示（比如禁用按钮、加旋转图标）
- 捕获
import()的 reject，提示用户重试或降级展示空态 - 避免重复触发多次 import（可用 Promise 缓存）
let echartsPromise = null;
<p>function loadEcharts() {
if (!echartsPromise) {
echartsPromise = import('echarts').catch(err => {
console.error('图表库加载失败:', err);
throw err;
});
}
return echartsPromise;
}</p><p>async function renderChart() {
try {
showLoading(true);
const { default: echarts } = await loadEcharts();
const chart = echarts.init(document.getElementById('chart'));
chart.setOption(getOption());
} catch (err) {
alert('图表加载失败，请检查网络或刷新重试');
} finally {
showLoading(false);
}
}</p>
在框架中使用的注意事项
若在 Vue/React 中使用，原理一致，但要注意生命周期和副作用管理：
- Vue：建议在
onMounted或响应式事件（如按钮 click）中调用动态导入 - React：放在
useEffect或事件处理函数里，避免组件卸载后仍操作 DOM（加个isMounted判断或AbortController） - Webpack/Vite：默认支持
import()，会自动代码分割；构建后生成独立的echarts.xxx.jschunk
另外，Vite 项目可配合 defineExpose 或全局注册方式复用初始化逻辑，避免每个组件都写一遍加载逻辑。
