建立第一個G2圖表

不敗王者發表於2019-08-12

Step1：引進G2指令碼

方法一：引入線上指令碼

<script src="https://gw.alipayobjects.com/os/lib/antv/g2/3.4.10/dist/g2.min.js"></script>

方法二：引入本地指令碼

<script src="./g2.js"></script>
//src為本地G2指令碼所在相對路徑

方法三：通過npm安裝

npm install @antv/g2 --save

　　成功安裝完成之後，即可使用 import 或 require 進行引用。

import G2 from '@antv/g2';
//const G2=require("@antv/g2");

const chart = new G2.Chart({
  container: 'c1',
  width: 600,
  height: 300
});

使用該方式進行載入時可以和Echarts一樣按需引入AntV圖表和元件。

預設使用 require("@antv/g2") 得到的是已經載入了所有圖表和元件的 AntV 包，因此體積會比較大，如果在專案中對體積要求比較苛刻，也可以和Echarts一樣只按需引入需要的模組。

以下例子中Core核心模組必須匯入，該包只包含核心的圖形語法處理邏輯，具體包含如下：

  • Scale：度量，僅包含基礎的 Linear、Cat 以及 Time 這三種型別
  • G：繪製引擎
  • Animate：動畫配置
  • Chart：圖表入口類
  • Global：全域性變數
  • Shape：管理各種型別的shape
  • Util: 通用工具類
//必須引入核心包core
const Core=require("@antv/g2/lib/core");
require("@antv/g2/lib/geom/line");
require("@antv/g2/lib/geom/point");
var data = [{
    year: '1991',
    value: 3
}, {
    year: '1992',
    value: 4
}, {
    year: '1993',
    value: 3.5
}, {
    year: '1994',
    value: 5
}, {
    year: '1995',
    value: 4.9
}, {
    year: '1996',
    value: 6
}, {
    year: '1997',
    value: 7
}, {
    year: '1998',
    value: 9
}, {
    year: '1999',
    value: 13
}];
var chart=new G2.Chart({
    container:"root",
    forceFit:true,
});
chart.source(data);
chart.line().position("year*value");
chart.point().position("year*value").size(4).shape('circle').style({
    stroke: '#fff',
    lineWidth: 1
});
chart.render();

例如上面的例子中只用到了點圖和折線圖，因此引入的時候可以只引入這兩個模組，從而將打包體積從563KB減小到432KB

可以按需引入的模組見https://github.com/antvis/g2/tree/master/src

注意：使用該種方式引入指令碼需要使用webpack工具打包才可執行，Webpack 是目前比較流行的模組打包工具，你可以在使用 webpack 的專案中輕鬆的引入和打包AntV，這裡假設你已經對 webpack 具有一定的瞭解並且在自己的專案中使用。

 Step2：建立div圖表容器

在頁面的body部分建立一個div

<div id="root"></div>

注意點：

1.其中容器標籤不一定是div標籤，但必須是能包含div的標籤，至於哪些標籤能夠包含div標籤，可以參考標籤巢狀問題總結

2.容器標籤中也不一定必須繫結id，繫結class等也可以，只要能獲取到該元素就行，但相對來說繫結id最為合適，因為一般每幅圖都是獨一無二的，但如果需要多副相同的圖時，需要寫重複程式碼，所以這裡可以提個需求：讓容器允許接收元素陣列，而不是單單某一個元素。。

Step3. 編寫圖表繪製程式碼

 建立 div 容器後，我們就可以進行簡單的圖表繪製:

  1. 建立 Chart 圖表物件，指定圖表所在的容器 ID、指定圖表的寬高、邊距等資訊；　　　

var chart=new G2.Chart({
        container:"root",
        forceFit:true,
        width:500,
        height:500
    });//建立空圖表

  1. 載入圖表資料來源；

chart.source(data)//載入資料來源

  1. 使用圖形語法進行圖表的繪製；

chart.line().position("year*value");//選擇展現資料的型別

  1. 渲染圖表；

chart.render();//渲染圖表

最後的原始碼和效果圖如下：

var data = [{
        year: '1991',
        value: 3
    }, {
        year: '1992',
        value: 4
    }, {
        year: '1993',
        value: 3.5
    }, {
        year: '1994',
        value: 5
    }, {
        year: '1995',
        value: 4.9
    }, {
        year: '1996',
        value: 6
    }, {
        year: '1997',
        value: 7
    }, {
        year: '1998',
        value: 9
    }, {
        year: '1999',
        value: 13
    }];//資料
    var chart=new G2.Chart({
        container:"root",
        forceFit:true,
    });//建立空圖表
    chart.source(data);//選擇資料來源
    chart.line().position("year*value");//選擇展現資料的型別
    chart.point().position("year*value").size(4).shape('circle').style({
        stroke: '#fff',
        lineWidth: 1
    });
    chart.render();//將資料渲染到圖表上

相關文章