vue实现雷达图

雷达图实现方法

在Vue中实现雷达图通常借助图表库，推荐使用ECharts或Chart.js。以下是两种常用方法的详细说明：

使用ECharts实现

安装ECharts依赖：

npm install echarts --save

组件代码示例：

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

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

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.radarChart;
      const myChart = echarts.init(chartDom);

      const option = {
        radar: {
          indicator: [
            { name: '销售', max: 100 },
            { name: '管理', max: 100 },
            { name: '技术', max: 100 },
            { name: '客服', max: 100 },
            { name: '研发', max: 100 }
          ]
        },
        series: [{
          type: 'radar',
          data: [
            {
              value: [90, 70, 85, 80, 75],
              name: '预算分配'
            }
          ]
        }]
      };

      myChart.setOption(option);
    }
  }
};
</script>

使用Chart.js实现

安装Chart.js依赖：

npm install chart.js --save

组件代码示例：

<template>
  <canvas ref="radarChart" width="400" height="400"></canvas>
</template>

<script>
import { Chart, RadarController, RadialLinearScale, PointElement, LineElement, Filler } from 'chart.js';

Chart.register(RadarController, RadialLinearScale, PointElement, LineElement, Filler);

export default {
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const ctx = this.$refs.radarChart.getContext('2d');
      new Chart(ctx, {
        type: 'radar',
        data: {
          labels: ['销售', '管理', '技术', '客服', '研发'],
          datasets: [{
            label: '绩效评估',
            data: [90, 70, 85, 80, 75],
            backgroundColor: 'rgba(54, 162, 235, 0.2)',
            borderColor: 'rgba(54, 162, 235, 1)',
            pointBackgroundColor: 'rgba(54, 162, 235, 1)'
          }]
        },
        options: {
          scales: {
            r: {
              angleLines: {
                display: true
              },
              suggestedMin: 0,
              suggestedMax: 100
            }
          }
        }
      });
    }
  }
};
</script>

自定义样式技巧

ECharts样式调整：

radar: {
  shape: 'circle',
  splitArea: {
    show: false
  },
  axisLine: {
    lineStyle: {
      color: 'rgba(0, 0, 0, 0.3)'
    }
  }
}

Chart.js样式调整：

options: {
  elements: {
    line: {
      borderWidth: 3
    }
  }
}

数据动态更新

对于响应式数据，建议在watch中监听数据变化并调用myChart.setOption()或chart.update()方法。销毁组件时记得调用myChart.dispose()释放资源。

两种方案各有优势：ECharts功能更丰富，Chart.js更轻量。根据项目需求选择合适的库即可实现专业级雷达图效果。