Echarts数据可视化 第4章 Echarts可视化图 4.6 雷达图

Echarts数据可视化

文章目录

• • • Echarts数据可视化
    • 第4章 Echarts可视化图
    • • 4.6 雷达图

Echarts数据可视化：入门、实战与进阶

第4章 Echarts可视化图

4.6 雷达图

雷达图主要用于对比多个单位在多个不同的项目上的表现差异，雷达图的type 为 radar

举个栗子

option = {
  title: {
    text: '雷达图'
  },
  tooltip: {},
  legend: {
    data: ['1号员工', '2号员工']
  },
  radar: {
    name: {
      textStyle: {
        color: '#fff',
        backgroundColor: '#999',
        borderRadius: 3,
        padding: [3, 5]
      }
    },
    indicator: [
      { name: '技能A', max: 6500 },
      { name: '技能B', max: 16000 },
      { name: '技能C', max: 30000 },
      { name: '技能D', max: 38000 },
      { name: '技能E', max: 52000 },
      { name: '技能F', max: 25000 }
    ]
  },
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [4300, 10000, 28000, 35000, 50000, 19000],
          name: '1号员工'
        },
        {
          value: [5000, 14000, 28000, 31000, 42000, 21000],
          name: '2号员工'
        }
      ]
    }
  ]
};

渲染效果

这张雷达图我们对比了1号和2号员工在不同技能上的表现，绘制雷达图时，会用到radar参数，该参数内置了雷达图中与文字显示相关的内容【包括字体颜色、字体背景颜色、字体背景圆角半径大小、字体背景x和y方向填充背景大小】，在indicator 参数中，设置了不同维度的名称和范围。