快捷導航

vue結(jié)合AntV?G2的使用踩坑記錄

更新時間：2022年04月28日 10:46:35 作者：我是劉拾貳

這篇文章主要介紹了vue結(jié)合AntV?G2的使用踩坑記錄，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue結(jié)合AntV G2使用踩坑

官網(wǎng)使用import G2 from '@antv/g2';引入但是會報一個

"export 'default' (imported as 'G2') was not found in '@antv/g2' 得錯誤

找了半天原因，最終解決辦法

import * as G2 from '@antv/g2'

AntV-G2語法總結(jié)

目的

使用antv-g2完成一個圖表，該圖表有兩種結(jié)構(gòu)組成，散點圖與矩形圖組成。我們需要將散點圖與矩形圖分別在兩個view中繪制，所以還需要總結(jié)一下view的概念。

第一步語法基礎(chǔ)

首先是引入相應依賴，其次是創(chuàng)建html容器<div id="c1"></div>，最后是數(shù)據(jù)以及相應初始化代碼

const data = [
  { feature: 'Battery', value: 0.22, phone: 'iPhone' },
  { feature: 'Brand', value: 0.28, phone: 'iPhone' },
  { feature: 'Contract', value: 0.29, phone: 'iPhone' },
  { feature: 'Design', value: 0.17, phone: 'iPhone' },
  { feature: 'Internet', value: 0.22, phone: 'iPhone' },
  { feature: 'Large', value: 0.02, phone: 'iPhone' },
  { feature: 'Price', value: 0.21, phone: 'iPhone' },
  { feature: 'Smartphone', value: 0.5, phone: 'iPhone' },
  { feature: 'Battery', value: 0.27, phone: 'Samsung' },
  { feature: 'Brand', value: 0.16, phone: 'Samsung' },
  { feature: 'Contract', value: 0.35, phone: 'Samsung' },
  { feature: 'Design', value: 0.13, phone: 'Samsung' },
  { feature: 'Internet', value: 0.2, phone: 'Samsung' },
  { feature: 'Large', value: 0.13, phone: 'Samsung' },
  { feature: 'Price', value: 0.35, phone: 'Samsung' },
  { feature: 'Smartphone', value: 0.38, phone: 'Samsung' },
  { feature: 'Battery', value: 0.26, phone: 'Nokia Smartphone' },
  { feature: 'Brand', value: 0.1, phone: 'Nokia Smartphone' },
  { feature: 'Contract', value: 0.3, phone: 'Nokia Smartphone' },
  { feature: 'Design', value: 0.14, phone: 'Nokia Smartphone' },
  { feature: 'Internet', value: 0.22, phone: 'Nokia Smartphone' },
  { feature: 'Large', value: 0.04, phone: 'Nokia Smartphone' },
  { feature: 'Price', value: 0.41, phone: 'Nokia Smartphone' },
  { feature: 'Smartphone', value: 0.3, phone: 'Nokia Smartphone' },
];
const chart = new Chart({
  container: 'c1',
  autoFit: false,
  width: 600,
  height: 300,
});
chart.data(data);
chart.point().position('feature*value');
chart.render();

首先創(chuàng)建了一個chart對象

const chart = new Chart({
? container: 'c1',
? autoFit: false,
? width: 600,
? height: 300,
})

然后我們填充相應的data

chart.data(data);

再進行圖形設(shè)置(point)以及相應坐標的設(shè)置(position)

chart.point().position('feature*value');

最后進行圖像繪制

chart.render();

第二步設(shè)置坐標軸的外觀與度量

外觀axis設(shè)置

在g2中我們使用axis設(shè)置坐標軸的外觀的顯示特性，我們一般可以不用設(shè)置。相關(guān)設(shè)置可以參考官方 axis API。

度量配置

G2 中的度量 (Scale) 是一個非常重要的概念，用于定義數(shù)據(jù)的類型和展示方式，在下列方面起到重要的作用：

生成坐標軸刻度值
顯示圖例項
格式化數(shù)據(jù)展示的文本

G2 中提供了下面幾種度量，也就是連續(xù)和分類兩個大類別

identity，常量類型的數(shù)值，也就是說數(shù)據(jù)的某個字段是不變的常量
linear，連續(xù)的數(shù)字 [1, 2, 3, 4, 5]
cat，分類，[‘男’, ‘女’]
time，連續(xù)的時間類型
log，連續(xù)非線性的
Log，數(shù)據(jù)將 [1, 10, 100,1000] 轉(zhuǎn)換成 [0, 1, 2, 3]
pow，連續(xù)非線性的pow 數(shù)據(jù) 將 [2, 4, 8, 16, 32] 轉(zhuǎn)換成 [1,2, 3, 4, 5]
timeCat，非連續(xù)的時間，比如股票的時間不包括周末或者未開盤的日期
quantize，分段度量，例如[0-100, 100-200, 200-300] 在一個區(qū)間內(nèi)映射到一個值上
quantile，密度分段度量，會根據(jù)數(shù)據(jù)的分布自動計算一個個的區(qū)間段

度量使用scale函數(shù)進行配置，scale(field: string, scaleOption) 設(shè)置單個坐標，scale(cfg)批量設(shè)置。

坐標度量的通用配置項有：

坐標軸的刻度和范圍是由g2自動生成的，我們可以設(shè)置min，max數(shù)值范圍、ticks數(shù)組自定義坐標軸顯示的刻度文本及刻度數(shù)量，formatter自定義刻度格式，tickCount刻度數(shù)量、tickInterval刻度間距。

第二步創(chuàng)建view

G2 的圖表 Chart，可以創(chuàng)建多個視圖 View，每個 View 各自又可以創(chuàng)建其子 View，即在 G2 4.0 中，View 是支持嵌套的。每個 View 同 Chart 一樣，擁有自己獨立的數(shù)據(jù)源、坐標系、幾何標記、Tooltip 以及圖例，你可以這樣理解，其實 Chart 也是一種特殊的 View，在類結(jié)構(gòu)設(shè)計上，Chart 和 View 的關(guān)系如下：

也就是view繼承子chart，所以我認為我們在chart設(shè)置的屬性，view也會繼承過來，所以部分配置無需我們在進行單獨設(shè)置。

const view = chart.createView({
  region: {
    start: { x: 0.2, y: 0.2 }, // 指定該視圖繪制的起始位置，x y 為 [0 - 1] 范圍的數(shù)據(jù)
    end: { x: 1, y: 1 }, // 指定該視圖繪制的結(jié)束位置，x y 為 [0 - 1] 范圍的數(shù)據(jù)
  },
  padding: [20, 40], // 指定視圖的留白
});

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: