G2 是一套基于圖形語法理論的可視化底層引擎，以數據驅動，提供圖形語法與交互語法，具有高度的易用性和擴展性使用 G2，可以無需關注圖表各種繁瑣的實現細節，一條語句即可使用 Canvas 或 SVG 構建出各種各樣的可交互的統計圖表

G2圖表官網地址https://antv.gitee.io/zh

G2圖標詳細開發手冊https://antv-g2.gitee.io/zh/docs/api/general/chart

第一步：安裝G2依賴包

npm instal @antv/g2

第二步：在繪圖前需要為 G2 準備一個 DOM 容器

<div id='webInfo'></div>

第三步：引入

import G2 from '@antv/g2';

第四步：在mounted中定義

可先在全局定義let chart = null;

const chart = new G2.Chart({})chart = new G2.Chart({ container: 'webInfo',//指定圖表容器 forceFit: true,//強制配合 width: 600, // 指定圖表寬度 height: 306,//高度 padding: [20, 30, 30, 50],//內邊距 })

第五步：載入數據源

/馬上更新圖表 / chart.changeData(chartData) /僅僅是更新數據，而不需要馬上更新圖表/ chart.source(chartData) /需要更新圖表時調用 / chart.repaint()

擴展清除圖形語法

/清理所有/chart.clear(); 模板中使用完整代碼（柱狀圖）

<template> <div id='c1'></div></template><script> export default {name: 'spectaculars',data(){ return{basicColumnChartProp:{ data:[{ genre: ’Sports’, sold: 275 },{ genre: ’Strategy’, sold: 115 },{ genre: ’Action’, sold: 120 },{ genre: ’Shooter’, sold: 350 },{ genre: ’Other’, sold: 150 }], container:’c1’, width:700, height:600}, }},methods:{ test(){const data = this.basicColumnChartProp.data;const chart = new G2.Chart({ container: this.basicColumnChartProp.container, width : this.basicColumnChartProp.width, height : this.basicColumnChartProp.height});chart.source(data);chart.interval().position(’genre*sold’).color(’genre’)chart.render(); }}, mounted() { this.test();}, }</script>在補充一下世界地圖

（當初項目需求找了G2的地圖,感覺API文檔有些東西沒說明白,這里記錄一下）

<template> <div id='c1'></div></template><script> const DataSet = require(’@antv/data-set’); export default {name: 'spectaculars',data(){ return{basicColumnChartProp:{ container:’c1’,}, }},methods:{ test(){ fetch(’src/views/dataCenter/data/world/countries.geo.json’) .then(res => res.json()) .then(mapData => {const chart = new G2.Chart({ container:this.basicColumnChartProp.container, forceFit: true, height:700, padding: [10,10]});chart.tooltip({ showTitle: false});// 同步度量chart.scale({ longitude: { sync: true }, latitude: { sync: true }});chart.axis(false);chart.legend(’trend’, { position: ’left’}); // 繪制世界地圖背景const ds = new DataSet();const worldMap = ds.createView(’back’) .source(mapData, { type: ’GeoJSON’ });const worldMapView = chart.view();worldMapView.source(worldMap);worldMapView.tooltip(false);worldMapView.polygon().position(’longitude*latitude’).style({ fill: ’#fff’, stroke: ’#ccc’, lineWidth: 1}); const userData = [ { name: ’Russia’, value: 86.8 }, { name: ’China’, value: 106.3 }, { name: ’Japan’, value: 94.7 }, { name: ’Mongolia’, value: 98 }, { name: ’Canada’, value: 98.4 }, { name: ’United Kingdom’, value: 97.2 }, { name: ’United States of America’, value: 98.3 }, { name: ’Brazil’, value: 96.7 }, { name: ’Argentina’, value: 95.8 }, { name: ’Algeria’, value: 101.3 }, { name: ’France’, value: 94.8 }, { name: ’Germany’, value: 96.6 }, { name: ’Ukraine’, value: 86.3 }, { name: ’Egypt’, value: 102.1 }, { name: ’South Africa’, value: 101.3 }, { name: ’India’, value: 107.6 }, { name: ’Australia’, value: 99.9 }, { name: ’Saudi Arabia’, value: 130.1 }, { name: ’Afghanistan’, value: 106.5 }, { name: ’Kazakhstan’, value: 93.4 }, { name: ’Indonesia’, value: 101.4 }];const userDv = ds.createView() .source(userData) .transform({ geoDataView: worldMap, field: ’name’, type: ’geo.region’, as: [ ’longitude’, ’latitude’ ] }) .transform({ type: ’map’, callback: obj => { // obj.trend = obj.value obj.trend = (obj.value > 100) ? ’男性更多’ : ’女性更多’; return obj; } });const userView = chart.view();userView.source(userDv, { trend: { alias: ’每100位女性對應的男性數量’ }});userView.polygon() .position(’longitude*latitude’) .color(’trend’, [ ’#F51D27’, ’#0A61D7’ ]) .opacity(’value’) .tooltip(’name*trend’) .animate({ leave: { animation: ’fadeOut’ } });chart.render(); }) },},mounted() { this.test();}, }</script> fetch這個地方官網引入的是文件目錄,不是具體的json文件,使用的時候找不到文件 fetch引入的json這里是本地的,其次G2官網提供的遠程githup地址獲取不到這個json文件 fetch引入json文件的路徑，不是你當前文件到該json的路徑，而是index.html到該json文件的地址

到此這篇關于VUE引入使用G2圖表的實現的文章就介紹到這了,更多相關VUE使用G2圖表內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！