当前位置：首页 > VUE

vue实现雷达图

2026-03-29 12:50:44VUE

使用 Vue 实现雷达图

雷达图（Radar Chart）是一种多维数据可视化图表，适用于展示多个维度的数据对比。以下是基于 Vue 和 ECharts 的实现方法。

安装依赖

确保项目中已安装 ECharts 和 Vue-ECharts（官方推荐的 Vue 封装库）：

vue实现雷达图

npm install echarts vue-echarts

基础实现代码

在 Vue 组件中引入 ECharts 并配置雷达图：

<template>
  <div ref="radarChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initRadarChart();
  },
  methods: {
    initRadarChart() {
      const chart = echarts.init(this.$refs.radarChart);
      const option = {
        title: {
          text: '能力雷达图'
        },
        radar: {
          indicator: [
            { name: '技术', max: 100 },
            { name: '沟通', max: 100 },
            { name: '创意', max: 100 },
            { name: '逻辑', max: 100 },
            { name: '管理', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [85, 70, 90, 65, 80],
              name: '个人能力'
            }
          ]
        }]
      };
      chart.setOption(option);
    }
  }
};
</script>

动态数据绑定

通过 props 或 API 请求动态更新数据：

vue实现雷达图

props: {
  indicators: {
    type: Array,
    default: () => [
      { name: '技术', max: 100 },
      { name: '沟通', max: 100 }
    ]
  },
  values: {
    type: Array,
    default: () => [85, 70]
  }
},
methods: {
  updateChart() {
    const option = {
      radar: { indicator: this.indicators },
      series: [{ data: [{ value: this.values }] }]
    };
    this.chart.setOption(option);
  }
}

自定义样式

通过 ECharts 配置项调整颜色、区域透明度等：

series: [{
  type: 'radar',
  areaStyle: { color: 'rgba(64, 158, 255, 0.5)' },
  lineStyle: { width: 2 },
  symbolSize: 6
}]

响应式处理

监听窗口变化并重新渲染图表：

mounted() {
  window.addEventListener('resize', this.handleResize);
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    this.chart.resize();
  }
}