feat(component): components support combine multiple scales

[visiky]

Overview

Combined legend with color and shape scale is shared.

render<G2Spec>(
  {
    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',
      color: 'genre',
      shape: 'genre',
    },
  },
)

Combined legend with different scales.

render<G2Spec>(
  {
    type: 'interval',
    data: [
      { genre: 'Sports', sold: 275, type: 'A' },
      { genre: 'Strategy', sold: 115, type: 'A' },
      { genre: 'Action', sold: 120, type: 'A' },
      { genre: 'Shooter', sold: 350, type: 'B' },
      { genre: 'Other', sold: 150, type: 'B' },
    ],
    encode: {
      x: 'genre',
      y: 'sold',
      color: 'genre',
      shape: 'type',
    },
    scale: {
      color: {
        range: ['#5B8FF9', '#5AD8A6', '#5D7092', '#F6BD16', '#6F5EF9'],
      },
    },
  }
)