雷达图

基本的雷达图：

• 定义各个维度的最大值
• 定义图表的类型

雷达图的特点：

• 雷达图可以用来分析多个维度的数据(与标准数据)的对比情况。

1. 简单的雷达图

实现：

option = {
  radar: {
    // 配置各个维度的最大值
    indicator: [
      { name: '易用性', max: 100 }, { name: '功能', max: 100 },
      { name: '拍照', max: 100 }, { name: '外观', max: 100 },
      { name: '续航', max: 100 },
    ],
  },
  series: [
    {
      type: 'radar',
      data: [
        { name: '华为',  value: [ 80, 90, 90, 82, 90 ] },
        { name: '小米', value: [ 70, 82, 75, 70, 78 ] }
      ]
    },
  ],
}

示例：

<!--33-radar-basic.html-->
<div id="box_33-radar-basic" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  echarts.init(document.querySelector('#box_33-radar-basic')).setOption({
    legend: {
      data: [ '华为', '小米' ],
      bottom: 16,
    },
    radar: {
      indicator: [
        { name: '易用性', max: 100 }, { name: '功能', max: 100 },
        { name: '拍照', max: 100 }, { name: '外观', max: 100 },
        { name: '续航', max: 100 },
      ],
    },
    series: [
      {
        type: 'radar',
        data: [
          { name: '华为',  value: [ 80, 90, 90, 82, 90 ] },
          { name: '小米', value: [ 70, 82, 75, 70, 78 ] }
        ]
      },
    ],
  });
</script>

2. 常用配置

说明：

option	说明
radar.shape	雷达图整体的形状： 'polygon' 多边形， 'circle' 圆形
series-radar.label	显示标签名称
series-radar.areaStyle	区域样式

示例：

<!--34-radar-common-config.html-->
<div id="box_34-radar-common-config" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  echarts.init(document.querySelector('#box_34-radar-common-config')).setOption({
    legend: {
      data: [ '华为', '小米' ],
      bottom: 16,
    },
    radar: {
      indicator: [
        { name: '易用性', max: 100 }, { name: '功能', max: 100 },
        { name: '拍照', max: 100 }, { name: '外观', max: 100 },
        { name: '续航', max: 100 },
      ],
      shape: 'circle',
    },
    series: [
      {
        type: 'radar',
        data: [
          { name: '华为',  value: [ 80, 90, 90, 82, 90 ] },
          { name: '小米', value: [ 70, 82, 75, 70, 78 ] }
        ],
        label: { show: true },
        areaStyle: { opacity: 0.3 },
      },
    ],
  });
</script>