本文详解如何在 amcharts 4 多线图中，使图例（legend）中的方形标记仅显示线条颜色（即纯色边框+透明填充），彻底移除默认黑色填充，实现与折线一致的视觉风格。
在 AmCharts 4 中，默认图例标记（legend marker）常带有不可见但影响样式的填充色（如 #000000），尤其当设置为 square 形状时，若未显式控制 fillOpacity 和 fill，极易出现意外的实心黑块或颜色覆盖问题。要实现「仅显示与折线一致的描边色、内部完全透明」的效果，关键在于分离描边（stroke）与填充（fill）的控制逻辑，并确保填充不参与渲染。
✅ 正确配置图例标记的核心步骤
- 禁用默认填充色：注释或删除 markerColumn.defaultState.properties.fill = am4core.color("#000000") 这一行——这是导致黑色方块的直接原因；
- 显式设填充透明度为 0：fillOpacity: 0 确保内部无任何颜色干扰；
- 保留描边并匹配系列颜色：通过 stroke 和 strokeWidth 控制边框，并建议使用 series.stroke.color 动态继承（而非硬编码）；
- 确保 useDefaultMarker = true 以启用模板定制能力。
以下是精简优化后的关键代码段（已剔除冗余、强化可维护性）：
// 启用图例并使用默认标记模板
chart.legend = new am4charts.Legend();
chart.legend.useDefaultMarker = true;
// 获取图例标记模板中的图形元素（通常是第一个子元素：矩形）
const marker = chart.legend.markers.template;
const markerRect = marker.children.getIndex(0); // 假设为 Rectangle 实例
// 配置默认状态：仅描边，无填充
markerRect.cornerRadius(0);
markerRect.defaultState.properties.strokeWidth = 2;
markerRect.defaultState.properties.strokeOpacity = 1;
markerRect.defaultState.properties.fillOpacity = 0; // ? 关键：彻底隐藏填充
// 可选：动态绑定描边色到对应 series（推荐用于多系列场景）
markerRect.adapter.add("stroke", function(stroke, target) {
const series = target.dataItem?.dataContext;
return series && series.stroke ? series.stroke : am4core.color("#666");
});同时，请确保在 createSeries() 中正确设置 legendSettings.markerFill ——虽然此处我们让填充完全透明，但仍建议将其设为与 stroke 一致，以保持语义一致性：
series.legendSettings.markerFill = am4core.color(linecolor); // 视觉上不生效，但逻辑清晰 series.legendSettings.markerStroke = am4core.color(linecolor); // AmCharts 4.10+ 支持，显式声明更稳妥
⚠️ 注意事项：若使用较老版本（< 4.10），markerStroke 属性不可用，此时必须依赖 adapter 动态赋值描边色；markerColumn.defaultState.properties.fillOpacity = 1 出现在原代码末尾，会覆盖前面的 = 0，务必检查执行顺序并移除冲突行；图例标记尺寸由 marker.width / marker.height 控制，默认约 12px，如需调整可统一设置：marker.width = 16; marker.height = 16;。
最终效果：每个图例项呈现一个干净、边缘锐利的彩色方框（边框色 = 折线色），无背景、无阴影、无多余描边，与图表整体设计语言高度统一，大幅提升专业感与可读性。
