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

官網(wǎng)使用import G2 from '@antv/g2';引入但是會(huì)報(bào)一個(gè)

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

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

import * as G2 from '@antv/g2'

AntV-G2語(yǔ)法總結(jié)

目的

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

第一步語(yǔ)法基礎(chǔ)

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

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)建了一個(gè)chart對(duì)象

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

然后我們填充相應(yīng)的data

chart.data(data);

再進(jìn)行圖形設(shè)置(point)以及相應(yīng)坐標(biāo)的設(shè)置(position)

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

最后進(jìn)行圖像繪制

chart.render();

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

外觀axis設(shè)置 

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

度量配置

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

• 生成坐標(biāo)軸刻度值
• 顯示圖例項(xiàng)
• 格式化數(shù)據(jù)展示的文本

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

• identity，常量類(lèi)型的數(shù)值，也就是說(shuō)數(shù)據(jù)的某個(gè)字段是不變的常量
• linear，連續(xù)的數(shù)字 [1, 2, 3, 4, 5]
• cat，分類(lèi)，[‘男’, ‘女’]
• time，連續(xù)的時(shí)間類(lèi)型
• 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ù)的時(shí)間，比如股票的時(shí)間不包括周末或者未開(kāi)盤(pán)的日期
• quantize，分段度量，例如[0-100, 100-200, 200-300] 在一個(gè)區(qū)間內(nèi)映射到一個(gè)值上
• quantile，密度分段度量，會(huì)根據(jù)數(shù)據(jù)的分布自動(dòng)計(jì)算一個(gè)個(gè)的區(qū)間段

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

坐標(biāo)度量的通用配置項(xiàng)有： 

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

第二步創(chuàng)建view

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

也就是view繼承子chart，所以我認(rèn)為我們?cè)赾hart設(shè)置的屬性，view也會(huì)繼承過(guò)來(lái)，所以部分配置無(wú)需我們?cè)谶M(jìn)行單獨(dú)設(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], // 指定視圖的留白
});

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

最新評(píng)論