如何在Apache ECharts堆叠图中控制图例符号？

当然可以控制ECharts图例的符号外观，针对你使用的折线图（line类型），可以通过两种方式配置：

1. 统一控制所有图例符号 #

直接在legend配置项里设置全局样式，覆盖所有系列的图例符号：

const options: EChartsOption = {
  // ...其他配置
  legend: {
    data: legendData,
    textStyle: {
      color: isThemeDark ? "#ccc" : "#444",
    },
    // 设置图例符号形状，可选值包括circle、rect、triangle、diamond等
    itemSymbol: 'circle',
    // 设置图例符号大小
    itemSymbolSize: 12,
    itemStyle: {
      // 符号边框颜色，结合主题动态调整
      borderColor: isThemeDark ? "#fff" : "#000",
      borderWidth: 2,
      // 符号填充色，不设置则沿用对应系列的color配置
      // color: isThemeDark ? "#eee" : "#333",
      // 可选：设置符号透明度
      opacity: 0.8
    }
  },
  // ...其他配置
};

2. 针对单个系列单独设置图例符号 #

如果需要给不同系列的图例符号设置差异化样式，可以在每个series项里单独配置：

series: Object.keys(data).map((k, i) => ({
  name: legendData[i],
  type: "line",
  stack: "Total",
  emphasis: {
    focus: "series",
  },
  // 单独设置该系列的图例符号形状
  legendIcon: i % 2 === 0 ? 'circle' : 'rect',
  // 单独设置该系列的图例符号大小
  legendSymbolSize: 14,
  // 可选：单独设置该系列图例符号的样式
  legendItemStyle: {
    borderColor: isThemeDark ? "#ddd" : "#222"
  },
  data: Object.values(data[k]).map((obj) => obj.value),
})),

注意点 #

• legend.itemStyle里的color会覆盖系列默认颜色，若想保留系列的color配置，不要设置该属性；
• 折线图的symbol配置是控制图表上数据点的形状，legendIcon才是控制图例里的符号形状，不要混淆；
• 结合你的主题切换逻辑，所有颜色相关配置都可通过isThemeDark变量动态调整，确保明暗主题下的可读性。

内容的提问来源于stack exchange，提问作者Felipe Chernicharo