EChart ‐ legend 參數 - daniel-qa/Vue GitHub Wiki

{
  title: {},        // 標題
  tooltip: {},      // 提示框
  legend: {},       // 圖例（控制顯示/隱藏線條的部分）
  grid: {},         // 網格
  xAxis: {},        // X 軸
  yAxis: {},        // Y 軸
  series: [],       // 數據系列
  dataZoom: [],     // 數據縮放
  toolbox: {},      // 工具箱
  // ... 更多配置項
}

legend 的作用

legend 就是圖表底部顯示的圖例區域，用來：

顯示每條線的名稱和顏色

點擊可以顯示/隱藏對應的數據系列

提供視覺化的數據說明

legend 常用配置

legend: {
  data: ['2024', '2025', '2026'],  // 圖例項目（必須與 series[].name 對應）
  bottom: 10,                       // 位置：距離底部 10px
  left: 'center',                   // 水平居中
  textStyle: {                      // 文字樣式
    color: '#fff',
    fontSize: 14
  },
  itemWidth: 30,                    // 圖例標記寬度
  itemHeight: 14,                   // 圖例標記高度
  orient: 'horizontal',             // 排列方向：horizontal 或 vertical
  selectedMode: true                // 是否可點擊切換（預設 true）
}

關鍵關聯

legend.data 中的名稱必須與 series 中的 name 對應：

legend: {
  data: ['2024', '2025', '2026']  // 圖例名稱
},
series: [
  { name: '2024', ... },  // ✅ 對應
  { name: '2025', ... },  // ✅ 對應
  { name: '2026', ... }   // ✅ 對應
]

所以 legend 是 ECharts 的固定參數名，不能改成其他名稱。