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

import { Bar } from '@antv/g2plot';

const data = [
  { 地区: '华东', 销售额: 4684506.442 },
  { 地区: '中南', 销售额: 4137415.0929999948 },
  { 地区: '东北', 销售额: 2681567.469000001 },
  { 地区: '华北', 销售额: 2447301.017000004 },
  { 地区: '西南', 销售额: 1303124.508000002 },
  { 地区: '西北', 销售额: 815039.5959999998 },
];

const barPlot = new Bar(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础条形图',
  },
  forceFit: true,
  data,
  xField: '销售额',
  yField: '地区',
  xAxis: {
    formatter: (v) => Math.round(v / 10000) + '万',
  },
  label: {
    visible: true,
    position: 'middle', // options: left / middle / right
  },
});

load_error_endpoint_chart(data){
      
      var source = []; 

      data.endpoint[2].forEach((item) => {
        source.push({
          key: item.key,
          value: item.value,
        });
      });  
     
      if (this.error_endpoint_chart == null) {
        this.error_endpoint_chart = new Bar(
          document.getElementById("error_endpoint_chart"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.ErrorEndpoint,
            },
            yAxis: {
              visible: true,
            },
            forceFit: true,
            data: source,
            xField: "value",
            yField: "key",
            color: ["#FF6A88"],
            label: {
              visible: true,

load_service_call(response) {

      var source = []; 

      response.body.data.top[0].forEach((item) => {
        source.push({
          key: item.key,
          value: item.value,
        });
      }); 

     
      if (this.service_call_chart == null) {
        this.service_call_chart = new Bar(
          document.getElementById("service-call"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.ServiceLoad,
            },
            yAxis: {
              visible: true,
            },
            //barSize:2,
            forceFit: true,
            data: source,
            xField: "value",
            yField: "key",
            label: {
              visible: true,

load_instance_call_chart(data){

       var source = [];  

      data.instance[0].forEach((item) => {
        source.push({
          key: item.key,
          value: item.value,
        });
      });  
     
      if (this.instance_call_chart == null) {
        this.instance_call_chart = new Bar(
          document.getElementById("instance_call_chart"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.InstanceCall,
            },
            yAxis: {
              visible: true,
            },
            forceFit: true,
            data: source,
            xField: "value",
            yField: "key",
            label: {
              visible: true,
              adjustPosition: true,

load_slow_endpoint_chart(data) {

      var source = []; 

      data.endpoint[1].forEach((item) => {
        source.push({
          key: item.key,
          value: item.value,
        });
      });  
     
      if (this.slow_endpoint_chart == null) {
        this.slow_endpoint_chart = new Bar(
          document.getElementById("slow_endpoint_chart"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.SlowEndpoint,
            },
            yAxis: {
              visible: true,
            },
            forceFit: true,
            data: source,
            xField: "value",
            yField: "key",
            color: ["#9599E2"],
            label: {
              visible: true,

import { Bar } from '@antv/g2plot';

const data = [
  { 地区: '华东', 销售额: 4684506.442 },
  { 地区: '中南', 销售额: 4137415.0929999948 },
  { 地区: '东北', 销售额: 2681567.469000001 },
  { 地区: '华北', 销售额: 2447301.017000004 },
  { 地区: '西南', 销售额: 1303124.508000002 },
  { 地区: '西北', 销售额: 815039.5959999998 },
];

const barPlot = new Bar(document.getElementById('container'), {
  title: {
    visible: true,
    text: '基础条形图',
  },
  forceFit: true,
  data,
  xField: '销售额',
  yField: '地区',
  xAxis: {
    formatter: (v) => Math.round(v / 10000) + '万',
  },
});

barPlot.render();

load_error_service(response) {

      var source = []; 
      response.body.data.top[2].forEach((item) => {
        source.push({
          key: item.key,
          ms: item.value,
        });
      });

      if (this.error_service_chart == null) {
        this.error_service_chart = new Bar(
          document.getElementById("error-service"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.ErrorService,
            },
            yAxis: {
              visible: true,
            },
            //barSize:2,
            forceFit: true,
            data: source,
            xField: "ms",
            yField: "key",
            color: ["#FF6A88"],
            label: {

load_error_instance_chart(data){
       
      var source = []; 

      data.instance[2].forEach((item) => {
        source.push({
          key: item.key,
          value: item.value,
        });
      });  
     
      if (this.error_instance_chart == null) {
        this.error_instance_chart = new Bar(
          document.getElementById("error_instance_chart"),
          {
            title: {
              visible: true,
              text: this.$store.state.lang.ErrorInstance,
            },
            yAxis: {
              visible: true,
            },
            forceFit: true,
            data: source,
            xField: "value",
            yField: "key",
            color: ["#FF6A88"],
            label: {
              visible: true,