echarts radar雷达图常规使用

最新推荐文章于 2025-02-23 11:54:36 发布

梦翼93

最新推荐文章于 2025-02-23 11:54:36 发布

阅读量3.4k

点赞数

分类专栏：前端浏览器文章标签： echarts vue

本文链接：https://blog.youkuaiyun.com/m0_54281425/article/details/121451760

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

浏览器

8 篇文章

订阅专栏

本文介绍如何使用ECharts配置雷达图，包括设置雷达图的基本属性、调整雷达图的尺寸和位置、定义指标名称及范围等。通过示例展示了如何初始化图表、更新数据并展示效果。

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

在这里插入图片描述

<div id="idRadar"></div>

data() {
    return {
      // 雷达图
      optionRadar: {
        color: '#1890FF',
        fontSize: 16,
        grid: {
          //绘图网格
          left: '0',
          right: '0',
          top: '0',
          bottom: '10',
          containLabel: true
        },
        title: {},
        radar: [
          {
            // shape: 'circle', // 打开可设置雷达图为圆形
            indicator: [
              { name: '专注度70', max: 100, min: 0 },
              { name: '参与度84', max: 100, min: 0 },
              { name: '课堂纪律88', max: 100, min: 0 },
              { name: '学习成就69', max: 100, min: 0 },
              { name: '愉悦度89', max: 100, min: 0 }
            ],
            radius: 98   // 雷达图缩放大小
          }
        ],
        series: [
          {
            type: 'radar',
            data: [
              {
                value: [70,84,88,69,89],  // 展示的值
              }
            ],
            areaStyle: {   // 阴影部分设置
              color: '#5BC7F9',
              opacity: 0.3
            }
          }
        ]
      },
     }
    }

methods: {
    performanceRadar() {
      let chartRadar = document.getElementById('idRadar')  // div容器id为‘idRadar’
      let myRadar = echarts.init(chartRadar)

      this.optionRadar && myRadar.setOption(this.optionRadar)
    },

 this.performanceRadar() 
 调用可在页面初始化的时候mounted 调用，如果是请求到的数据进行赋值，那么在赋值后需要调用才能展示赋值后的数据。

赋值方法
this.optionRadar.series[0].data[0].value = optionRadarData  // 雷达图的数据[]
          this.optionRadar.radar[0].indicator[0].name = '专注度' + focusIndexScore  // 雷达图外层 文字+ 想要展示的具体数据
          this.optionRadar.radar[0].indicator[1].name = '参与度' + participationScore
          this.optionRadar.radar[0].indicator[2].name = '课堂纪律' + disciplineScore
          this.optionRadar.radar[0].indicator[3].name ='学习成就' + achievementScore
          this.optionRadar.radar[0].indicator[4].name ='愉悦度' + cheerFulnessScore