如何自定义G2Plot图表

G2Plot提供了许多开箱即用的图形组件，可是也很难知足全部的用户的业务须要，所以G2Plot开放了Adaptor模式让用户自定义组件。举个简单的例子：

// 引入自定义扩展图表入口
import { P } from '@antv/g2plot';
// 自定义Column组件
import { adaptor, defaultOptions } from 'g2plot-column';

const plot = new P('container', {
  data, // 数据源
}, adaptor, defaultOptions);

plot.render();

定义Adaptor

Adaptor模式翻译过来叫适配器模式，G2Plot的adaptor由chart和options构成。咱们能够经过扩张options属性，经过adaptor来重写chart中的方法。举个简单的例子：

// 经过自定义options的xField,yField来自定data与x,y的映射关系
export function adaptor(params: Params<ColumnOptions>): Params<ColumnOptions> {
  const data = [
    {name:'tom',age:23}
    {name:'joe',age:24}
  ]
  const { chart, options } = params;
  const { xField,yField } = options;
  chart.data(data);
  chart.interval().position(`${xField}*${yField}`);
  return params;
}