说明

适合画各种花里胡哨的饼状图之类的

例如:

options,就是配置里的options

dataOptions,就是配置里的dataOptions

依次类推

下载

npm install @antv/g2

https://g2.antv.antgroup.com/examples

初始化

接收配置并渲染

import { Chart } from '@antv/g2';
const chart = new Chart({container: 'container'});
chart
    .options(options)
    .data(dataOptions)
    //坐标系配置
    .coordinate(coordinateOptions)
    //气泡框展示的字段
    .tooltip(['value', 'gdp'])
    .render();

常用配置

initOptions

API	描述	默认值	类型
container	指定 chart 绘制的 DOM，可以传入 DOM id，也可以直接传入 dom 实例		string
width	图表宽度	640	number
height	图表高度	480	number
depth	图表深度，在 3D 图表中使用	0	number
renderer	指定渲染引擎，默认使用 canvas。
plugins	指定渲染时使用的插件 ，具体见plugin		any[]
autoFit	图表是否自适应容器宽高，默认为false，	false	boolean
padding	图表内边距	30	number

options

API	描述	示例	对应方法
type	指定渲染类型	interval 填充的,绘制柱形图、条形图、饼图等 line 线性的,绘制折线图 text 该类型用于在绘制的图形上显示文字	.interval() .line() .text()
width/height	设置
title	设置
tooltip	设置tooltip
theme	主题
data	设置传递给组件的自定义数据	data:[ {name: 1,age: 2} ]
coordinate	设置坐标系	coordinate:{	.coordinate(obj)
axis	设置坐标系
encode	设置每个坐标轴对应的字段名称	encode: {	.encode(obj) .encode(key,value)
scale	设置坐标轴的比例尺		.scale(obj)
transform	转换坐标系	transform: [ { type: 'stackY' }, { type: 'sortX' } ],	.transform(obj)
layout	布局	layout: { nodeAlign: 'center', nodePadding: 0.03, },	.layout(obj)
label		labels: [{ text: 'genre', // 指定绑定的字段 dy: -15, // 指定样式 }]
style	样式		.style(obj) .style(key,value)
state	状态	state: { active: {}, inactive: {} },	.state(obj) .state(key,value)
animate	动画	animate: { enter: { type: 'scaleInX', duration: 100, delay: 10, }, update: { type: 'morphing', }, },	.animate(obj) .animate(key,value)
legend

const options={
    //interval常用来绘制柱形图、条形图、饼图等,需要指定x,y,饼状图需要指定x/y,color
    //line 绘制折线图 需要x,y
    //text 该类型用于在绘制的图形上显示文字
    type: 'interval',
     //根据容器大小自适应宽高
    autoFit: true,
    //坐标轴对应的属性,有x,y,color三种,color用于饼状图
    encode: {x: 'genre',y: 'sold'},
    //轴上对应刻度显示的配置
    axis:{x:{labelFormatter:'~s'}}, //x轴格式化为千分位123,222的格式
    style:{}
}

dataOptions

//仅写数组时,为默认type为inline的语法糖
const data=[{ genre: 'Sports', sold: 275 }]
const dataOptions={
    type: 'fetch', //默认为inline
    value: 'https://gw.alipayobjects.com/os/antvdemo/assets/data/scatter.json',
    transform: [
       {type: 'filter',callback: (d) => d.a < 3},
       {type: 'map',callback: (d,index) => { ...d, index }},
       {type: 'sort',callback: (a, b) => b.a - a.a},
       {type: 'sortBy',callback: (a, b) => b.a - a.a},
       {type: 'slice',fields: ['sold']},// 根据 sold 字段排序
    ],
    callback: (d) => d.a < 3
}

coordinateOptions

//坐标系配置
const coordinateOptions={
  //transpose 将 (x, y) 变换成 (y, x),常见于条形图
  // transform: [{ type: 'transpose' }],
  //theta 一种特殊的极坐标系，半径长度固定,常用于饼状图,
      //如果使用该类型,encode的x需要换成color,还有.transform({ type: 'stackY' })
   type: 'theta'
}

图形绘制关键点

//interval常用来绘制柱形图、条形图、饼图等,需要指定x,y,饼状图需要指定x/y,color
    //line 绘制折线图 需要x,y
    //text 该类型用于在绘制的图形上显示文字
    //area面积图,可以理解为平滑的柱形图,需要指定x,y
    //wordCloud 词云图,也就是全是文字的图
    //heatmap 热力图,需要同时指定x,y,color
    //gauge 仪表盘 需要将data的value改为: {target: 120,total: 400,name: 'score'},
        //target是当前进度,total是总进度
    type: 'interval',

叠加的柱/条状图

//关键点在于,x/y属性需要有相同的属性值

一个刻度有多个柱的分组柱状图

//关键点
.transform({ type: 'dodgeX' })

饼图

//关键点
.coordinate({ type: 'theta' })
.transform({ type: 'stackY' })
  .encode('y', 'percent')
  .encode('color', 'item')

环形图

//关键点
通过 outerRadius: 0.8, innerRadius: 0.5指定内外圈基于原始圈的半径
.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 })
.transform({ type: 'stackY' })
  .encode('y', 'percent')
  .encode('color', 'item')