AntV的基本使用

实现如下功能雷达图可以使用ECharts，也可以使用AntV来实现

Echarts官方参考

AntV官方参考

1. 这类第三方的工具，基本上都是根据官方文档跑起来初始demo，然后查手册进行学习
2. 安装必要依赖

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

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

<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>

标签：AntV,chart,item,score,使用,line,null,data
来源： https://blog.csdn.net/m0_49304996/article/details/116559678