如何实现vue雷达图

使用 ECharts 实现 Vue 雷达图

安装 ECharts 依赖

npm install echarts --save

在 Vue 组件中引入 ECharts

import * as echarts from 'echarts'

创建雷达图容器

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

初始化雷达图

mounted() {
  this.initRadarChart()
},
methods: {
  initRadarChart() {
    const chart = echarts.init(document.getElementById('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: [90, 70, 80, 85, 75],
            name: '能力评估'
          }
        ]
      }]
    }

    chart.setOption(option)
  }
}

使用 Vue-ECharts 封装组件

安装 vue-echarts

npm install echarts vue-echarts

创建可复用的雷达图组件

<template>
  <v-chart :option="option" autoresize />
</template>

<script>
import { use } from 'echarts/core'
import { RadarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent
} from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import VChart from 'vue-echarts'

use([
  RadarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  RadarComponent,
  CanvasRenderer
])

export default {
  components: { VChart },
  props: {
    indicators: Array,
    seriesData: Array
  },
  computed: {
    option() {
      return {
        title: { text: '技能评估' },
        tooltip: {},
        legend: { data: ['当前能力'] },
        radar: { indicator: this.indicators },
        series: [{
          name: '能力',
          type: 'radar',
          data: this.seriesData
        }]
      }
    }
  }
}
</script>

自定义雷达图样式

修改雷达图外观

option: {
  radar: {
    shape: 'circle',
    splitNumber: 5,
    radius: '70%',
    axisName: {
      color: '#333',
      fontSize: 14
    },
    splitArea: {
      areaStyle: {
        color: ['rgba(114, 172, 209, 0.2)']
      }
    },
    axisLine: {
      lineStyle: {
        color: 'rgba(114, 172, 209, 0.8)'
      }
    }
  },
  series: [{
    itemStyle: {
      color: '#4bacc6'
    },
    lineStyle: {
      width: 2,
      color: '#4bacc6'
    },
    areaStyle: {
      color: 'rgba(75, 172, 198, 0.4)'
    }
  }]
}

响应式雷达图实现

添加窗口大小变化监听

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

使用 computed 属性动态生成数据

computed: {
  radarData() {
    return this.$store.getters.skillData.map(item => {
      return {
        name: item.skillName,
        max: 100,
        color: this.getColor(item.level)
      }
    })
  }
}