antV/g2的使用

antV-g2

特点: 以数据驱动、

安装:

 npm instal @antv/g2

使用:

1. 准备一个容器

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

2. 执行代码

// 1. 引入
import * as G2 from '@antv/g2'

// 2. 渲染的数据
const data = [
    {data1},
    {data2},
    ...
]

// 3. 创建chart对象
const chart = new G2.chart({
    container: 'container',
    autoFit: true, // 自适应
    height: xx,
    widht: xx,
    padding: xx // 
})

// 4. 载入数据源, 官方文档上用的是chart.data()载入，但是我用的时候不好使，也不知道什么原因。就只能用source了。
chart.source(data)

// 5. 创建图形语法， eg: 柱状图, label显示数值
chart.interval().position('x*y').label('x');

// 6. 渲染图表
chart.render()

3. 常用方法:

chart.hide()
chart.show()
chart.destory()

// 校准刻度
chart.scale('x', {

})

// 工具条

// 配置轴属性, eg: x轴旋转50度
chart.axis('x', {
    label: {
        rotate: 50
    }
})