如何通过 CDN 快速集成 amCharts 商业图表库？

amCharts 是一个功能强大的商业级 JavaScript 图表库，从 5.0 版本开始采用模块化架构。官方提供 CDN 地址，开发者不需要下载整个包，只需按需加载核心脚本和对应图表模块。与旧版 4.x 相比，amCharts 5 的体积更可控，也方便在页面中做代码分割。接下来重点说明如何在项目里正确接入。

一、CDN 模块化加载与基础模板

amCharts 5 的 CDN 资源并不是一个合并好的大文件，而是由核心库和独立模块组成。核心脚本是 index.js，它负责图表生命周期、事件系统和基础渲染能力。直角坐标系图表需要额外加载 xy.js，饼图需要 pie.js，地图需要 map.js。主题文件位于 themes/Animated.js 等路径下，用来统一配色和动画。使用 CDN 时，三个 <script> 标签的加载顺序不能颠倒：先加载核心库，再加载图表模块，最后加载主题。

下面是一份可以直接运行的基础模板，页面中需要先放置一个 <div> 容器，id 与 JavaScript 中 am5.Root.new 的参数一致。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>amCharts CDN 示例</title>
  <script src="https://cdn.amcharts.com/lib/5/index.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
  <script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
</head>
<body>
  <div id="chartdiv" style="width: 100%; height: 400px;"></div>
  <script>
    am5.ready(function() {
      var root = am5.Root.new("chartdiv");
      root.setThemes([am5themes_Animated.new(root)]);

      var chart = root.container.children.push(am5xy.XYChart.new(root, {
        panX: true,
        panY: true,
        wheelX: "panX",
        wheelY: "zoomX"
      }));

      var xAxis = chart.xAxes.push(am5xy.CategoryAxis.new(root, {
        categoryField: "category",
        renderer: am5xy.AxisRendererX.new(root, {})
      }));

      var yAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
        renderer: am5xy.AxisRendererY.new(root, {})
      }));

      var series = chart.series.push(am5xy.ColumnSeries.new(root, {
        name: "销量",
        xAxis: xAxis,
        yAxis: yAxis,
        valueYField: "value",
        categoryXField: "category"
      }));

      var data = [
        { category: "一月", value: 120 },
        { category: "二月", value: 200 },
        { category: "三月", value: 150 },
        { category: "四月", value: 310 }
      ];

      xAxis.data.setAll(data);
      series.data.setAll(data);
      series.appear(1000);
      chart.appear(1000, 100);
    });
  </script>
</body>
</html>

这份模板展示的是柱状图。核心对象 root 相当于图表容器，所有元素都挂在 root.container.children 下。创建 XYChart 后需要分别声明 X 轴和 Y 轴，再把系列对象 ColumnSeries 与两个轴关联。数据通过 data.setAll 同时写入轴和系列，保证分类轴刻度与柱子数量一致。容器如果没有设置高度，图表可能渲染为 0 高度，因此模板中明确给 <div> 设置了 400px 高度。

二、核心系列类型与数据更新方式

amCharts 5 的系列配置遵循同一套结构，但不同类型图表对字段要求不同。以 XY 图为例，ColumnSeries 使用 valueYField 和 categoryXField 绑定 Y 轴数值和 X 轴分类。折线图改用 LineSeries，面积图使用 AreaSeries，字段名称基本一致。饼图则完全脱离 XY 轴体系，使用 PieSeries 并绑定 valueField 和 categoryField。这种统一设计降低了学习成本，也方便在同一个 root 中组合多种图表。

运行时更新数据不应该重新创建整个 root，否则会丢失交互状态并增加渲染开销。推荐做法是保留图表实例，只更新轴和系列的数据数组。下面的函数接收已创建的对象，并将新数据写入原系列。

function updateChartData(chart, series, xAxis) {
  var newData = [
    { category: "五月", value: 260 },
    { category: "六月", value: 180 },
    { category: "七月", value: 340 }
  ];

  xAxis.data.setAll(newData);
  series.data.setAll(newData);
  series.appear(800);
  chart.appear(800, 100);
}

setAll 会触发自动重绘，不需要手动调用 validate。但如果一次性更新大量点，建议先暂停图表重绘，再恢复，这样可以减少中间帧导致的卡顿。暂停与恢复可以使用 root.container.set("disabled", true) 和 root.container.set("disabled", false)。此外，从远程接口拉取数据时最好先做数据标准化，确保分类字段和值字段名称与图表配置一致，否则图表只会显示空坐标轴而不会报错，排查起来比较耗时。

三、避免内存泄漏与提升渲染性能

CDN 加载方式经常被用在多页应用或单页应用的内容区。单页应用切换路由时，如果只隐藏容器而不销毁图表，会造成事件监听器和定时器堆积。amCharts 5 提供了 root.dispose() 方法，用来释放整个图表树占用的内存。只要在组件卸载或页面离开前调用该方法，就能有效避免内存泄漏。建议把 root 变量保存在组件上下文中，方便集中管理。

function destroyChart(root) {
  if (root) {
    root.dispose();
    root = null;
  }
}

window.addEventListener("beforeunload", function() {
  destroyChart(currentRoot);
});

渲染性能方面，大数据量场景不要一次加载几千个数据点并开启所有动画。可以关闭初始进入动画，或者只对前 50 个点做动画。地图图表尤其占用内存，可以设置 maxDeviation 和简化地理数据。对于折线图或散点图，可以通过 minBulletDistance 控制标记点的显示密度，避免标记重叠。CDN 用户还应注意缓存策略：官方 CDN 使用浏览器缓存，但如果企业内网环境要求静态资源自托管，需要把整个模块目录部署到自己的静态服务器，并保持相对路径结构不变，否则主题和地图数据会加载失败。

四、商业授权如何选择与常见误区

amCharts 的免费许可并不等同于随便商用。官方说明中，免费许可适用于个人学习、非营利组织或开源项目。如果你的产品是闭源商业软件、SaaS 服务、企业内部商业工具，或者客户付费购买的系统，就需要购买商业许可证。商业许可证按开发者人数授权，而不是按域名或服务器数量。购买后可以去除图表上的 amCharts 标志，并获得优先技术支持。免费版在使用时图表左下角会显示一个 amCharts 链接，这是技术要求，不能简单通过 CSS 隐藏。

一个常见误区是认为“只要不修改 amCharts 源码，就可以在商业项目中使用免费版本”。实际上 amCharts 的许可证限制使用场景，而不是限制源码修改。另一个误区是按域名授权，很多团队采购时只买了一个域名授权，但实际是按开发者席位计算，审计时容易被追缴。还有团队会把 amCharts 与 ECharts 做直接对比，认为 ECharts 免费就一定更划算。如果项目已经深度使用 ECharts 且无需地图或甘特图，确实没必要更换。但如果你的业务大量依赖复杂地图、股票图或时间轴甘特图，amCharts 的模块完整度和官方维护能力可以省下不少定制成本。

选型时建议先整理图表类型清单、数据规模、是否涉及离线部署以及团队人数。对于个人开源项目，免费版足够；对于商业产品特别是金融或 BI 行业，购买商业许可比后期法律风险更划算。CDN 集成只是技术层面的事，授权合规才是长期运营需要重视的部分。

CDN加速amCharts图表库商业授权修改时间：2026-10-01 08:28:42