vue+antv实现雷达图

一、下载依赖

npm install @antv/data-set
npm install @antv/g2

二、代码实现

<template>
  <div ref="container" />
</template>

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
// 创建雷达图
  mounted() {
    this.constradar()
  },
  methods: {
    constradar() {
      const data = [
        { item: '工作效率', a: 70, b: 30 },
        { item: '考勤', a: 60, b: 70 },
        { item: '积极性', a: 50, b: 60 },
        { item: '帮助同事', a: 40, b: 50 },
        { item: '自主学习', a: 60, b: 70 },
        { item: '正确率', a: 70, b: 50 }
      ]
      const { DataView } = DataSet
      const dv = new DataView().source(data)
      dv.transform({
        type: 'fold',
        fields: ['a', 'b'], // 展开字段集
        key: 'user', // key字段
        value: 'sc