快速上手

import { Donut } from '@antv/g2plot';

const data = [
  {
    type: '分类一',
    value: 27,
  },
  {
    type: '分类二',
    value: 25,
  },
  {
    type: '分类三',
    value: 18,
  },
  {
    type: '分类四',
    value: 15,
  },
  {
    type: '分类五',
    value: 10,
  },
  {
    type: '其它',
    value: 5,
  },
];

const donutPlot = new Donut(document.getElementById('container'), {
  forceFit: true,
  radius: 0.8,
  data,
  angleField: 'value',
  colorField: 'type',
});

donutPlot.render();

配置属性

图表容器

width

可选, number

功能描述： 设置图表宽度。

默认配置： 400

height

可选, number

功能描述： 设置图表高度。

默认配置： 400

forceFit

可选, boolean

功能描述： 图表是否自适应容器宽高。当 forceFit 设置为true时，width 和 height 的设置将失效。

默认配置： true

pixelRatio

可选, number

功能描述： 设置图表渲染的像素比

默认配置： 2

renderer

可选, string

功能描述: 设置图表渲染方式为 canvas 或 svg

默认配置： canvas

数据映射

data 📌

必选, array object

功能描述： 设置图表数据源

默认配置： 无

数据源为对象集合，例如：[{ type: 'a'，value: 20 }, { type: 'b'，value: 20 }]。

meta

可选, object

功能描述： 全局化配置图表数据元信息，以字段为单位进行配置。在 meta 上的配置将同时影响所有组件的文本信息。

默认配置： 无

const data = [
  { country: 'Asia', year: '1750', value: 502,},
  { country: 'Asia', year: '1800', value: 635,},
  { country: 'Europe', year: '1750', value: 163,},
  { country: 'Europe', year: '1800', value: 203,},
];

const areaPlot = new PercentageStackArea(document.getElementById('container'), {
  data,
  meta: {    year: {      alias:'年份'      range: [0, 1],    },    value: {      alias: '数量',      formatter:(v)=>{return `${v}个`}    }  },  xField: 'year',
  yField: 'value',
  stackField: 'country',
});
areaPlot.render();

angleField 📌

必选, string

功能描述： 扇形切片大小（弧度）所对应的数据字段名。。

默认配置： 无

colorField

可选, string

功能描述：扇形颜色映射对应的数据字段名。

默认配置： 无

图形样式

radius ✨

可选, number

功能描述： 环图的半径，原点为画布中心。配置值域为 [0,1]，0 代表环图大小为 0，即不显示，1 代表环图撑满绘图区域。

默认配置： 0.8, 即 width / 2 * 0.8。

innerRadius ✨

可选, number

功能描述： 环图的内环半径，原点为画布中心。半径和内环半径决定了环图的厚度 (thickness)。

默认配置： 0.8

color

可选, string | string[] | Function

功能描述： 指定扇形颜色，即可以指定一系列色值，也可以通过回调函数的方法根据对应数值进行设置。

默认配置：采用 theme 中的色板。

用法示例：

// 配合颜色映射，指定多值
colorField:'type',
color:['blue','yellow','green']
//配合颜色映射，使用回调函数指定色值
colorField:'type',
color:(d)=>{
    if(d==='a') return 'red';
    return 'blue';
}

pieStyle ✨

可选, object

功能描述： 设置扇形样式。pieStyle中的fill会覆盖 color 的配置。pieStyle可以直接指定，也可以通过callback的方式，根据数据为每个扇形切片指定单独的样式。

默认配置： 无

图表组件

title

可选, optional

DEMOS

功能描述： 配置图表的标题，默认显示在图表左上角。

description

可选, optional

DEMOS

功能描述： 配置图表的描述，默认显示在图表左上角，标题下方。

legend

可选, object

DEMOS

功能描述：图例，配置colorField时显示，用于展示颜色分类信息

tooltip

可选, object

功能描述：信息提示框

label

可选, object

功能描述： 标签文本

DEMO1 DEMO2 DEMO3 DEMO4

spider label formatter用法示例：

当配置了 colorField，即扇形切片接受分类类型的颜色映射，此时 spider label 的文本为上下显示，此时 formatter 方法入参为 angleField 及 colorField 两个字段对应的值，返回值应为数组。

label: {
  type: 'spider',
  formatter: (angleField, colorField) => {
    return [ 'value1','value2' ];
  }
}

statistic ✨

可选, object

DEMO

功能描述： 指标卡组件，显示在环图中心，可以代替tooltip，显示环图数据的总计值和各项数据。启用 statistic 组件的同时将自动关闭tooltip。

事件

图形事件

图表区域事件

图例事件

图形标签事件

标题事件

描述事件

图表方法

render() 📌

必选

渲染图表。

updateConfig()

可选

更新图表配置项。

plot.updateConfig({
  width: 500,
  height: 600,
  legend: {
    visible: false,
  },
});

plot.render();

changeData()

可选

更新图表数据。updateConfig()方法会导致图形区域销毁并重建，如果只进行数据更新，而不涉及其他配置项更新，推荐使用本方法。

plot.changeData(newData);

repaint()

可选

图表画布重绘。

destroy()

可选

销毁图表。

getData()

获取图表数据。

getPlotTheme()

获取图表 theme。