欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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ǔ)

首先是引入相應(yīng)依賴,其次是創(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)建了一個chart對象

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) 是一個非常重要的概念,用于定義數(shù)據(jù)的類型和展示方式,在下列方面起到重要的作用:

  • 生成坐標(biāo)軸刻度值
  • 顯示圖例項
  • 格式化數(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ù)進(jìn)行配置,scale(field: string, scaleOption) 設(shè)置單個坐標(biāo),scale(cfg)批量設(shè)置。

坐標(biāo)度量的通用配置項有: 

坐標(biāo)軸的刻度和范圍是由g2自動生成的,我們可以設(shè)置min,max數(shù)值范圍、ticks數(shù)組自定義坐標(biāo)軸顯示的刻度文本及刻度數(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ù)源、坐標(biāo)系、幾何標(biāo)記、Tooltip 以及圖例,你可以這樣理解,其實 Chart 也是一種特殊的 View,在類結(jié)構(gòu)設(shè)計上,Chart 和 View 的關(guān)系如下:

也就是view繼承子chart,所以我認(rèn)為我們在chart設(shè)置的屬性,view也會繼承過來,所以部分配置無需我們在進(jìn)行單獨設(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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實例

    Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令實例

    這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),相信對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。
    2017-06-06
  • Vue基礎(chǔ)配置講解

    Vue基礎(chǔ)配置講解

    在本篇文章里小編給大家整理的是關(guān)于Vue基礎(chǔ)配置講解內(nèi)容,有興趣的朋友們可以學(xué)習(xí)下。
    2019-11-11
  • Vue2.0基于vue-cli+webpack父子組件通信(實例講解)

    Vue2.0基于vue-cli+webpack父子組件通信(實例講解)

    下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • vue自定義正在加載動畫的例子

    vue自定義正在加載動畫的例子

    今天小編就為大家分享一篇vue自定義正在加載動畫的例子,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11
  • 理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理

    理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理

    這篇文章主要介紹了理解Vue2.x和Vue3.x的自定義指令的用法及鉤子函數(shù)原理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2021-09-09
  • vue中created和mounted的區(qū)別淺析

    vue中created和mounted的區(qū)別淺析

    這篇文章主要給大家介紹了關(guān)于vue中created和mounted區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • vue-cropper實現(xiàn)裁剪圖片

    vue-cropper實現(xiàn)裁剪圖片

    這篇文章主要為大家詳細(xì)介紹了vue-cropper實現(xiàn)裁剪圖片,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • vue組件間通信全面講解

    vue組件間通信全面講解

    這篇文章主要介紹了vue組件間通信全面講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue 使用高德地圖vue-amap組件過程解析

    vue 使用高德地圖vue-amap組件過程解析

    這篇文章主要介紹了vue 使用高德地圖vue-amap組件過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-09-09
  • Vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例

    Vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例

    這篇文章主要介紹了Vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。
    2017-03-03

最新評論