echarts 雷达图

实现步骤

• Echarts最基本的代码结构：
  引入js文件，DOM容器，初始化对象，设置option
• 定义各个维度的最大值
  indicator: [{name: '易用性', max:100}, ......]
• 准备具体产品的数据
  data: [{name:'手机1', value:[80,90,80,82,90]},......]

• 图表类型：
  在series下设置type: radar

  
  
  image.png

常用配置

• 显示数值

             label:{
                        show: true
                    },

image.png

• 区域面积

areaStyle:{} // 将每一个产品的雷达图形成阴影的面积

image.png

• 绘制类型

在radar下配置

shape: 'circle' // 配置雷达图最外层的图形 circle polygon

image.png

雷达图的特点

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

示例代码如下：