您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表的相關(guān)知識(shí),內(nèi)容詳細(xì)易懂,操作簡(jiǎn)單快捷,具有一定借鑒價(jià)值,相信大家閱讀完這篇vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表文章都會(huì)有所收獲,下面我們一起來看看吧。
折線圖是經(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è)置對(duì)應(yīng)坐標(biāo)系的最小值 | any | - |
max | 設(shè)置對(duì)應(yīng)坐標(biāo)系的最小值 | any | - |
range | 坐標(biāo)系的繪制范圍,一般不用修改 | [number,number] | [0, 1] |
alias | 數(shù)據(jù)字段的顯示別名,一般用于字段對(duì)應(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)對(duì)應(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è)置 |
<template> <div id="container"></div> </template> <script> import { Chart } from "@antv/g2"; export default { mounted() { // 數(shù)據(jù)源 const data = [ { time: "8/1", value: 240 }, { time: "8/10", value: 600 }, { time: "8/20", value: 350 }, { time: "8/31", value: 470 }, ]; // 初始化圖表,列出圖表屬性 const chart = new Chart({ container: "container", autoFit: true, height: 276, padding: [100, 20, 30, 40], }); // 圖表關(guān)聯(lián)數(shù)據(jù)chart.position()方法決定的,在下面有設(shè)置chart.position("time*value") // 前面為x軸,所以 time 為 x 軸, value 為 y 軸 chart.data(data); // 度量 // x,y軸坐標(biāo)系是根據(jù) chart.scale({ // y軸坐標(biāo)系設(shè)置 value: { min: 0, nice: true, alias: "用戶", }, // x軸坐標(biāo)系設(shè)置 time: { range: [0, 1], }, }); // 提示信息 chart.tooltip({ // 是否顯示輔助線 showCrosshairs: true, // 是否合并所有點(diǎn)展示 shared: false, }); // value 坐標(biāo)系設(shè)置 chart.axis("value", { grid: null, tickLine: null, }); // time 坐標(biāo)系設(shè)置 chart.axis("time", { line: null, tickLine: null, }); // 圖表繪制設(shè)置 // 面積圖 chart .area() .position("time*value") .color("l(90) 0:#0b83de 1:#0c1c2d") .shape("smooth"); // 折線圖 chart.line().position("time*value").color("#0b83de").shape("smooth"); // 渲染圖表 chart.render(); }, }; </script>
柱狀圖在日常數(shù)據(jù)分析中正常都會(huì)使用,也比較直觀,這邊我列了使用到的一些屬性,其他的跟上面的常用參數(shù)文檔是一致
屬性 | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
offset | 相對(duì)數(shù)據(jù)點(diǎn)的偏移距離 | number | - |
offsetX | 相對(duì)于數(shù)據(jù)點(diǎn)在 X 方向的偏移距離 | number | - |
offsetY | 相對(duì)于數(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)圖(玉缺圖)、漏斗圖等。
<template> <div id="container"></div> </template> <script> import { Chart } from "@antv/g2"; export default { mounted() { // 數(shù)據(jù)源 const data = [ { type: "香蕉", value: 460 }, { type: "蘋果", value: 600 }, { type: "菠蘿", value: 390 }, { type: "榴蓮", value: 205 }, ]; // 初始化圖表 const chart = new Chart({ container: "container", autoFit: true, height: 276, padding: [50, 60, 10, 60], }); // 關(guān)聯(lián)數(shù)據(jù) chart.data(data); // 圖表關(guān)聯(lián)數(shù)據(jù)chart.position()方法決定的,在下面有設(shè)置chart.position("type*value") // 前面為x軸,所以 type 為 x 軸, value 為 y 軸 // 設(shè)置 x 軸坐標(biāo)系 chart.axis("type", { grid: null, tickLine: null, line: null, }); // 設(shè)置 y 軸坐標(biāo)系 chart.axis("value", { grid: null, label: null, }); // 隱藏圖例 chart.legend(false); // x,y 軸置換 chart.coordinate().transpose(); // chart.interval(options) 柱狀圖 // geom.position() 配置 position 通道映射規(guī)則 // geom.size 設(shè)置圖形大小 // geom.color 設(shè)置圖形顏色 // geom.label 數(shù)據(jù)標(biāo)簽設(shè)置 chart .interval() .position("type*value") .size(12) .color("#678ef2") .label("value", { style: { fill: "#8d8d8d", }, offset: 10, }); chart.interaction("element-active"); // 渲染圖形 chart.render(); }, }; </script>
antv
文檔對(duì)于地圖的描述不是特別全,比如地圖等級(jí)viewLevel
、地圖邊界設(shè)置、地圖顏色配置,這些都要結(jié)合實(shí)例慢慢摸索,我實(shí)現(xiàn)了比較常用的中國(guó)地圖,包含toolTip
,以及省的散點(diǎn)圖,只要修改地圖等級(jí)viewLevel
,配合相應(yīng)數(shù)據(jù)就能實(shí)現(xiàn)不同省市的散點(diǎn)圖了,大家可以舉一反三。
我這邊是采用@antv/l7plot
,內(nèi)部就分裝了地圖相關(guān)繪制,如果采用是@antv/l7
,它主要是根據(jù)請(qǐng)求地圖路徑坐標(biāo)數(shù)據(jù)請(qǐng)求繪制,數(shù)據(jù)也挺龐大的,會(huì)比較麻煩一些。
這邊就不放圖了,可以在Github運(yùn)行查看
屬性 | 說明 | 類型 | 默認(rèn)值 |
---|---|---|---|
type | 地圖底圖類型,amap: 高德地圖,mapbox: Mapbox 地圖 | string | amap |
center | 初始中心經(jīng)緯度 | number[] | [0, 0] |
pitch | 初始傾角 | number | 0 |
zoom | 初始縮放層級(jí) | number | 0 |
style | 內(nèi)置樣式: dark: 黑暗,light: 明亮,normal: 普通,blank: 無底圖 | string | dark |
logo | 是否顯示 logo | boolean | true |
屬性 | 說明 |
---|---|
level | 層級(jí) 國(guó)家;"country"、省份:"province"、市:"city"、縣:"district" |
adcode | 層級(jí)編碼 中國(guó);100000、浙江?。?quot;330000"、杭州市:"330100"、西湖區(qū):"330106" |
<template> <div id="container"></div> </template> <script> import { Choropleth } from "@antv/l7plot"; // 地圖數(shù)據(jù) import data from "../data/userMap"; export default { mounted() { // 初始化地圖 // eslint-disable-next-line no-unused-vars const map = new Choropleth("container", { // 地圖容器配置 map: { type: "mapbox", style: "blank", center: [120.19382669582967, 30.258134], zoom: 3, pitch: 0, logo: false, }, // 關(guān)聯(lián)數(shù)據(jù) source: { data: data, joinBy: { sourceField: "code" }, }, // 地圖等級(jí) viewLevel: { level: "country", adcode: 100000, }, // 根據(jù)容器寬高自定義圖表 autoFit: true, // 設(shè)置地圖顏色 color: { field: "value", value: ["#B8E1FF", "#7DAAFF", "#3D76DD", "#0047A5", "#001D70"], scale: { type: "quantile" }, }, // 邊框 chinaBorder: { // 國(guó)界 national: null, // 爭(zhēng)議 dispute: { color: "#ccc", width: 1, opacity: 0.8, dashArray: [2, 2] }, // 海洋 coast: { color: "#ccc", width: 0.7, opacity: 0.8 }, // 港澳 hkm: { color: "gray", width: 0.7, opacity: 0.8 }, }, // 邊界顏色 style: { opacity: 1, stroke: "rgb(93,112,146)", lineWidth: 0.6, lineOpacity: 1, }, // 數(shù)據(jù)標(biāo)簽 label: { visible: false, }, // 選擇高亮 state: { active: { stroke: "black", lineWidth: 1 }, }, // 提示 tooltip: { inPlot: false, items: ["name", "code", "value"], }, }); }, }; </script> <style scoped> #container { width: 100%; height: 300px; } </style>
關(guān)于“vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表”這篇文章的內(nèi)容就介紹到這里,感謝各位的閱讀!相信大家對(duì)“vue+antv如何實(shí)現(xiàn)數(shù)據(jù)可視化圖表”知識(shí)都有一定的了解,大家如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。