ECharts内部dataZoom滚动报错：Cannot read properties of undefined (reading 'getBaseAxis')

核心问题分析 #

这个报错本质是dataZoom绑定的坐标轴未被正确初始化，结合你的代码来看，主要是空数据场景下的坐标轴配置缺失、dataZoom参数计算异常这两个问题导致的。

调试步骤 #

• 临时显示y轴验证：把yAxis.show设为true，确认坐标轴是否正常渲染。如果轴没有显示任何类目，说明y轴缺少data配置，这是触发getBaseAxis找不到轴实例的关键原因。
• 排查空数据逻辑：当config.data为空时，你给series.data赋值了纯数字数组[0,0,0,0,0]，但category类型的y轴需要对应的类目数据，没有类目会导致轴初始化不完整。
• 检查dataZoom参数合法性：当config.data.length为0时，(4 / config.data.length) * 100会得到Infinity，这种非法值会直接破坏dataZoom的正常配置。
• 断点定位问题：在浏览器控制台Sources面板，搜索ECharts源码中的getBaseAxis，在报错位置打断点，查看调用栈里的轴实例是否存在，精准定位未初始化的对象。

具体修复代码 #

1. 给yAxis补充类目数据配置：
   确保category轴有对应的数据类目，和series数据结构匹配：

   yAxis: {
       type: 'category',
       show: false,
       boundaryGap: true,
       splitLine: {
           show: false,
           lineStyle: {
               width: 2,
               type: "solid",
           }
       },
       // 新增：根据数据生成对应类目
       data: config.data.length === 0 
           ? Array(5).fill('') 
           : config.data.map(item => item.label.value)
   },
   

2. 修复dataZoom的end参数计算逻辑：
   处理空数据或数据量不足的情况，避免除以0和超出100的非法数值：

   dataZoom: [
       {
           type: 'inside',
           yAxisIndex: 0,
           start: 0,
           // 修复：空数据时显示全部，数据量少则直接设为100
           end: config.data.length === 0 
               ? 100 
               : Math.min((4 / config.data.length) * 100, 100),
           zoomOnMouseWheel: false,
           moveOnMouseMove: true,
           moveOnMouseWheel: true,
       }
   ],
   

3. 统一空数据的series.data结构：
   空数据时使用和正常数据一致的对象结构，避免ECharts解析异常：

   data: config.data.length === 0 
       ? Array(5).fill({ value: 0, label: { value: '' } }) 
       : config.data,
   

这些修改能确保坐标轴和dataZoom配置在各种场景下都能正常初始化，彻底解决getBaseAxis的未定义错误。

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