本文详解 AmCharts 5 中创建多个图表的正确方法：必须为每个图表分配唯一 DOM ID 并分别调用 am5.Root.new(id)，同时确保 am5.ready() 包裹每次初始化，避免根实例冲突与异步渲染问题。

本文详解 amcharts 5 中创建多个图表的正确方法：必须为每个图表分配唯一 dom id 并分别调用 `am5.root.new(id)`，同时确保 `am5.ready()` 包裹每次初始化，避免根实例冲突与异步渲染问题。

在 AmCharts 5 中，每个图表都依赖一个独立的 Root 实例，而该实例必须绑定到页面中唯一且已存在的 DOM 元素（如

）。常见错误是复用同一 id、未等待 DOM 就绪即初始化，或误以为只需修改函数参数就能自动适配多个容器——实际上，am5.Root.new(id) 每次都会创建全新根环境，但前提是 id 对应的元素存在且未被其他 Root 占用。

✅ 正确做法是：

• 为每个图表准备语义清晰、互不重复的 ID（如 chartdiv, chartdiv2, sales-chart）；
• 每个图表初始化必须包裹在独立的 am5.ready() 回调中（或共用一个 am5.ready() 内顺序调用），确保 DOM 已加载完成；
• 数据中的 value 字段必须为数字类型（如 8），不可传字符串（如 "{{ vit }}"），否则会导致系列渲染失败或静默报错。

以下是一个完整、可运行的双饼图示例：

root