refactor(api): composite mark

[pearmini]

Composite Mark

• 改变了复合 Mark 的 API 接口。
• fix: chart.options 渲染自定义 Mark #5130

开始使用

// 之前
function Pie(options) {
  const { encode = {}, ...rest } = options;
  const { value, ...restEncode } = encode;
  return () => {
    return deepMix(rest, {
      type: 'interval',
      transform: [{ type: 'stackY' }],
      coordinate: { type: 'theta' },
      encode: {
        ...restEncode,
        y: value,
      },
    });
  };
}

// 现在
function Pie(options, context) {
  const { encode = {}, ...rest } = options;
  const { value, ...restEncode } = encode;
  return deepMix(rest, {
    type: 'interval',
    transform: [{ type: 'stackY' }],
    coordinate: { type: 'theta' },
    encode: {
      ...restEncode,
      y: value,
    },
  });
}

chart.options({
  type: Pie,
  data: [
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
    { genre: 'Action', sold: 120 },
    { genre: 'Shooter', sold: 350 },
    { genre: 'Other', sold: 150 },
  ],
  encode: { value: 'sold', color: 'genre' },
});

变化

直接返回 Mark Options，同时增加第二个参数 context 获得 width，height 等参数。