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

怼烎@ 2024-03-26 17:48 86阅读 0赞

#### 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号员工'
            }
          ]
        }
      ]
    };

渲染效果

![在这里插入图片描述][f564ff1e442647869370c62087a478ad.png_pic_center]

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

[f564ff1e442647869370c62087a478ad.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/c30394c9549146e7aae233784d92b224.png