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

.then((data) => {
    const areaPlot = new Area(document.getElementById('container'), {
      title: {
        visible: true,
        text: '基础面积图 - 缩略轴',
      },
      data,
      xField: '城市',
      xAxis: {
        visible: true,
        autoHideLabel: true,
      },
      yField: '销售额',
      interactions: [
        {
          type: 'slider',
          cfg: {
            start: 0.5,

.then((data) => {
    const areaPlot = new Area(document.getElementById('container'), {
      data,
      width: 700,
      height: 500,
      padding: 'auto',
      xField: 'Date',
      yField: 'scales',
      xAxis: {
        type: 'dateTime',
        tickCount: 5,
      },
    });

    areaPlot.render();
  });

.then((data) => {
    const areaPlot = new Area(document.getElementById('container'), {
      title: {
        visible: true,
        text: '基础面积图 - 滚动条',
      },
      data,
      xField: '城市',
      xAxis: {
        visible: true,
        autoHideLabel: true,
      },
      yField: '销售额',
      interactions: [
        {
          type: 'scrollbar',
          cfg: {},
        },

mounted() {
    this.antv = new Area(this.attrs.canvasId, {
      data: this.attrs.data,
      ...this.attrs.config
    });

    this.antv.render();
  },
  updated() {