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指令實例
這篇文章主要給大家介紹了關(guān)于Vue.js學(xué)習(xí)記錄之在元素與template中使用v-if指令的相關(guān)資料,文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí),相信對大家具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起看看吧。2017-06-06Vue2.0基于vue-cli+webpack父子組件通信(實例講解)
下面小編就為大家?guī)硪黄猇ue2.0基于vue-cli+webpack父子組件通信(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-09-09理解Vue2.x和Vue3.x自定義指令用法及鉤子函數(shù)原理
這篇文章主要介紹了理解Vue2.x和Vue3.x的自定義指令的用法及鉤子函數(shù)原理,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2021-09-09Vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例
這篇文章主要介紹了Vue.js實現(xiàn)一個漂亮、靈活、可復(fù)用的提示組件示例,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03