g2 plot柱狀圖的簡單使用

目前圖表類插件使用比較廣泛的有百度的Echarts和阿里的g2，記錄下最近用g2 plot做的一個柱狀圖

<template>
  <div>
    <div id="mycharts"></div>
  </div>
</template>
<script>
import { Column } from "@antv/g2plot";
export default {
  data() {
    return {
      chartData: [
        { classify: "vivo", num: 12345 },
        { classify: "oppo", num: 54321 },
        { classify: "apple", num: 23457 },
        { classify: "xiaomi", num: 66666 },
        { classify: "huawei", num: 54321 },
      ],
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const columnChart = new Column("mycharts", {
        data: this.chartData,
        xField: "classify",
        yField: "num",
        padding: 60,
        // padding: [10, 20, 30, 40],
        label: {
          position: "top",
          formatter: (item) => {
            return item.num.toLocaleString();
          },
        },
        seriesField: "classify",
        legend: false,
        // color:[],
        minColumnWidth: 20,
        maxColumnWidth: 60,
      });
      columnChart.render();

    },
  },
};
</script>
<style scoped>
#mycharts {
  width: 70%;
  margin: 50px auto;
}
</style>

label部分使用了formatter對數字進行了特殊處理，使每三個數字以逗號分隔。

可以通過color屬性來自定義顏色，padding也可以用一個數組來設置四個邊的數值。

效果如下：