G2分组柱状图配置

<script>
import * as G2 from "@antv/g2";
export default {
  data() {
    return {
      columnData: [
        { name: "访问人次", type: "花积分", val: 1809 },
        { name: "访问人次", type: "招商银行", val: 288 },
        { name: "访问人次", type: "其他", val: 393 },
        { name: "访问人数", type: "花积分", val: 124 },
        { name: "访问人数", type: "招商银行", val: 232 },
        { name: "访问人数", type: "其他", val: 345 },
      ],
    };
  },
  mounted() {
    this.columnChart();
  },
  methods: {
    columnChart() {
      const that = this;
      const columnPlot = new G2.Chart({
        container: "columnC",
        padding: [40, 30, 30, 50],
        autoFit: true,
        //width: window.innerWidth - 1000,
        height: 400,
      });
      columnPlot.data(that.columnData);
      columnPlot
        .interval()
        .position("type*val")
        .color("name")
        .adjust([
          {
            type: "dodge",
            marginRatio: 0,
          },
        ]);
      columnPlot.tooltip({
        shared: true,
        crosshairs: true,
      });
      columnPlot.legend({
        position: "top-left",
      });
      columnPlot.axis("val", {
        label: {
          textStyle: {
            fill: "#aaaaaa",
          },
          formatter: function formatter(text) {
            let str = text;
            if (Number(str) >= 1000) {
              str = Number(text) / 1000 + "K";
            }
            return str;
          },
        },
      });
      columnPlot.render();
    },
  },
};
</script>