echarts雷达图的使用

最新推荐文章于 2024-10-05 10:37:48 发布

Beam007

最新推荐文章于 2024-10-05 10:37:48 发布

阅读量1.5k

点赞数

分类专栏： echarts

本文链接：https://blog.csdn.net/Beam007/article/details/103421974

版权

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

摘要由CSDN通过智能技术生成

样例图

在这里插入图片描述

示例代码

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%'],
    // 雷达图的指示器 可以自行定义属性比如单位用于提示框等多处获