安装:
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()