Radar Chart

A radar chart (Radar Chart) is a two-dimensional chart form that displays three or more quantitative variables on axes starting from the same point, used to showcase the comparative relationships of multivariate data. ECharts provides robust support for radar charts, allowing flexible customization of axes, data regions, styles, and more through configuration options.

Basic Radar Chart Configuration

Creating a radar chart in ECharts requires configuring two core components: radar and series. Here is a simple example of a radar chart configuration:

option = {
  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Management', max: 16000 },
      { name: 'Technology', max: 30000 },
      { name: 'Customer Service', max: 38000 },
      { name: 'R&D', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ]
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4200, 3000, 20000, 35000, 50000, 18000],
        name: 'Budget Allocation'
      }
    ]
  }]
};

This configuration generates a hexagonal radar chart, where each axis represents an indicator, and data points are displayed on the corresponding axes.

Multi-Dimensional Data Display

Radar charts are particularly suitable for showcasing comparisons of multi-dimensional data. For example, comparing the performance metrics of two products:

option = {
  radar: {
    indicator: [
      { name: 'Appearance', max: 100 },
      { name: 'Camera', max: 100 },
      { name: 'Performance', max: 100 },
      { name: 'Battery Life', max: 100 },
      { name: 'Price', max: 100 }
    ],
    radius: '65%'
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [90, 85, 95, 70, 60],
        name: 'Phone A',
        areaStyle: { color: 'rgba(255, 0, 0, 0.4)' }
      },
      {
        value: [70, 95, 80, 85, 90],
        name: 'Phone B',
        areaStyle: { color: 'rgba(0, 0, 255, 0.4)' }
      }
    ]
  }]
};

By setting different areaStyle colors, the two datasets can be clearly distinguished, visually highlighting the strengths and weaknesses across dimensions.

Advanced Style Customization

ECharts offers rich styling options to enhance radar charts:

option = {
  radar: {
    shape: 'circle',  // Can be set to 'polygon' or 'circle'
    splitNumber: 5,    // Number of axis segments
    axisName: {
      color: '#333',
      fontSize: 14,
      formatter: function(value, indicator) {
        return '{a|' + value + '}\n{b|' + indicator.max + 'pts}';
      },
      rich: {
        a: { fontSize: 16 },
        b: { color: '#999', fontSize: 12 }
      }
    },
    splitArea: {
      show: true,
      areaStyle: {
        color: ['rgba(250,250,250,0.8)', 'rgba(200,200,200,0.4)']
      }
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0.3)'
      }
    },
    splitLine: {
      lineStyle: {
        color: 'rgba(0, 0, 0, 0.3)'
      }
    }
  },
  // ... Other configurations
};

These styling options enable:

• Circular or polygonal radar charts
• Custom axis label styles
• Alternating background colors
• Precise line style control

Dynamic Data Updates

Radar charts support dynamic data updates, which is useful in real-time monitoring scenarios:

// Initialize the chart
const myChart = echarts.init(document.getElementById('main'));
myChart.setOption(option);

// Simulate real-time data updates
setInterval(function() {
  const newData = option.series[0].data.map(item => {
    return {
      ...item,
      value: item.value.map(v => Math.random() * 100)
    };
  });
  
  myChart.setOption({
    series: [{
      data: newData
    }]
  });
}, 2000);

Enhanced Interaction Features

ECharts radar charts support rich interactive features:

option = {
  // ... Other configurations
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      return `${params.seriesName}<br/>` +
        params.data.value.map((v, i) => {
          return `${option.radar.indicator[i].name}: ${v}`;
        }).join('<br/>');
    }
  },
  legend: {
    data: ['Phone A', 'Phone B'],
    selectedMode: 'single',  // Single-selection mode
    selected: {
      'Phone A': true,
      'Phone B': false
    }
  }
};

These interactive features include:

• Custom tooltip content
• Legend controls to show/hide data series
• Data region highlighting
• Zooming and panning (configured in dataZoom)

Combining Radar Charts with Other Chart Types

Radar charts can be combined with other chart types to create richer data displays:

option = {
  grid: [
    { left: '5%', right: '55%', top: '10%', bottom: '60%' },
    { left: '55%', right: '5%', top: '10%', bottom: '60%' },
    { left: '5%', right: '55%', top: '70%', bottom: '5%' }
  ],
  radar: [
    {
      gridIndex: 0,
      // ... Radar chart configuration
    },
    {
      gridIndex: 1,
      // ... Another radar chart configuration
    }
  ],
  series: [
    {
      type: 'radar',
      radarIndex: 0,
      // ... Data configuration
    },
    {
      type: 'radar',
      radarIndex: 1,
      // ... Data configuration
    },
    {
      type: 'bar',
      gridIndex: 2,
      // ... Bar chart configuration
    }
  ]
};

This combination allows for the simultaneous display of multi-dimensional radar charts and detailed bar charts, providing a more comprehensive data perspective.

Performance Optimization Techniques

When handling large datasets, the following optimizations can be applied:

option = {
  radar: {
    // ... Configuration
    silent: true,  // Disable interaction effects to improve performance
    animation: false  // Disable animations
  },
  series: [{
    type: 'radar',
    progressive: 1000,  // Progressive rendering
    // ... Other configurations
  }]
};

Other optimization suggestions:

• Reduce unnecessary split lines
• Simplify data point styles
• Use data sampling to reduce data volume
• Consider lowering rendering precision on mobile devices

Practical Application Example

A real-world example of e-commerce product review analysis:

option = {
  radar: {
    indicator: [
      { name: 'Design', max: 5 },
      { name: 'Quality', max: 5 },
      { name: 'Shipping Speed', max: 5 },
      { name: 'Customer Service', max: 5 },
      { name: 'Value for Money', max: 5 }
    ],
    radius: '70%',
    splitNumber: 4,
    axisName: {
      color: '#666'
    }
  },
  series: [{
    type: 'radar',
    data: [
      {
        value: [4.8, 4.5, 3.9, 4.2, 4.7],
        name: 'Product A',
        symbol: 'roundRect',
        symbolSize: 8,
        lineStyle: {
          width: 3
        }
      },
      {
        value: [4.2, 4.7, 4.5, 4.8, 4.3],
        name: 'Product B',
        symbol: 'diamond',
        symbolSize: 8,
        lineStyle: {
          width: 3
        }
      }
    ]
  }],
  tooltip: {
    trigger: 'item',
    formatter: function(params) {
      const indicators = option.radar.indicator;
      return params.name + '<br/>' +
        params.data.value.map((v, i) => {
          return indicators[i].name + ': ' + v.toFixed(1) + 'pts';
        }).join('<br/>');
    }
  }
};

This example demonstrates how to use a radar chart to visually compare the scores of two products across different review dimensions.