Antv 挺好用,随手写笔记,在Vue中用Antv G2

  • • 发表于2018-12-28 03:59:21.0
  • • 作者 小徐同学
  • • 2067 次浏览
  • • 0 条评论
  • • 最后编辑时间 2018-12-28 04:18:43.0
  • • 来自 [笔 记]

原创声明:本文为作者原创,未经允许不得转载,经授权转载需注明作者和出处

用过百度的Echart,历史包袱沉重,不如这个好用,也比那个轻量
官网:https://antv.alipay.com/zh-cn/g2/3.x/demo/index.html
npm安装,jq也很简单
npm install @antv/g2 --save
效果图

完整Vue代码如下
<template>
  <el-row :gutter="20">
    <el-col :span="12">
      <div class="grid-content bg-purple">
        <div id="c1"></div>
      </div>
    </el-col>
    <el-col :span="12">
      <div class="grid-content bg-purple">
          <div id="mountNode"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script type="text/ecmascript-6">
import G2 from "@antv/g2";
import pizz from "../assets/json/pizza.json";
export default {
  data() {
    return {
      loading: false,
      data1: [
        { genre: "Sports", sold: 275 },
        { genre: "Strategy", sold: 115 },
        { genre: "Action", sold: 120 },
        { genre: "Shooter", sold: 350 },
        { genre: "Other", sold: 150 }
      ],
      pizzJson: []
    };
  },
  created() {},
  mounted() {
    this.initTable1();
    this.pizzJson = pizz;
    this.initPizza()
  },
  watch: {},
  methods: {
    initTable1() {
      // 指定图表容器 ID
      const chart = new G2.Chart({
        container: "c1",
        // width: 600,
        height: 400
      });
      // Step 2: 载入数据源
      chart.source(this.data1);
      // Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
      chart
        .interval()
        .position("genre*sold")
        .color("genre");
      // Step 4: 渲染图表
      chart.render();
    },
    initPizza() {
      let data = this.pizzJson;
    //   data.forEach(function(obj) {
    //     obj.type = "1";
    //   });
      const chart = new G2.Chart({
        container: "mountNode",
        forceFit: true,
        height: 400,
        //height: window.innerHeight,
        padding: [40, 40, 40, 40]
      });
      chart.source(data, {
        type: {
          range: [0, 1]
        }
      });
      chart.coord("polar");
      chart.legend(false);
      chart.axis("clarity", {
        grid: {
          align: "center",
          lineStyle: {
            lineDash: [0, 0]
          }
        }
      });
      chart
        .pointJitter()
        .position("clarity*type")
        .color("clarity")
        .shape("circle")
        .opacity(0.65);
      chart.render();
    }
  }
};
</script>
评论区(共0条评论)
0条评论
Ctrl+Enter
作者

Michael

小徐同学

帖子:40 回复:0

全栈搬运工

作者详情》
Top