Analysis of basic configuration items

Basic Configuration Item Analysis

The core of ECharts lies in generating charts through configuration items. These configurations determine the chart type, data presentation method, and visual effects. The complete configuration structure uses JSON format and contains key attributes across multiple levels.

Option Object Structure

The top-level configuration object option includes all chart configurations, primarily divided into three categories: data, style, and interaction:

const option = {
  // Data-related
  dataset: {...},
  series: [...],
  
  // Style-related
  title: {...},
  legend: {...},
  grid: {...},
  
  // Interaction-related
  tooltip: {...},
  toolbox: {...}
}

Coordinate System Configuration

Rectangular coordinate systems are controlled via the grid configuration item:

grid: {
  show: true,
  left: '10%',
  right: 60,
  top: 60,
  bottom: '15%',
  backgroundColor: 'rgba(0,0,0,0.1)',
  borderWidth: 1
}

Polar coordinate systems require the polar configuration:

polar: {
  radius: [20%, '80%'],
  center: ['50%', '50%']
}

Data Series Configuration

The series array defines data series, with configurations varying significantly for different chart types. Example for a line chart:

series: [{
  name: 'Sales',
  type: 'line',
  data: [120, 200, 150, 80, 70, 110, 130],
  symbol: 'circle',
  symbolSize: 8,
  lineStyle: {
    width: 3,
    type: 'dashed'
  },
  areaStyle: {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(58,77,233,0.8)' },
      { offset: 1, color: 'rgba(58,77,233,0.1)' }
    ])
  }
}]

Visual Mapping Configuration

The visualMap component maps data to visual elements:

visualMap: {
  type: 'continuous',
  min: 0,
  max: 100,
  text: ['High', 'Low'],
  realtime: false,
  calculable: true,
  inRange: {
    color: ['#50a3ba', '#eac736', '#d94e5d']
  },
  outOfRange: {
    color: '#999'
  }
}

Example for discrete data mapping:

visualMap: {
  type: 'piecewise',
  categories: ['Excellent', 'Good', 'Average', 'Poor'],
  pieces: [
    { value: 'Excellent', color: '#1E90FF' },
    { value: 'Good', color: '#98FB98' },
    { value: 'Average', color: '#FFD700' },
    { value: 'Poor', color: '#FF6347' }
  ]
}

Animation Configuration

Chart animations are controlled via animation-related properties:

animation: true,
animationDuration: 1000,
animationEasing: 'elasticOut',
animationDelay: function (idx) {
  return idx * 200;
}

Special animation effect configuration:

series: [{
  type: 'bar',
  animationType: 'scale',
  animationDurationUpdate: 300,
  animationEasingUpdate: 'cubicInOut'
}]

Theme and Style Configuration

Global styles are configured via color and textStyle:

color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae'],
textStyle: {
  fontFamily: 'Microsoft YaHei',
  fontSize: 12,
  color: '#333'
},

Component-level style overrides:

title: {
  text: 'Main Title',
  textStyle: {
    fontSize: 18,
    fontWeight: 'bolder',
    color: '#4682B4'
  }
}

Event Handling Configuration

Events are bound via the on method:

myChart.on('click', function(params) {
  console.log('Clicked data:', params);
});

myChart.on('mouseover', { 
  seriesIndex: 1 
}, function(params) {
  console.log('Hovered on series 2:', params);
});

Responsive Configuration

Two approaches for responsiveness:

1. Media query method:

option = {
  baseOption: {
    title: {...},
    series: [...]
  },
  media: [{
    query: { maxWidth: 768 },
    option: {
      legend: { right: 0 },
      series: [{ radius: '50%' }]
    }
  }]
}

2. Dynamic resize detection:

window.addEventListener('resize', function() {
  myChart.resize({
    width: document.getElementById('chart').offsetWidth,
    height: 400
  });
});

Data Update Mechanism

Three efficient data update methods:

1. Full replacement:

myChart.setOption({
  series: [{
    data: newData
  }]
});

2. Incremental update:

myChart.setOption({
  series: [{
    data: [...myChart.getOption().series[0].data, ...newPoints]
  }]
}, true);

3. Data transformation:

myChart.setOption({
  dataset: {
    source: rawData.map(item => ({
      date: item[0],
      value: item[1] * 100
    }))
  }
});

Performance Optimization Configuration

Key performance optimization parameters:

option = {
  silent: true,  // Disable interaction effects
  progressive: 1000,  // Chunked rendering threshold
  progressiveThreshold: 3000,  // Data volume to enable progressive rendering
  hoverLayerThreshold: 3000,  // Hover layer threshold
  useUTC: true  // Timezone handling
}

Large data optimization example:

series: [{
  type: 'scatter',
  large: true,
  largeThreshold: 2000,
  symbolSize: 3,
  data: new Array(5000).fill().map(() => [
    Math.random() * 100,
    Math.random() * 100
  ])
}]