如何自定義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;
}