這篇文章主要介紹了vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表文章都會(huì)有所收獲，下面我們一起來看看吧。
站在用戶的角度思考問題，與客戶深入溝通，找到老河口網(wǎng)站設(shè)計(jì)與老河口網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、申請域名、網(wǎng)絡(luò)空間、企業(yè)郵箱。業(yè)務(wù)覆蓋老河口地區(qū)。
折線圖是經(jīng)常使用并且比較容易的一種圖形，G2 中并沒有特定的圖表類型（柱狀圖、散點(diǎn)圖、折線圖等）的概念，用戶可以單獨(dú)繪制某一種類型的圖表，如餅圖，也可以繪制混合圖表，比如折線圖和柱狀圖的組合，折線圖和面積圖混合就可以實(shí)現(xiàn)如圖效果；
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| container | 指定 chart 繪制的 DOM，可以傳入 DOM id，也可以直接傳入 dom 實(shí)例 | string | HTMLElement | - |
| autoFit | 圖表是否自適應(yīng)容器寬高， 如果用戶設(shè)置了 height，那么會(huì)以用戶設(shè)置的 height 為準(zhǔn) | boolean | false |
| width | 圖表寬度 | number | - |
| height | 圖表高度 | number | - |
| padding | 圖表內(nèi)邊距 | 'auto'|number |number[] | 'auto' |
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| min | 設(shè)置對應(yīng)坐標(biāo)系的最小值 | any | - |
| max | 設(shè)置對應(yīng)坐標(biāo)系的最小值 | any | - |
| range | 坐標(biāo)系的繪制范圍，一般不用修改 | [number,number] | [0, 1] |
| alias | 數(shù)據(jù)字段的顯示別名，一般用于字段對應(yīng)中文名稱設(shè)置 | string | - |
| nice | 自動(dòng)調(diào)整 min、max | boolean | false |
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| showTitle | 是否展示 tooltip 標(biāo)題 | boolean | false |
| shared | true 表示合并當(dāng)前點(diǎn)對應(yīng)的所有數(shù)據(jù)并展示，false 表示只展示離當(dāng)前點(diǎn)最逼近的數(shù)據(jù)內(nèi)容 | boolean | false |
| showCrosshairs | 是否顯示 tooltips 輔助線。 | boolean | false |
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| line | 坐標(biāo)軸線的配置項(xiàng)，null 表示不展示 | null | object | - |
| tickLine | 坐標(biāo)軸刻度線線的配置項(xiàng)，null 表示不展示 | null | object | - |
| grid | 坐標(biāo)軸網(wǎng)格線的配置項(xiàng)，null 表示不展示 | null | object | - |
用于繪制折線圖、曲線圖、階梯線圖等。
用于繪制區(qū)域圖（面積圖）、層疊區(qū)域圖、區(qū)間區(qū)域圖等。
配置 position 通道映射規(guī)則
示例：
重慶分公司
重慶分公司
// 數(shù)據(jù)結(jié)構(gòu): [{ x: 'A', y: 10, color: 'red' }]
geom.position('x*y');配置圖表顏色
// 基礎(chǔ)顏色設(shè)置
geom.color('#1890ff');
// 漸變
geom.color("l(90) 0:#0b83de 1:#0c1c2d")圖形相關(guān)設(shè)置，文檔上的說明不是很全，可以從圖表示例獲取相應(yīng)信息
| 屬性 | 說明 |
|---|---|
| smooth | 用于折線圖平滑設(shè)置 |
柱狀圖在日常數(shù)據(jù)分析中正常都會(huì)使用，也比較直觀，這邊我列了使用到的一些屬性，其他的跟上面的常用參數(shù)文檔是一致
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| offset | 相對數(shù)據(jù)點(diǎn)的偏移距離 | number | - |
| offsetX | 相對于數(shù)據(jù)點(diǎn)在 X 方向的偏移距離 | number | - |
| offsetY | 相對于數(shù)據(jù)點(diǎn)在 Y 方向的偏移距離 | number | - |
| style | 文本圖形屬性樣式，設(shè)置顏色需要用 fill | number | - |
圖表坐標(biāo)系設(shè)置
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| rotate | 配置旋轉(zhuǎn)度數(shù)，使用弧度制 | number | - |
| reflect | 沿 x 方向鏡像或者沿 y 軸方向映射 | x | y | - |
| scale | 沿著 x 和 y 方向的縮放比率 | number, number | - |
| transpose | x，y 軸置換，常用于條形圖和柱狀圖之間的轉(zhuǎn)換 | - | - |
用于繪制柱狀圖、直方圖、南丁格爾玫瑰圖、餅圖、條形環(huán)圖（玉缺圖）、漏斗圖等。
antv文檔對于地圖的描述不是特別全，比如地圖等級viewLevel、地圖邊界設(shè)置、地圖顏色配置，這些都要結(jié)合實(shí)例慢慢摸索，我實(shí)現(xiàn)了比較常用的中國地圖，包含toolTip，以及省的散點(diǎn)圖，只要修改地圖等級viewLevel，配合相應(yīng)數(shù)據(jù)就能實(shí)現(xiàn)不同省市的散點(diǎn)圖了，大家可以舉一反三。
我這邊是采用@antv/l7plot，內(nèi)部就分裝了地圖相關(guān)繪制，如果采用是@antv/l7，它主要是根據(jù)請求地圖路徑坐標(biāo)數(shù)據(jù)請求繪制，數(shù)據(jù)也挺龐大的，會(huì)比較麻煩一些。
這邊就不放圖了，可以在Github運(yùn)行查看
| 屬性 | 說明 | 類型 | 默認(rèn)值 |
|---|---|---|---|
| type | 地圖底圖類型，amap: 高德地圖，mapbox: Mapbox 地圖 | string | amap |
| center | 初始中心經(jīng)緯度 | number[] | [0, 0] |
| pitch | 初始傾角 | number | 0 |
| zoom | 初始縮放層級 | number | 0 |
| style | 內(nèi)置樣式: dark: 黑暗，light: 明亮，normal: 普通，blank: 無底圖 | string | dark |
| logo | 是否顯示 logo | boolean | true |
| 屬性 | 說明 |
|---|---|
| level | 層級 國家；"country"、省份："province"、市："city"、縣："district" |
| adcode | 層級編碼 中國；100000、浙江?。?330000"、杭州市："330100"、西湖區(qū)："330106" |
關(guān)于“vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
