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

.then((data) => {
    const plot = new StackArea(document.getElementById('container'), {
      title: {
        visible: true,
        text: 'The causes of CO2 emissions',
      },
      padding: 'auto',
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category',
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),

.then((data) => {
    const areaPlot = new StackArea(document.getElementById('container'), {
      title: {
        visible: true,
        text: '堆叠面积图',
      },
      data,
      xField: 'date',
      yField: 'value',
      stackField: 'country',
      xAxis: {
        type: 'dateTime',
        tickCount: 5,
      },
      legend: {
        visible: true,
        position: 'right-top',
      },

.then((data) => {
    const areaPlot = new StackArea(document.getElementById('container'), {
      title: {
        visible: true,
        text: '堆叠面积图 - lineLabel',
      },
      description: {
        visible: true,
        text: '当label类型设置为line时，label与面积区域尾端顶部对齐。',
      },
      padding: [20, 100, 100, 50],
      data,
      xField: 'date',
      yField: 'value',
      stackField: 'country',
      xAxis: {
        type: 'dateTime',
        tickCount: 5,

.then((data) => {
    const areaPlot = new StackArea(document.getElementById('container'), {
      title: {
        visible: true,
        text: '堆叠面积图-areaLabel',
      },
      description: {
        visible: true,
        text:
          '堆叠面积图中，将label type设置为area时，label显示在堆叠区域内，使用户能够更容易的通过视觉将label和对应图形产生联系。autoScale配置项设置为true时，label会自适应堆叠区域的大小。',
      },
      data,
      xField: 'date',
      yField: 'value',
      stackField: 'country',
      xAxis: {
        type: 'dateTime',
        tickCount: 5,