antv是螞蟻金服所提供的一套全新的視圖可視化圖表庫, 與echart雖然都為圖表庫, 但是從實質出發還是存在一定的差異性, echarts是以圖表為主, 而antv則是以圖形出發。echarts相對於antv來說是比較成熟的一套圖表庫, 使用方便、圖表種類多， 也是比較容易上手的, 遇到問題網上的解決方式也有很多，而antv是以數據可視化底層引擎，以數據驅動， 相對於echart更具有拓展性和靈活性。
antv針對移動端和PC端有兩套不同的圖表庫， PC端是G2， 移動端是F2。echarts雖然沒有區分PC端和移動端，一套代碼也可以完成PC端和移動端，但是需要自己手動處理一些兼容性問題。
echart圖表部分是固定死的， 如果要制作綜合性的圖表會比較麻煩，而antv將所有數據改動和配置綜合在一個方法內， 制作綜合性圖表會相對於echarts更加靈活。antv將交互任務分為了三個層次: "數據獲取"、“信息加工”、“知識轉換”，更加注重了圖表的交互性，並且提供了很豐富的API， 在處理交互時比echarts更有優勢。
antv視圖可視化設計是基於Ant Design設計體系所衍生的, 個人覺得antv的圖表界面也是略勝一籌的
antv G2認識
G2 是基於<The Grammar of Graphics>這套用來描述所有統計圖層深層特性的語法規則一書所制作的數據可視化底層引擎，以數據驅動， 自底向上組織最基本的元素形成更高級的元素。提供了圖形語法、交互語法、view視圖、圖表組成等方法，具有高度的易用性和擴展性。
antv G2快速上手
安裝
npm安裝
npm 安裝命令
npm install @antv/g2 --save
安裝后可用過import 或者require進行引入
//import 引入
import G2 from '@antv/g2';
//require引入
const G2 = require('@antv/g2');
瀏覽器引入
在線資源引入
<!-- 引入在線資源, version需要替換為g2的版本號 -->
<script src="https://gw.alipayobjects.com/os/lib/antv/g2/{{version}}/dist/g2.min.js"></script>
或者
通過 https://unpkg.com/@antv/g2@4.0.15/dist/g2.min.js 此鏈接將js代碼復制到本地引入.
使用
- 需要為圖表准備一個容器
<div id="c1"></div>
- 創建圖表基本信息
const chart = new G2.Chart({
//圖表容器ID
container:"c1",
//圖表寬度: 數字類型
width:800,
//圖表高度: 數字類型
height:500
//或者使用autoFit, 圖表自適應容器高度, 默認為fasle
//如果用戶已設置高度, 則以設置的高度為准
autoFit: true
})
- 設置圖表信息
const list = const data = [
{ name: '張三', score: 50 },
{ name: '李四', score: 90 },
{ name: '王五', score: 85 },
{ name: '趙六', score: 30 }
];
- 載入圖表
chart.data(list);
- 繪制圖形
//折線圖
chart.interval().position('name*score');
- 渲染圖層
chart.render();
成果圖如下:
【免責聲明：本文圖片及文字信息均由千鋒重慶web前端培訓小編轉載自網絡，旨在分享提供閱讀，版權歸原作者所有，如有侵權請聯系我們進行刪除。】