diff --git a/src/plots/_template/adaptor.ts b/src/plots/_template/adaptor.ts new file mode 100644 index 0000000000..b5b3444c4a --- /dev/null +++ b/src/plots/_template/adaptor.ts @@ -0,0 +1,51 @@ +import { interaction, animation, theme, scale } from '../../adaptor/common'; +import { Params } from '../../core/adaptor'; +import { flow } from '../../utils'; +import { TemplateOptions } from './types'; + +/** + * geometry 处理 + * @param params + */ +function geometry(params: Params): Params { + const { chart, options } = params; + const { data, xField, yField } = options; + + chart.data(data); + + chart.interval().position(`${xField}*${yField}`); + + return params; +} + +/** + * meta 配置 + * @param params + */ +export function meta(params: Params): Params { + const { options } = params; + const { xAxis, yAxis, xField, yField } = options; + + return flow( + scale({ + [xField]: xAxis, + [yField]: yAxis, + }) + )(params); +} +/** + * 折线图适配器 + * @param chart + * @param options + */ +export function adaptor(params: Params) { + // flow 的方式处理所有的配置到 G2 API + return flow( + geometry, + meta, + interaction, + animation, + theme + // ... 其他的 adaptor flow + )(params); +} diff --git a/src/plots/_template/index.ts b/src/plots/_template/index.ts new file mode 100644 index 0000000000..0fd8a27621 --- /dev/null +++ b/src/plots/_template/index.ts @@ -0,0 +1,21 @@ +import { Plot } from '../../core/plot'; +import { TemplateOptions } from './types'; +import { adaptor } from './adaptor'; +import { Adaptor } from '../../core/adaptor'; + +export { TemplateOptions }; + +/** + * 这个是一个图表开发的 模板代码! + */ +export class Template extends Plot { + /** 图表类型 */ + public type: string = 'template'; + + /** + * 获取适配器 + */ + protected getSchemaAdaptor(): Adaptor { + return adaptor; + } +} diff --git a/src/plots/_template/types.ts b/src/plots/_template/types.ts new file mode 100644 index 0000000000..bafbd2db00 --- /dev/null +++ b/src/plots/_template/types.ts @@ -0,0 +1,9 @@ +import { Options } from '../../types'; + +/** 配置类型定义 */ +export interface TemplateOptions extends Options { + /** x 轴字段 */ + readonly xField?: string; + /** y 轴字段 */ + readonly yField?: string; +} diff --git a/src/plots/dual-axes/adaptor.ts b/src/plots/dual-axes/adaptor.ts index e9cf5c3e80..681e305193 100644 --- a/src/plots/dual-axes/adaptor.ts +++ b/src/plots/dual-axes/adaptor.ts @@ -30,14 +30,14 @@ function geometry(params: Params): Params { const PADDING = [20, 40]; // 绘制左轴对应数据 - chart + const leftView = chart .createView({ padding: PADDING, }) .data(data[0]); // 绘制右轴对应数据 - chart + const rightView = chart .createView({ padding: PADDING, }) @@ -45,7 +45,7 @@ function geometry(params: Params): Params { // 左轴图形 drawSingleGeometry({ - chart: chart.views[0], + chart: leftView, options: { xField, yField: yField[0], @@ -55,7 +55,7 @@ function geometry(params: Params): Params { // 右轴图形 drawSingleGeometry({ - chart: chart.views[1], + chart: rightView, options: { xField, yField: yField[1], diff --git a/src/plots/dual-axes/index.ts b/src/plots/dual-axes/index.ts index 1ada6eb148..8ceca1e470 100644 --- a/src/plots/dual-axes/index.ts +++ b/src/plots/dual-axes/index.ts @@ -7,7 +7,7 @@ export { DualAxesOption }; export class DualAxes extends Plot { /** 图表类型: 双轴图 */ - public type: string = 'dualAxes'; + public type: string = 'dual-axes'; /** * 获取双轴图的适配器