Angular中使用ngx-echarts为堆叠柱状图显示图例的问题

针对你遇到的堆叠柱状图图例无法显示的问题，按以下步骤排查解决：

• 检查系列名称与图例数据的匹配性
  ECharts的图例显示依赖series中每个系列的name字段，必须和legend.data（也就是你的categoryArray）中的字符串完全一致，包括大小写、空格、特殊字符。比如categoryArray里是["线上", "线下"]，那series里的每个系列name就不能写成"线上渠道"或者"线下 "（带空格）。

• 确认categoryArray的有效性
  打印输出this.categoryArray，检查数组是否确实包含所有需要展示的类别，有没有空值、undefined或无效字符串的情况。如果数组存在无效元素，图例无法正常渲染。

• 调整图例的位置与样式
  图例可能被图表其他元素遮挡，或者因文字颜色与背景一致导致不可见。可以调整legend的top/bottom属性改变位置，同时设置文字颜色确保可见：

  legend: {
    data: this.categoryArray,
    orient: 'vertical',
    right: 10,
    top: 20, // 调整顶部位置避免遮挡
    show: true,
    textStyle: {
      color: '#333' // 设置显眼的文字颜色
    }
  }
  

• 验证配置是否正确加载
  在设置ECharts的option后，打印整个option对象，确认legend配置确实被正确传入，没有被其他代码覆盖或遗漏。

下面是一个完整的可参考示例：

// 假设你的类别数组
const categoryArray = ["类别A", "类别B", "类别C"];

const option = {
  xAxis: {
    type: 'category',
    data: ["1月", "2月", "3月"]
  },
  yAxis: {
    type: 'value'
  },
  legend: {
    data: categoryArray,
    orient: 'vertical',
    right: 10,
    top: 20,
    show: true,
    textStyle: { color: '#333' }
  },
  series: [
    {
      name: '类别A', // 与legend.data完全匹配
      type: 'bar',
      stack: 'total',
      data: [20, 35, 40]
    },
    {
      name: '类别B',
      type: 'bar',
      stack: 'total',
      data: [15, 25, 30]
    },
    {
      name: '类别C',
      type: 'bar',
      stack: 'total',
      data: [10, 15, 20]
    }
  ]
};

// 初始化并设置配置
const myChart = echarts.init(document.getElementById('chart-container'));
myChart.setOption(option);

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