关于 vue2.0 的 antV 使用举例

Html 中的代码，只需要简单的定义一个容器：

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

script 中的代码：

export default {
  data() {
    return {
      //引入数据。G2Plot 的数据源格式是 JSON 数组，数组的每个元素是一个标准 JSON 对象，部分图表除外。
      data: [
        { type: "家具家电", sales: 38 },
        { type: "粮油副食", sales: 52 },
        { type: "生鲜水果", sales: 61 },
        { type: "美容洗护", sales: 145 },
        { type: "母婴用品", sales: 48 },
        { type: "进口食品", sales: 38 },
        { type: "食品饮料", sales: 38 },
        { type: "家庭清洁", sales: 38 },
      ],
    };
  },

  methods: {
    CreateLine() {
      const bar = new Bar("container", {
        data: this.data,                //重点，官网给的栗子只用了data
        xField: "sales",
        yField: "type",
        meta: {
          type: {
            alias: "类别",
          },
          sales: {
            alias: "销售额",
          },
        },
        minBarWidth: 20, //柱子的最大宽度
        maxBarWidth: 20, //柱子的最大宽度
      });

      bar.render();                //渲染
    },
  },

  mounted() {
    this.CreateLine();
  },
};
</script>