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

.then((data) => {
    const columnPlot = new Column(document.getElementById('container'), {
      title: {
        visible: true,
        text: '基础柱状图-滚动条',
      },
      description: {
        visible: true,
        text: '当数据过多时，推荐使用滚动条一次只浏览一部分数据。',
      },
      forceFit: true,
      data,
      padding: 'auto',
      data,
      xField: '城市',
      xAxis: {
        visible: true,
        autoHideLabel: true,

},
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础柱状图-图形标签',
  },
  description: {
    visible: true,
    text: '基础柱状图图形标签默认位置在柱形上部。',
  },
  forceFit: true,
  data,
  padding: 'auto',
  data,
  xField: 'type',
  yField: 'sales',
  meta: {
    type: {

},
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础柱状图-图形标签位置',
  },
  description: {
    visible: true,
    text: '基础柱状图的图形标签位置可以指定为top-柱形上部，middle-柱形中心，bottom-柱形底部。',
  },
  forceFit: true,
  data,
  padding: 'auto',
  data,
  xField: 'type',
  yField: 'sales',
  meta: {
    type: {

},
  {
    year: '1997',
    value: 17,
  },
  {
    year: '1998',
    value: 29,
  },
  {
    year: '1999',
    value: 33,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '设置active状态',
  },
  description: {
    visible: true,
    text: '设置单值active状态。',
  },
  data,
  xField: 'year',
  yField: 'value',
});
columnPlot.render();
columnPlot.setActive(
  { name: 'year', exp: '1994' },
  {

},
  {
    type: '进口食品',
    sales: 38,
  },
  {
    type: '食品饮料',
    sales: 38,
  },
  {
    type: '家庭清洁',
    sales: 38,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础柱状图',
  },
  forceFit: true,
  data,
  padding: 'auto',
  data,
  xField: 'type',
  yField: 'sales',
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额(万)',

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

},
  {
    year: '1997',
    value: 17,
  },
  {
    year: '1998',
    value: 29,
  },
  {
    year: '1999',
    value: 33,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '设置active状态',
  },
  description: {
    visible: true,
    text: '批量（多值）设置active状态。',
  },
  data,
  xField: 'year',
  yField: 'value',
});
columnPlot.render();
columnPlot.setActive(
  {
    name: 'year',

},
  {
    year: '1997',
    value: 17,
  },
  {
    year: '1998',
    value: 29,
  },
  {
    year: '1999',
    value: 33,
  },
];

const columnPlot = new Column(document.getElementById('container'), {
  title: {
    visible: true,
    text: '手动设置图表内边距',
  },
  description: {
    visible: true,
    text: 'G2Plot图表默认自动计算图表内边距，但用户可以通过padding配置项手动设置。',
  },
  data,
  xField: 'year',
  yField: 'value',
  padding: [100, 100, 100, 100],
});

columnPlot.render();

.then((data) => {
    const columnPlot = new Column(document.getElementById('container'), {
      title: {
        visible: true,
        text: '基础柱状图-缩略轴',
      },
      description: {
        visible: true,
        text: '缩略轴 (slider) 交互适用于数据较多，用户希望关注数据集中某个特殊区间的场景。',
      },
      forceFit: true,
      data,
      padding: 'auto',
      data,
      xField: '城市',
      xAxis: {
        visible: true,
        autoHideLabel: true,