feat(static-mark): add chart.legends

[pearmini]

Legends

可以通过 chart.legends(options) 添加一个或者多个图例到画布中。

开始使用

export function mockLegendColor(): G2Spec {
  return {
    type: 'legends',
    padding: 'auto',
    height: 100,
    scale: {
      color: {
        type: 'ordinal',
        domain: ['a', 'b'],
        range: ['steelblue', 'orange'],
      },
    },
  };
}

多个图例

export function mockLegendColorSize(): G2Spec {
  return {
    type: 'legends',
    padding: 'auto',
    height: 100,
    scale: {
      color: {
        type: 'ordinal',
        domain: ['a', 'b'],
        range: ['steelblue', 'orange'],
      },
      size: {
        type: 'linear',
        domain: [0, 10],
        range: [0, 100],
      },
    },
  };
}

多轴图的图例

export function weatherLineMultiAxesLegend(): G2Spec {
  const labelByValue = {
    '#EE6666': 'Temperature',
    '#5470C6': 'Evaporation',
    '#91CC75': 'Precipitation',
  };
  const markerByValue = {
    '#EE6666': 'line',
    '#5470C6': 'rect',
    '#91CC75': 'line',
  };
  return {
    type: 'view',
    data: weather,
    children: [
      // ...
      // 添加新的图例
      {
        type: 'legends',
        scale: {
          color: {
            type: 'ordinal',
            independent: true,
            domain: ['#EE6666', '#91CC75', '#5470C6'],
            range: ['#EE6666', '#91CC75', '#5470C6'],
          },
        },
        itemMarker: (d) => markerByValue[d],
        labelFormatter: (d) => labelByValue[d],
      },
    ],
  };
}

[Aarebecca]

可以有简单一些的使用方式吗，比如不依赖比例尺进行创建

[pearmini]

可以有简单一些的使用方式吗，比如不依赖比例尺进行创建

主要有以下考虑：

• chart.legends 本生就是 color，size 等通道的可视化。
• 通过比例尺创建的图例才能响应交互。
• 和 chart.axisX 以及 chart.axisY 使用保持一致。