echarts雷达图的使用

最新推荐文章于 2024-10-29 16:16:42 发布

Beam007

最新推荐文章于 2024-10-29 16:16:42 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/103421974

echarts 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何使用Echarts创建雷达图，包括样例图展示、关键代码示例以及使用过程中应注意的细节，如tooltip.formatter的悬浮提示框格式化，radar.indicator的指示器定义，series.label的拐点数值显示，以及emphasis和symbol对高亮和图形标签的影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

样例图

在这里插入图片描述

示例代码

option = {
  tooltip: {
    show: true,
    padding: 8,
    // 悬浮提示框格式化 通过option和params获取对应变量
    formatter: function (params, ticket, callback) {
      let str = option.series[0].name + '<br/>'
      for (let i = 0; i < option.radar.indicator.length; i++) {
        str += option.radar.indicator[i].name.split('(')[0] + '：&nbsp;&nbsp;' + params.value[i] + option.radar.indicator[i].unit + '&nbsp;&nbsp;（最大值：' + option.radar.indicator[i].max + option.radar.indicator[i].unit + '）' + '<br/>'
      }
      return str
    }
  },
  radar: {
    radius: '72%',
    center: ['50%', '50%'],
    // 雷达图的指示器 可以自行定义属性比如单位用于提示框等多处获取显示
    indicator: [
      {name: '剩余寿命(年)', max: 40, unit: '年'},
      {name: '故障率(‰)', max: 100, unit: '‰'},
      {name: '温度(℃)', max: 80, unit: '℃'},
      {name: '湿度(%rh)', max: 80, unit: '%rh'},
      {name: '电流(A)', max: 10, unit: 'A'}
    ],
    shape: 'circle',
    splitNumber: 5,
    // 雷达坐标标注字体颜色
    name: {
      color: 'rgba(255, 255, 255, 0.9)',
      fontSize: 12
    },
    nameGap: 4,
    // 雷达坐标渐变色
    splitLine: {
      lineStyle: {
        color: [
          'rgba(85, 178, 228, 0.1)', 'rgba(85, 178, 228, 0.2)',
          'rgba(85, 178, 228, 0.4)', 'rgba(85, 178, 228, 0.6)',
          'rgba(85, 178, 228, 0.8)', 'rgba(85, 178, 228, 1)'
        ].reverse()
      }
    },
    splitArea: {
      show: false
    },
    // 雷达坐标发射线颜色
    axisLine: {
      lineStyle: {
        color: 'rgba(85, 178, 228, 0.2)'
      }
    }
  },
  series: [
    {
      name: '详情数据',
      type: 'radar',
      lineStyle: {
        normal: {
          width: 1,
          opacity: 0.5
        }
      },
      // 图形上的文本标签设置
      label: {
        normal: {
          show: true,
          formatter: function (params) {
            return params.value
          }
        }
      },
      // 鼠标悬浮高亮时 图形上的文本标签设置
      emphasis: {
        label: {
          show: true,
          formatter: function (params) {
            return params.value
          }
        }
      },
      data: [
        [20, 11, 42.3, 36.9, 9]
      ],
      // symbol若设置为none，图形上的文本标签label、emphasis将无法显示
      symbol: '',
      symbolSize: 2,
      // 数据值 圈圈的颜色
      itemStyle: {
        normal: {
          color: 'rgb(29, 218, 228)'
        }
      },
      areaStyle: {
        normal: {
          opacity: 0.2
        }
      }
    }
  ]
}

注意点说明

1、tooltip.formatter 悬浮提示框格式化
通常通过params获取对应变量的值，其实echarts也是一个对象，可以通过option去获取对应变量的值。
2、radar.indicator 雷达图的指示器
可自行定义属性，比如单位unit，用于提示框等多处获取显示。
3、series[0].label 图形上的文本标签设置
拐点处是否显示数值。
4、series[0].emphasis 鼠标悬浮高亮时图形上的文本标签设置
鼠标悬浮高亮时，拐点处是否显示数值。
5、series[0].symbol 控制图形上的文本标签设置
若设置为none，图形上的文本标签label、emphasis将无法显示。