Radar Chart

Code

const chart = echarts.init(document.getElementById('chart'));
chart.setOption({
  tooltip: {},
  legend: { data: ['Budget', 'Actual'] },
  radar: {
    indicator: [
      { name: 'Sales', max: 6500 },
      { name: 'Admin', max: 16000 },
      { name: 'IT', max: 30000 },
      { name: 'Support', max: 38000 },
      { name: 'Dev', max: 52000 },
      { name: 'Marketing', max: 25000 }
    ],
    radius: '65%',
    splitArea: { areaStyle: { color: ['#fafafa', '#eee'] } }
  },
  series: [{
    type: 'radar',
    data: [
      { value: [4200, 16000, 28000, 35000, 50000, 19000], name: 'Budget' },
      { value: [5000, 14000, 28000, 31000, 42000, 21000], name: 'Actual' }
    ],
    areaStyle: { opacity: 0.2 }
  }]
});

Explanation

The radar.indicator array defines each spoke with a name and max; series data values are compared against these maxima. Multiple data entries overlay on the same radar for direct comparison, and areaStyle fills the polygon with translucent color. splitArea alternates ring colors for readability.

More ECharts Snippets