2021-06-21

安装：

npm install @antv/g2 --save

1. 引入

需要使用的页面引入

import { Chart } from '@antv/g2'

2. 渲染的数据

  const data = [
    { year: '1951 年', sales: 38 },
    { year: '1952 年', sales: 52 },
    { year: '1956 年', sales: 61 },
    { year: '1957 年', sales: 145 }
  ]

3. 创建chart对象

  const chart = new Chart({
    container: 'container', // 指定图表容器 ID
    autoFit: true, // 自适应
    // width: 600, // 指定图表宽度
    height: 300 // 指定图表高度
  })

4. 载入数据源用chart.data()或者 chart.source();

  chart.data(data)
  chart.interaction('active-region')

5.由 year(自定义) 和 sales(自定义) 两个属性决定图形位置，year 映射至 x 轴，sales 映射至 y 轴

  chart.interval().position('year*sales').color('red')

6. 渲染图表

  chart.render()

详细使用参考：

https://segmentfault.com/a/1190000013413771