antV的Column组件二次封装，便于使用

简单封装，便于复用。话不多说，上代码！

<template>
  <div :id="id" class="container">
  </div>
</template>

<script>
import { Column } from '@antv/g2plot';

export default {
  props: {
    data: {
      type: Array,
      default: () => ([
        {
          type: '家具家电',
          sales: 38
        },
        {
          type: '粮油副食',
          sales: 52
        },
        {
          type: '生鲜水果',
          sales: 61
        },
        {
          type: '美容洗护',
          sales: 145
        },
        {
          type: '母婴用品',
          sales: 48
        },
        {
          type: '进口食品',
          sales: 38
        },
        {
          type: '食品饮料',
          sales: 38
        },
        {
          type: '家庭清洁',
          sales: 38
        }
      ])
    }
  },
  data() {
    return {
      chart: null,
      id: Math.random(10000000) + 'chart'
    };
  },
  watch: {
    data(v) {
      console.log(88);
      if (this.chart) {
        this.chart.changeData(v);
      }
    }
  },
  mounted() {
    const data = this.data;
    this.chart = new Column(this.id, {
      data,
      xField: 'type',
      yField: 'sales',
      label: {
        // 可手动配置 label 数据标签位置
        position: 'top', // 'top', 'bottom', 'middle',
        // 配置样式
        style: {
          fill: '#FFFFFF',
          opacity: 0.6
        }
      },
      xAxis: {
        label: {
          autoHide: true,
          autoRotate: false
        }
      },
      meta: {
        type: {
          alias: '类别'
        },
        sales: {
          alias: '销售额'
        }
      }
    });
    this.chart.render();
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>