Scatter Chart

A scatter plot is a common method of data visualization that displays the relationship between two variables in a two-dimensional coordinate system. ECharts provides powerful scatter plot functionality, supporting various custom configurations to meet complex data presentation needs.

Basic Configuration of Scatter Plots

In ECharts, the core configuration of a scatter plot is achieved through type: 'scatter' in the series. Here is a simple example of a scatter plot configuration:

option = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5],
        [20, 20],
        [30, 15],
        [40, 25],
        [50, 10]
      ]
    }
  ]
};

This code generates a scatter plot with five data points, where the x-axis and y-axis automatically scale based on the data range.

Data Formats and Style Customization

ECharts scatter plots support multiple data formats:

1. Two-dimensional array format: [x, y]
2. Object format: {value: [x, y], name: 'Data Name'}
3. Data points with styles: {value: [x, y], symbol: 'circle', symbolSize: 20, itemStyle: {color: '#c23531'}}

series: [
  {
    type: 'scatter',
    data: [
      {value: [10, 5], name: 'Point A'},
      {value: [20, 20], symbol: 'rect', symbolSize: 15},
      {value: [30, 15], itemStyle: {color: '#61a0a8'}},
      {value: [40, 25], symbolSize: function(val) { return val[1] * 0.8; }}
    ]
  }
]

Multi-Series Scatter Plots

ECharts supports displaying multiple series of scatter plots in the same coordinate system, each with distinct styles and markers:

option = {
  xAxis: {type: 'value'},
  yAxis: {type: 'value'},
  series: [
    {
      name: 'Series 1',
      type: 'scatter',
      data: [[10, 5], [20, 20], [30, 15]],
      symbol: 'circle',
      itemStyle: {color: '#c23531'}
    },
    {
      name: 'Series 2',
      type: 'scatter',
      data: [[15, 10], [25, 25], [35, 20]],
      symbol: 'triangle',
      itemStyle: {color: '#2f4554'}
    }
  ]
};

Bubble Chart Implementation

By setting symbolSize as a data-dependent function, bubble chart effects can be achieved:

series: [
  {
    type: 'scatter',
    data: [
      [10, 5, 8],  // The third value represents size
      [20, 20, 15],
      [30, 15, 10]
    ],
    symbolSize: function(data) {
      return data[2] * 2;
    }
  }
]

Optimization for Large-Scale Scatter Plots

When dealing with large datasets (over 1,000 points), performance can be optimized using the following methods:

1. Enable large-scale mode with large: true
2. Set the largeThreshold threshold
3. Use progressive for chunked rendering

series: [
  {
    type: 'scatter',
    large: true,
    largeThreshold: 2000,
    progressive: 400,
    data: [...large dataset...]
  }
]

Enhanced Interaction Features

ECharts scatter plots support rich interactive features:

option = {
  tooltip: {
    formatter: function(params) {
      return `X: ${params.value[0]}<br/>Y: ${params.value[1]}`;
    }
  },
  dataZoom: [
    {type: 'slider', xAxisIndex: 0},
    {type: 'slider', yAxisIndex: 0},
    {type: 'inside', xAxisIndex: 0},
    {type: 'inside', yAxisIndex: 0}
  ],
  series: [...]
};

Combining Scatter Plots with Cartesian Coordinates

Scatter plots can be combined with other chart types to create more complex data visualizations:

option = {
  xAxis: {type: 'value'},
  yAxis: {type: 'value'},
  series: [
    {
      type: 'scatter',
      data: [...],
      markLine: {
        data: [{type: 'average', name: 'Average'}]
      }
    },
    {
      type: 'line',
      data: [...]
    }
  ]
};

Custom Scatter Shapes

ECharts supports custom scatter shapes using SVG Path:

series: [
  {
    type: 'scatter',
    symbol: 'path://M0,0L20,0L10,20Z',  // Custom triangle
    data: [...]
  }
]

Animation Effects for Scatter Plots

Rich animation effects can be achieved through configuration:

series: [
  {
    type: 'scatter',
    data: [...],
    animationDelay: function(idx) {
      return idx * 100;  // Sequential animation delay
    },
    rippleEffect: {
      brushType: 'stroke'
    }
  }
]

Geographic Coordinate Scatter Plots

ECharts supports drawing scatter plots on geographic coordinate systems:

option = {
  geo: {
    map: 'china'
  },
  series: [
    {
      type: 'scatter',
      coordinateSystem: 'geo',
      data: [
        {name: 'Beijing', value: [116.46, 39.92, 100]},
        {name: 'Shanghai', value: [121.48, 31.22, 80]}
      ]
    }
  ]
};

3D Scatter Plots

3D scatter plots can be implemented using the ECharts GL extension:

option = {
  grid3D: {},
  xAxis3D: {type: 'value'},
  yAxis3D: {type: 'value'},
  zAxis3D: {type: 'value'},
  series: [
    {
      type: 'scatter3D',
      data: [
        [10, 5, 8],
        [20, 15, 12],
        [15, 25, 10]
      ],
      symbolSize: 12
    }
  ]
};

Visual Mapping for Scatter Plots

The visualMap component enables mapping data to visual elements:

option = {
  visualMap: {
    dimension: 2,  // Use the third dimension of data
    min: 0,
    max: 100,
    inRange: {
      color: ['#50a3ba', '#eac736', '#d94e5d'],
      symbolSize: [10, 30]
    }
  },
  series: [
    {
      type: 'scatter',
      data: [
        [10, 5, 20],
        [20, 15, 50],
        [30, 25, 80]
      ]
    }
  ]
};

Special Effects for Scatter Plots

ECharts provides special effects to enhance the expressiveness of scatter plots:

series: [
  {
    type: 'effectScatter',  // Scatter plot with ripple effects
    data: [...],
    rippleEffect: {
      scale: 4,
      brushType: 'fill'
    },
    showEffectOn: 'render'
  }
]