ECharts折线图图例不显示怎么办？

Question

在使用 ECharts 绘制折线图时，常常遇到“图例不显示”的问题。常见原因包括：`legend` 配置项未正确设置、`series` 中未定义 `name` 属性、或 `legend.data` 与系列名称不匹配。此外，若将 `legend.show` 设为 `false`，也会导致图例隐藏。解决方法包括：检查 `legend` 配置是否完整，确保每个系列拥有 `name`，并确认 `legend.data` 数组与系列名称一致。还可通过浏览器控制台查看是否有配置警告，辅助排查问题。掌握这些技巧，有助于快速修复 ECharts 折线图图例不显示的问题。

Answer 1

一、ECharts 折线图图例不显示：常见问题与排查思路

在使用 ECharts 绘制折线图时，常常遇到“图例不显示”的问题。这通常由配置项设置不完整或逻辑错误引起。

• legend 配置项未正确设置
• series 中未定义 name 属性
• legend.data 与系列名称不匹配
• legend.show 被设为 false

二、图例显示机制解析与关键配置项说明

图例（legend）是 ECharts 图表中用于标识不同系列的重要组件。其核心配置如下：

配置项	作用	常见问题
legend.show	控制图例是否显示	值设为 false 会导致图例隐藏
legend.data	指定图例中显示的系列名称	未与 series.name 完全匹配
series.name	系列名称，用于图例和提示框显示	未定义或拼写错误

三、典型问题示例与修复方案

以下是一个图例未显示的典型代码示例：

option = {
  legend: {
    data: ['销量']
  },
  xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
  yAxis: {},
  series: [{
    type: 'line',
    data: [120, 200, 150]
  }]
};
  

问题在于 series 中缺少 name 属性。修复方法如下：

series: [{
  name: '销量',
  type: 'line',
  data: [120, 200, 150]
}]
  

四、进阶排查技巧与调试建议

除了检查配置项外，还可以通过浏览器控制台查看 ECharts 输出的警告信息。例如：

• “legend data should be same with series name”
• “series.name is undefined”

这些提示有助于快速定位问题。此外，使用 ECharts 提供的在线调试工具（如 ECharts 官方编辑器）也能辅助排查。

五、图例配置流程图

graph TD
    A[开始] --> B{是否配置 legend?}
    B -- 否 --> C[添加 legend 配置]
    B -- 是 --> D{是否设置 legend.show 为 true?}
    D -- 否 --> E[设置 legend.show 为 true]
    D -- 是 --> F{是否设置 legend.data?}
    F -- 否 --> G[设置 legend.data]
    F -- 是 --> H{series 是否有 name 属性?}
    H -- 否 --> I[为 series 添加 name]
    H -- 是 --> J[图例应正常显示]