feat(api): use api and spec together

[pearmini]

chart.options

Spec API和 Chart API 可以同时使用。

开始使用

Spec API 和 Chart API 理论上应该分开使用，但是两者也有点细小的区别：

• Spec API 更适合第一次声明图表的时候使用
• Chart API 更适合更新特定图表属性。

所以两者混合的一个场景可以如下：

// 第一次渲染
const chart = new Chart({});

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

chart.render();

// 更新数据
chart
  .getNodeByType('interval') //  获得 interval 实例
  .data([
    //更新数据
    { genre: 'Sports', sold: 275 },
    { genre: 'Strategy', sold: 115 },
  ]);

chart.render();

实现思路

chart.options(spec) 类似声明 innerHTML，如果当前没有 node tree，内部会将 spec 解析成一棵 node tree，否者会根据当前 options 更新该 node tree。（详见讨论：#4718 ）

案例

根据 height 和 index 去更新树。

chart.options({
  type: 'view',
  children: [{ type: 'interval' }],
});

chart.options({
  children: [{ data: [1, 2, 3] }],
});

chart.getNodeByType('interval').data(); // [1, 2, 3]

先使用 API，再使用 Spec 也是可以的。

const interval = chart.interval().data([1, 2, 3]);

chart.options({
  type: 'view',
  children: [{ data: [2, 3, 4] }],
});

interval.data(); // [2, 3, 4]