How to use the @antv/g2plot.Scatter function in @antv/g2plot

.then((data) => {
    const scatterPlot = new Scatter(document.getElementById('container'), {
      title: {
        visible: true,
        text: '散点图颜色映射',
      },
      description: {
        visible: true,
        text: '通过colorField配置项定义颜色映射字段，通过color配置项传入色值',
      },
      data,
      xField: 'Revenue (Millions)',
      yField: 'Rating',
      colorField: 'Genre',
      color: ['#d62728', '#2ca02c', '#000000', '#9467bd', '#ffd500', '#1f77b4', '#00518a', '#ffbc69', '#9bd646'],
      pointStyle: {
        fillOpacity: 1,
      },

.then((data) => {
    const scatterPlot = new Scatter(document.getElementById('container'), {
      title: {
        visible: true,
        text: '基础散点图',
      },
      data,
      xField: 'Revenue (Millions)',
      yField: 'Rating',
      xAxis: {
        visible: true,
        min: -5,
      },
    });
    scatterPlot.render();
  });

{ x: 19, y: 6.682 },
  { x: 20, y: 7.013 },
  { x: 21, y: 6.82 },
  { x: 22, y: 6.647 },
  { x: 23, y: 6.951 },
  { x: 24, y: 7.121 },
  { x: 25, y: 7.143 },
  { x: 26, y: 6.914 },
  { x: 27, y: 6.941 },
  { x: 28, y: 7.226 },
  { x: 29, y: 6.898 },
  { x: 30, y: 7.392 },
  { x: 31, y: 6.938 },
];

const scatterPlot = new Scatter(document.getElementById('container'), {
  title: {
    visible: true,
    text: '为散点图加入趋势线',
  },
  description: {
    visible: true,
    text: '通过type配置项选择趋势线类型，showConfidence配置项决定是否同时绘制置信区间曲线',
  },
  padding: 'auto',
  data: data,
  xField: 'x',
  yField: 'y',
  pointSize: 5,
  pointStyle: {
    stroke: '#777777',
    lineWidth: 1,