用antv-G2实现雷达图

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

 这种图在echarts中也有，这里我们用蚂蚁数据可视化部门的产品antv-G2

antv.vision/zh

g2.antv.vision/zh/examples…
这类第三方的工具，基本上都是根据官方文档跑起来初始demo，然后查手册进行学习

安装必要依赖

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

创建一个组件来实现雷达图

在这个组件中来创建雷达图组件并完成初始化。

|-index.vue
|-calender.vue # 日历组件
|-radar.vue    # 雷达图组件

下面的代码在官网中参考过来的：雷达图 | G2

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

<script>
import DataSet from '@antv/data-set'
import { Chart } from '@antv/g2'
export default {
  mounted() {
    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: 'score' // value字段
    })

    const chart = new Chart({
      container: 'container',
      autoFit: true,
      height: 500
    })
    chart.data(dv.rows)
    chart.scale('score', {
      min: 0,
      max: 80
    })
    chart.coordinate('polar', {
      radius: 0.8
    })
    chart.tooltip({
      shared: true,
      showCrosshairs: true,
      crosshairs: {
        line: {
          style: {
            lineDash: [4, 4],
            stroke: '#333'
          }
        }
      }
    })
    chart.axis('item', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          style: {
            lineDash: null
          }
        }
      }
    })
    chart.axis('score', {
      line: null,
      tickLine: null,
      grid: {
        line: {
          type: 'line',
          style: {
            lineDash: null
          }
        }
      }
    })

    chart
      .line()
      .position('item*score')
      .color('user')
      .size(2)
    chart
      .point()
      .position('item*score')
      .color('user')
      .shape('circle')
      .size(4)
      .style({
        stroke: '#fff',
        lineWidth: 1,
        fillOpacity: 1
      })
    chart
      .area()
      .position('item*score')
      .color('user')
    chart.render()
  }
}
</script>

画图涉及DOM元素,要在mounted时,才能在vue中访问

总结

api
○日期： 今天星期几？ (new Date()).getDay()
○字符串截取。 "2021-05-06" ---> 06
●数据可视化
○echarts
○antv-g2
■获取dom，要在vue的mounted钩子函数

​