React 中使用 ECharts 报错 "series not exists"

问题现象

在 React 项目中使用 ECharts 时，控制台报错：

series not exists. Legend data should be same with series name or data name

但已确认 legend.data 与 series.name 完全匹配，代码逻辑看似正确。

---

问题根源

未正确注册 ECharts 图表组件。自 ECharts 5 起，官方采用按需引入（tree-shaking）的模块化设计，需显式注册图表类型。

---

解决方案

1. 正确引入图表组件

// 正确方式：显式引入并注册柱状图
import * as echarts from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { GridComponent, LegendComponent } from 'echarts/components';

// 注册必要组件
echarts.use([BarChart, GridComponent, LegendComponent]);

关键注意事项

1. 组件注册顺序

   // 错误：遗漏 BarChart 注册
   echarts.use([GridComponent]); // ❌ 缺少图表类型
   
   // 正确：注册所有依赖组件
   echarts.use([BarChart, GridComponent, LegendComponent]); // ✅

2. 按需引入的优势

   • 减少打包体积（未使用的组件不会被打包）
   • 提升初始化速度

3. 常见图表类型注册

   // 折线图
   import { LineChart } from 'echarts/charts';
   
   // 饼图
   import { PieChart } from 'echarts/charts';
   
   // 地图
   import { MapChart } from 'echarts/charts';

错误排查清单

1. 检查 series.type 是否与注册的图表类型匹配
2. 确认 echarts.use() 包含所有依赖组件
3. 验证 series.name 与 legend.data 完全一致（包括大小写）
4. 确保 echarts 版本 ≥ 5.0.0

总结

该错误的本质是 ECharts 无法识别未注册的图表类型。通过显式注册组件并保持 name 字段的一致性，即可彻底解决问题。按需引入的设计虽然增加了初始化步骤，但显著提升了大型项目的性能表现。