schema.ts

class Chart {
  changeData(arg: any) {}
  axis(arg: any) {}
  render() {}
}

function field(config: any) {
  return function (target, propertyKey, descriptor) {};
}

function value(symbol) {
  return Symbol(symbol);
}

// 基类
class DeerSchema {
  protected chart: Chart = new Chart();
  // 定义座标轴
  @field({ type: 'object', })
  axe(fields) {
    const axeType = {
      enabled: 'boolean',
      type: 'string',
      title: 'string',
      ticks: {
        enabled: 'boolean',
        tickCount: [ value('auto'), 'string'],
        tickInterval: [ value('auto'), 'string'],
      },
      labels: {
        enabled: 'boolean',
        autoRotate: 'boolean',
        formatter: 'function',
      },
      min: [value('auto'), 'number'],
      max: [value('auto'), 'number'],
    }

    const axes = {
      x: axeType,
      y: axeType,
    } as any;

    if (fields.hasOwnProperty('y1')) {
      axes.y1 = axeType;
    }

    return axes;
  }

  // 定义网格
  @field({ type: 'object' })
  grid() {
    const gridType = {
      thick: 'number',
      style: [ value('solid'), value('dashed') ],
      color: 'color',
    };
    return {
      row: gridType,
      col: gridType,
    };
  }


  render(data, { fields }) {

  }
}


// 使用
class LineChartSchema extends DeerSchema {

  // 覆盖 axes
  @field({ type: 'object', })
  axe(fields) {
    const origin = super.axe(fields);

    delete origin.min;
    delete origin.max;

    return origin;
  }

  render(data, fields) {
    const { x, y, y1 } = this.axe({ fields });
    const chart = this.chart;

    chart.changeData(data);
    chart.axis({
      x: {
        ...x,
      },
      y: {
        ...y,
      }
    });

    chart.render();
  }
}