数据异常处理

数据异常处理

ECharts作为数据可视化工具，处理异常数据直接影响图表渲染效果。异常数据包括空值、极值、格式错误等，需针对性处理才能保证可视化准确性。

空值处理

空值常见形式为null、undefined或空字符串。ECharts默认会中断折线图连接，可能导致图表断裂。通过connectNulls配置可强制连接空值两侧数据点：

option = {
  xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'] },
  yAxis: { type: 'value' },
  series: [{
    data: [120, null, 150, 80, 70],
    type: 'line',
    connectNulls: true  // 关键配置
  }]
};

对于散点图，空值会导致标记点消失。建议预处理时过滤空值：

const validData = rawData.filter(item => 
  item.value !== null && item.value !== undefined
);

极值处理

极端值会压缩正常数据的显示区间。可通过以下方式处理：

1. 数据截断：设定合理范围，超出部分按边界值处理

function clamp(value, min, max) {
  return Math.min(Math.max(value, min), max);
}

2. 使用对数轴：当数据跨度极大时

yAxis: {
  type: 'log',
  logBase: 10
}

3. 动态调整坐标轴范围：

yAxis: {
  min: function(value) {
    return value.min - (value.max - value.min) * 0.1;
  },
  max: function(value) {
    return value.max + (value.max - value.min) * 0.1;
  }
}

数据格式校验

ECharts要求严格的数据格式。常见问题包括：

• 时间格式不统一：建议统一转换为时间戳

const normalizedTime = new Date(rawTimeString).getTime();

• 数值类型错误：字符串数字需转换

const safeNumber = Number(input) || 0;

• 数据结构不一致：使用Schema校验

const schema = {
  name: 'string',
  value: 'number'
};

function validateData(item) {
  return typeof item.name === schema.name && 
         typeof item.value === schema.value;
}

异步数据加载处理

网络请求可能返回异常数据，需要多层防护：

axios.get('/api/data').then(response => {
  if (!response.data || !Array.isArray(response.data.series)) {
    throw new Error('Invalid data structure');
  }
  
  const safeData = response.data.series.map(item => ({
    ...item,
    value: parseFloat(item.value) || 0
  }));
  
  chart.setOption({
    series: [{ data: safeData }]
  });
}).catch(error => {
  console.error('Data loading failed:', error);
  chart.showLoading({
    text: '数据加载异常',
    color: '#ff4d4f'
  });
});

大数据量优化

当数据量超过万级时，需特殊处理：

1. 降采样：保留关键数据点

function downsample(data, threshold) {
  const step = Math.ceil(data.length / threshold);
  return data.filter((_, index) => index % step === 0);
}

2. 启用渐进渲染

series: [{
  type: 'line',
  progressive: 1000,
  progressiveThreshold: 5000
}]

3. 使用WebWorker预处理

const worker = new Worker('data-processor.js');
worker.postMessage(largeData);
worker.onmessage = (e) => {
  chart.setOption({ series: [{ data: e.data }] });
};

动态数据更新

实时数据流需处理可能的跳动问题：

let historyData = [];

function updateChart(newPoint) {
  // 数据平滑处理
  const avgValue = historyData.length > 0 ? 
    (newPoint.value + historyData.slice(-3).reduce((a,b)=>a+b.value,0)) / 4 : 
    newPoint.value;
  
  historyData.push({ ...newPoint, value: avgValue });
  
  // 限制历史数据长度
  if (historyData.length > 100) {
    historyData.shift();
  }
  
  chart.setOption({
    series: [{ data: historyData }]
  });
}

错误边界处理

组件级错误处理可防止整个应用崩溃：

class SafeChart extends React.Component {
  state = { hasError: false };
  
  static getDerivedStateFromError() {
    return { hasError: true };
  }
  
  render() {
    return this.state.hasError ? (
      <div className="error-fallback">图表渲染异常</div>
    ) : (
      <ReactECharts option={this.props.option} />
    );
  }
}

视觉提示

数据异常时提供明确视觉反馈：

option = {
  graphic: {
    type: 'text',
    left: 'center',
    top: 'middle',
    silent: true,
    invisible: !dataError,
    style: {
      fill: '#ff4d4f',
      text: '数据异常，请联系管理员',
      fontSize: 20
    }
  }
};

调试工具集成

开发阶段增强错误定位能力：

// 注册全局错误事件
echarts.registerAction({
  type: 'error',
  event: 'error'
}, (params) => {
  console.group('ECharts Error');
  console.log('Type:', params.type);
  console.log('Component:', params.componentType);
  console.log('Error:', params.error);
  console.groupEnd();
});

// 在init时启用调试模式
const chart = echarts.init(dom, null, {
  renderer: 'canvas',
  debug: true
});