Data anomaly handling

Data anomaly handling is an indispensable part of data visualization, especially in ECharts. Properly addressing abnormal data can effectively prevent chart rendering errors, misleading users, or system crashes. From data cleaning to dynamic fault tolerance, ECharts provides multiple mechanisms to handle anomalies in various scenarios.

Data Format Validation

ECharts has strict conventions for data formats. For example, the series.data of a line chart must be a numeric array. When encountering non-numeric types, coercion or filtering is required:

// Raw data contains invalid values
const rawData = ['12', 34, null, 'NaN', undefined, 56];

// Data cleaning solution
const cleanData = rawData.map(item => {
  const num = Number(item);
  return isNaN(num) ? null : num; // Convert invalid values to null
});

option = {
  xAxis: { type: 'category', data: ['A', 'B', 'C', 'D', 'E', 'F'] },
  yAxis: { type: 'value' },
  series: [{
    type: 'line',
    data: cleanData,  // Use cleaned data
    connectNulls: true  // Automatically connect points on either side of null values
  }]
};

Common format handling strategies:

• Time formats: Use echarts.time.parse() to uniformly convert to timestamps.
• Categorical data: Check consistency between axis.data and series.data lengths.
• Geographic coordinates: Validate if latitude and longitude are within valid ranges (longitude [-180, 180], latitude [-90, 90]).

Null Values and Boundary Handling

ECharts provides multiple ways to handle null values, which should be chosen based on business scenarios:

series: [{
  type: 'bar',
  data: [12, null, 45, 0, undefined],
  // Optional handling methods:
  showEmpty: false,    // Completely hide null values
  emptyItemStyle: {    // Customize null value styles
    color: '#eee',
    borderType: 'dashed'
  },
  clip: true           // Restrict data to axis bounds
}]

Example of extreme value handling:

// Automatically scale axis range to exclude outliers
yAxis: {
  type: 'value',
  scale: true,
  min: function(value) {
    return Math.max(0, value.min - 10);
  },
  max: function(value) {
    const q3 = value.max * 0.75;
    return Math.min(q3 * 1.5, value.max);
  }
}

Dynamic Data Fault Tolerance

For real-time data scenarios, establish defensive mechanisms:

let lastValidData = [];

function updateChart(newData) {
  try {
    if (!Array.isArray(newData)) throw new Error('Data is not an array');
    
    // Data validation
    const validData = newData.map(item => {
      if (typeof item.value !== 'number') return null;
      return {
        ...item,
        value: Math.min(1000, Math.max(0, item.value)) // Limit value range
      };
    });

    lastValidData = validData.some(v => v !== null) 
      ? validData 
      : lastValidData; // Retain the last valid data

    myChart.setOption({
      series: [{ data: lastValidData }]
    });
  } catch (e) {
    console.error('Data update failed:', e);
    // Trigger fallback display or error reporting here
  }
}

Server-Side Exception Handling

When asynchronous requests fail, implement multi-level fallback solutions:

axios.get('/api/data').then(res => {
  if (res.data?.status !== 200) {
    throw new Error(res.data?.message || 'Service error');
  }
  return res.data;
}).catch(async err => {
  // Primary fallback: Attempt to read local cache
  const cache = localStorage.getItem('chartCache');
  if (cache) return JSON.parse(cache);

  // Secondary fallback: Use built-in sample data
  return await import('./fallbackData.json');

}).then(data => {
  myChart.setOption(buildOption(data));
}).catch(() => {
  // Ultimate fallback: Display error state
  myChart.setOption({
    graphic: {
      type: 'text',
      style: { text: 'Data loading failed', fontSize: 18 }
    }
  });
});

Performance Optimization Strategies

Special handling techniques for large datasets:

// Downsampling (for high-frequency time-series data)
function downsample(data, threshold = 1000) {
  if (data.length <= threshold) return data;
  
  const step = Math.ceil(data.length / threshold);
  return data.filter((_, i) => i % step === 0);
}

// Progressive rendering configuration
option = {
  animationThreshold: 2000,  // Disable animation for over 2000 points
  progressiveThreshold: 500, // Chunked rendering threshold
  progressive: 200          // Render 200 points per chunk
};

Error Monitoring System

Integrate an error reporting system:

myChart.on('error', function(err) {
  sentry.captureException(new Error(`ECharts error: ${err.message}`), {
    extra: {
      option: JSON.stringify(myChart.getOption()),
      viewport: `${window.innerWidth}x${window.innerHeight}`
    }
  });
});

// Custom validation rules
echarts.registerValidate(
  'negativeCheck', 
  (option) => option.series?.some(s => s.data?.some(d => d < 0))
);

Special Chart Considerations

Fault tolerance for map data:

// Error handling when registering maps
echarts.registerMap('china', chinaJson)
  .catch(() => {
    // Use simplified geometry data if loading fails
    return {
      type: 'FeatureCollection',
      features: [/* Basic outline data */]
    };
  });

// Heatmap missing data handling
series: [{
  type: 'heatmap',
  data: heatData,
  pointSize: 10,
  blurSize: 5,
  emphasis: {
    disabled: true  // Disable highlighting to avoid null value exceptions
  }
}]

User Interaction Protection

Prevent issues caused by abnormal operations:

// Debounce data refresh
const debounceUpdate = _.debounce(updateChart, 300);

// Safe disposal method
function safeDispose() {
  if (!myChart.isDisposed()) {
    myChart.clear();
    myChart.dispose();
  }
}

// Adaptive protection during view changes
window.addEventListener('resize', () => {
  if (myChart && !myChart._disposed) {
    try {
      myChart.resize();
    } catch (e) {
      console.warn('Chart reset error', e);
    }
  }
});

Debugging Tool Integration

Recommended debugging methods during development:

// Check data range in console
console.log(
  'Data statistics:',
  echarts.util.map(option.series[0].data, v => v.value)
);

// Enable debug mode
echartsInstance.setOption({
  debugMode: true,  // Outputs more detailed error logs
  silent: false     // Disable silent mode
});

// Performance analysis
const startTime = Date.now();
myChart.setOption(option);
console.log(`Rendering time: ${Date.now() - startTime}ms`);