关于 vue2.0 的 antV 使用举例

最新推荐文章于 2024-10-22 18:53:29 发布

思旧人

最新推荐文章于 2024-10-22 18:53:29 发布

阅读量2.1k

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/jiusiw/article/details/126361548

版权

这篇博客展示了如何在HTML中使用G2Plot库创建一个柱状图。通过定义一个容器并设置数据源，然后在script中初始化并渲染柱状图，详细步骤包括设置数据、xField和yField、元数据以及柱子的宽度。

摘要由CSDN通过智能技术生成

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>