vue結合AntV?G2的使用踩坑記錄
vue結合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語法總結
目的
使用antv-g2完成一個圖表，該圖表有兩種結構組成，散點圖與矩形圖組成。我們需要將散點圖與矩形圖分別在兩個view中繪制，所以還需要總結一下view的概念。
第一步語法基礎
首先是引入相應依賴，其次是創(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);
再進行圖形設置(point)以及相應坐標的設置(position)
chart.point().position('feature*value');最后進行圖像繪制
chart.render();
第二步設置坐標軸的外觀與度量
外觀axis設置
在g2中我們使用axis設置坐標軸的外觀的顯示特性，我們一般可以不用設置。相關設置可以參考官方 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] 轉換成 [0, 1, 2, 3]pow，連續(xù)非線性的pow 數(shù)據(jù) 將 [2, 4, 8, 16, 32] 轉換成 [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) 設置單個坐標，scale(cfg)批量設置。
坐標度量的通用配置項有：
坐標軸的刻度和范圍是由g2自動生成的，我們可以設置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，在類結構設計上，Chart 和 View 的關系如下：
也就是view繼承子chart，所以我認為我們在chart設置的屬性，view也會繼承過來，所以部分配置無需我們在進行單獨設置。
const view = chart.createView({
region: {
start: { x: 0.2, y: 0.2 }, // 指定該視圖繪制的起始位置，x y 為 [0 - 1] 范圍的數(shù)據(jù)
end: { x: 1, y: 1 }, // 指定該視圖繪制的結束位置，x y 為 [0 - 1] 范圍的數(shù)據(jù)
},
padding: [20, 40], // 指定視圖的留白
});
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了如何使用vue實現(xiàn)帶縮略圖的輪播圖效果,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的可以參考下2024-02-02
今天小編就為大家分享一篇vue實現(xiàn)修改圖片后實時更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
根據(jù)登錄的角色不一樣,實現(xiàn)不同的路由展示，文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2024-04-04
Vue3?使用v-model實現(xiàn)父子組件通信的方法(常用在組件封裝規(guī)范中)
這篇文章主要介紹了Vue3?使用v-model實現(xiàn)父子組件通信(常用在組件封裝規(guī)范中)的方法,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-06-06
vue element-ui實現(xiàn)el-table表格多選以及回顯方式
這篇文章主要介紹了vue element-ui實現(xiàn)el-table表格多選以及回顯方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要介紹了vue實現(xiàn)顯示消息提示框功能,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
Vue路由鉤子之a(chǎn)fterEach beforeEach的區(qū)別詳解
這篇文章主要介紹了Vue路由鉤子 afterEach beforeEach區(qū)別 ,vue-router作為vue里面最基礎的服務,學習一段時間,對遇到的需求進行一些總結。需要的朋友可以參考下2018-07-07
詳解vue-router的Import異步加載模塊問題的解決方案
這篇文章主要介紹了詳解vue-router的Import異步加載模塊問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
$emit是Vue實例的一個方法,它用于觸發(fā)自定義事件,本文主要為大家詳細介紹了Vue如何使用$emit進行組件通信,感興趣的小伙伴可以跟隨小編咦學習一下2023-12-12
Vue全局自適應大小:使用postcss-pxtorem方式
本文介紹了如何在Vue項目中使用postcss-pxtorem插件實現(xiàn)響應式設計,postcss-pxtorem可以自動將CSS文件中的px單位轉換為rem單位,從而實現(xiàn)更好的自適應布局,通過配置postcss-pxtorem插件,可以在構建時自動完成轉換,無需手動修改代碼2025-01-01