蚂蚁可视化图表AntV day5

image.png

进入AntV官网后，我们选择G2。

安装AntV

cnpm install @antv/g2 --save
在home.vue里import G2 from '@antv/g2';
然后在export default里添加相应的样式即可。

export default {
  mounted() {
    const data = [
      { genre: "Sports", sold: 275 },
      { genre: "Strategy", sold: 115 },
      { genre: "Action", sold: 120 },
      { genre: "Shooter", sold: 350 },
      { genre: "Other", sold: 150 }
    ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
    // Step 1: 创建 Chart 对象
    const chart = new G2.Chart({
      container: "c1", // 指定图表容器 ID
      width: 600, // 指定图表宽度
      height: 300 // 指定图表高度
    });
    // Step 2: 载入数据源
    chart.source(data);
    // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
    chart
      .interval()
      .position("genre*sold")
      .color("genre");
    // Step 4: 渲染图表
    chart.render();
  },

  components: {
    MyCard
  }
};

最后就可以使用该图表了。

<div id="c1"></div>

效果图:

image.png

当我们要使用多个样式的时候，推荐把初始化图表的函数封装起来，如下图:

image.png

export default {
  mounted() {
    this.initc2();
    this.initc1();
  },
  methods: {
    initc2() {
      const data = [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 }
      ]; // G2 对数据源格式的要求，仅仅是 JSON 数组，数组的每个元素是一个标准 JSON 对象。
      // Step 1: 创建 Chart 对象
      const chart = new G2.Chart({
        container: "c2", // 指定图表容器 ID
        width: 600, // 指定图表宽度
        height: 400 // 指定图表高度
      });
      // Step 2: 载入数据源
      chart.source(data);
      // Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴
      chart
        .interval()
        .position("genre*sold")
        .color("genre");
      // Step 4: 渲染图表
      chart.render();
    },
    initc1() {
      var data = [
        {
          year: "2001",
          population: 41.8
        },
        {
          year: "2002",
          population: 38
        },
        {
          year: "2003",
          population: 33.7
        },
        {
          year: "2004",
          population: 30.7
        },
        {
          year: "2005",
          population: 25.8
        },
        {
          year: "2006",
          population: 31.7
        },
        {
          year: "2007",
          population: 33
        },
        {
          year: "2008",
          population: 46
        },
        {
          year: "2009",
          population: 38.3
        },
        {
          year: "2010",
          population: 28
        },
        {
          year: "2011",
          population: 42.5
        },
        {
          year: "2012",
          population: 30.3
        }
      ];

      var chart = new G2.Chart({
        container: "c1",
        height: 600,
        width: 900
      });
      chart.source(data);
      chart.coord("polar");
      chart.legend({
        position: "right",
        offsetY: -window.innerHeight / 2 + 180,
        offsetX: -140
      });
      chart.axis(false);
      chart
        .interval()
        .position("year*population")
        .color("year", G2.Global.colors_pie_16)
        .style({
          lineWidth: 1,
          stroke: "#fff"
        });
      chart.render();
    }
  },
  components: {
    MyCard
  }
};

然后再调用以下即可:

image.png

这里再次用到了iView提供的Raw布局。

 <Row type="flex" justify="center" align="middle" class="code-row-bg">
      <Col span="8">
        <div id="c2"></div>
      </Col>
      <Col span="16">
        <div id="c1"></div>
      </Col>
    </Row>

效果图:

image.png