amCharts 是什么?它能做哪些图表、和 ECharts/Chart.js 有什么区别
amCharts 是一套用于 Web 的 JavaScript 数据可视化库，主要用来在网页里画折线图、柱状图、饼图、股票图、甘特图和地理地图。如果你的需求是常规业务图表，ECharts 或 Chart.js 通常更省事；如果你要做金融行情图、带地图的可视化，或者需要一套 API 风格统一的商业图表方案，amCharts 值得单独评估。它的关键限制在于授权：免费版要求保留署名，商业项目需要确认是否购买许可。
amCharts 的定位与产品线
amCharts 不是单一图表组件，而是一组产品：
| 产品 | 用途 |
|---|---|
| amCharts 5 | 当前主版本，用 TypeScript 重写，涵盖各类统计图表 |
| 地图（Map） | 地理数据可视化，如国家/地区着色、气泡地图 |
| 股票图（Stock） | K 线、成交量、时间轴缩放等金融图表 |
| 甘特图（Gantt） | 项目排期、任务时间线 |
需要区分版本：amCharts 3 和 4 是早期版本，API 与 5 差异较大。网上大量教程仍是 3/4 的写法，直接套用到 5 上会报错。新项目应从 5 开始，查文档时注意版本号。
怎么跑出第一个图表
基本流程是三步：引入脚本、准备一个带明确宽高的容器、用配置对象声明图表。
<div id="chartdiv" style="width: 100%; height: 400px;"></div>
<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script>
let chart = am5.Root.new("chartdiv");
let series = chart.series.push(am5xy.LineSeries.new(chart, {
xAxis: xAxis,
yAxis: yAxis,
valueYField: "value",
valueXField: "date"
}));
series.data.setAll([
{ date: "2026-01-01", value: 12 },
{ date: "2026-01-02", value: 18 }
]);
</script>
预期结果是容器内出现一条折线。注意 amCharts 5 按模块拆分，画折线图要额外引入 xy.js，只引 index.js 不够——这是新手最常见的报错来源。
和 ECharts、Chart.js、Highcharts 怎么选
用同一组维度比较：
| 维度 | amCharts | ECharts | Chart.js | Highcharts |
|---|---|---|---|---|
| 常规图表 | 支持 | 支持，中文文档完善 | 支持，轻量 | 支持 |
| 地图 | 内置产品线 | 需额外地图数据 | 不擅长 | 有地图模块 |
| 股票/金融图 | 有专门 Stock | 可做但需自行搭建 | 不支持 | 有专门模块 |
| 授权 | 免费版需署名，商业需授权 | 开源 | 开源 | 商业授权 |
| 上手成本 | 中等，配置对象较深 | 中等 | 低 | 中等 |
选择条件可以这样判断：
- 只画折线、柱状、饼图，且在意体积和上手速度：Chart.js。
- 中文项目、需要丰富图表类型和社区示例：ECharts。
- 需要地图、股票图，或团队已接受商业授权：amCharts 或 Highcharts。
- 预算敏感又要开源：优先 ECharts、Chart.js。
常见坑与排查
图表不显示时，按顺序检查：
- 容器没有宽高。amCharts 依赖容器的实际尺寸，
height: 0或未设置高度会导致空白。 - 脚本未加载或模块缺失。amCharts 5 按图表类型分模块，缺哪个类型就报哪个错。
- 数据字段名不匹配。配置里的
valueYField必须和数据结构里的键名一致。 - 版本混用。把 3/4 的示例贴进 5 的项目里，API 完全不同。
- 商业项目忽略署名。免费版要求在图表上保留 amCharts 标识，去掉前先确认授权状态。
如果项目会长期使用并去掉署名，应在立项阶段就把授权成本算进去，而不是上线后再补。