ECharts如何在运行时检测并提示无效数据配置错误？

可以通过前置配置校验+运行时错误兜底两层逻辑实现，从源头拦截无效配置，同时接住渲染阶段的异常，具体实现步骤如下：

1. 编写配置预校验逻辑 #

在调用setOption触发渲染前，先遍历配置项，按不同图表类型的规则做格式校验，从源头拦截无效配置。
以你提到的雷达图场景为例，radar类型series的核心校验规则：

• 顶层必须配置radar.indicator定义雷达图的维度，不能搭配类目轴/数值轴的xAxis、yAxis配置使用
• data字段不能直接传一维数值数组，必须传对象数组，每个元素包含value（对应各维度的数值数组）、name（数据项名称）字段

你可以按这个模式扩展所有用到的图表类型的校验规则，示例校验函数代码如下：

/**
 * 校验ECharts配置合法性
 * @param {Object} option ECharts配置项
 * @returns {Object} 校验结果，包含是否合法、错误信息列表
 */
function validateEChartsOption(option) {
  const errors = [];
  if (!Array.isArray(option.series)) {
    errors.push('配置项必须包含series数组');
    return { valid: false, errors };
  }

  option.series.forEach((seriesItem, seriesIndex) => {
    const { type, data } = seriesItem;
    // 雷达图专属校验规则
    if (type === 'radar') {
      // 校验是否配置了雷达图必需的radar.indicator
      if (!option.radar || !Array.isArray(option.radar.indicator)) {
        errors.push(`series[${seriesIndex}]类型为radar（雷达图）时，必须顶层配置radar.indicator定义维度，无需配置xAxis/yAxis`);
      }
      // 校验data格式
      const isInvalidData = Array.isArray(data) && data.every(item => typeof item !== 'object' && !Array.isArray(item));
      if (isInvalidData) {
        errors.push(`series[${seriesIndex}](radar类型)data格式无效，不能直接传入一维数值数组，合法格式示例：[{value: [150, 230, 224], name: '周数据'}]`);
      }
    }
    // 其他图表类型（line/bar/pie等）的校验规则可按相同逻辑在此处扩展
  });

  return {
    valid: errors.length === 0,
    errors
  };
}

2. 把校验逻辑接入渲染流程 #

每次渲染图表前先执行校验，校验不通过时直接抛出明确提示，阻断无效配置进入渲染流程：

function renderChart(echartsIns, option) {
  const validateResult = validateEChartsOption(option);
  if (!validateResult.valid) {
    // 错误提示可以根据业务场景自定义：控制台输出、页面弹窗、日志上报都可以
    console.error('ECharts配置不合法，渲染终止：\n' + validateResult.errors.join('\n'));
    // 如需降级渲染，可以在这里补全默认合法配置后再往下执行
    return;
  }
  echartsIns.setOption(option);
}

3. 加运行时异常兜底 #

对于预校验没覆盖到的边缘场景，可以加一层全局捕获，接住渲染过程中抛出的原生异常：

• ECharts 4.0及以上版本支持监听实例的error事件，所有渲染阶段的错误都会触发该事件：

echartsIns.on('error', (err) => {
  console.error('ECharts运行时渲染异常：', err.message);
  // 这里可以加错误提示、清空图表、渲染兜底占位图等逻辑
});

• 如果使用更低版本的ECharts，可以直接把setOption调用包裹在try/catch块中捕获异常。

如果需要覆盖大量图表类型的校验，可以把不同type对应的校验规则抽成独立的映射表，后续扩展规则不需要修改核心校验逻辑，维护成本更低。

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