如何在 amCharts 中为多个数据系列设置独立颜色

在 amcharts 5 中，若多个 `smoothedxlineseries` 共享同一份配置对象（尤其是包含相同 `name` 字段），会导致颜色等属性被意外同步；正确做法是为每个系列创建独立的配置对象，并确保 `name` 唯一。

在使用 amCharts 5 绘制多条折线时，一个常见误区是复用同一个配置对象（如 settings）来初始化多个系列。正如问题中所示，即使你为每个系列显式调用了 series.set("stroke", color)，颜色仍可能“联动”变化——根本原因在于：amCharts 将 name 字段作为系列唯一标识符。当多个系列使用相同的 name（例如都来自同一个 settings 对象），它们在内部被视为同一逻辑系列，后续对任一实例的 stroke 设置都会覆盖全局状态。

✅ 正确实现方式是：为每个系列动态生成独立的配置对象，并确保 name 唯一。以下是优化后的代码示例：

const createSeries = (data, color, name) => {
  // ✅ 每次调用都新建 settings，且 name 动态传入（不可复用！）
  const settings = {
    name: name, // 关键：必须唯一，如 "Sales Q1", "Sales Q2"
    xAxis: xAxis,
    yAxis: yAxis,
    valueYField: "value",
    valueXField: "date",
  };

  const series = am5xy.SmoothedXLineSeries.new(root, settings);
  series.set("stroke", color);
  series.set("fill", am5.color(color)); // 可选：启用面积填充时需设置 fill
  series.set("fillOpacity", 0.1);

  // 配置数据点气泡
  series.bullets.push(() => am5.Bullet.new(root, {
    locationY: 0,
    sprite: am5.Circle.new(root, {
      radius: 4,
      stroke: color,
      strokeWidth: 2,
      fill: am5.Color.brighten(color, -0.3),
    })
  }));

  series.data.setAll(data);
  chart.series.push(series);
};

// 使用示例：不同系列，不同颜色，不同 name
createSeries(dataQ1, am5.color(0x37a2da), "Revenue Q1");
createSeries(dataQ2, am5.color(0xff675b), "Revenue Q2");
createSeries(dataQ3, am5.color(0x67e0e3), "Revenue Q3");

⚠️ 注意事项：

• name 是强制唯一标识：它不仅用于图例显示，更影响内部系列映射；重复 name 将导致样式、交互、动画行为异常；
• 避免闭包或全局 settings 复用：切勿将 settings 定义在函数外部并多次传入；
• 颜色推荐使用 am5.color()：确保类型安全，兼容主题与明暗计算（如 am5.Color.brighten()）；
• 如需统一管理配色，可结合数组或 Map 构建颜色映射表，提升可维护性。

总结：amCharts 5 的系列隔离依赖于配置对象的独立性与 name 的唯一性。只要保证每次 new Series() 时传入的是全新、命名唯一的配置对象，即可彻底解决多系列颜色冲突问题，并为后续添加图例交互、导出、响应式控制打下坚实基础。