溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關在vue項目中如何引用Antv G2，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
template內容：
<template> <div id="pieChart"></div> </template>
js部分：
​//引入G2組件
import G2 from "@antv/g2";
​
export default {
name:"",
//數據部分
data(){
return{
sourceData: [],//聲明一個數組
chart: {}, //全局定義chart對象
id: Math.random().toString(36).substr(2), //動態生成ID,便于多次引用
}
},
//初始加載
mounted() {
this.initComponent();
},
methods: {
//初始化獲取數據
initStrateGoal() {
debugger;
let _this = this;
_this.$http
.$get("后臺接口地址")
.then(function(response) {
if (_this.$util.isBlank(response.data)) {
return;
}
_this.sourceData = response.data;
//調用繪圖方法
_this.getDrawing(_this.sourceData);
})
.catch(function(error) {
_this.$message.error(_this, error);
});
},
//繪制圖形
getDrawing(sourceData) {
let _this = this;
// Step 1: 創建 Chart 對象
_this.chart = new G2.Chart({
container: _this.id,
forceFit: true,
height: 255,
padding: [30, 0, 35, 0],
animate: false
// margin: [0, 500]
});
let sumCount = 0;
for (let i in sourceData) {
sumCount = sumCount + Number(sourceData[i].count);
}
// Step 2: 載入數據源
_this.chart.source(sourceData, {
percent: {
formatter: function formatter(val) {
val = val + "%";
return val;
}
}
});
_this.chart.coord("theta", {
radius: 0.75,
innerRadius: 0.6
});
//消息提示
_this.chart.tooltip({
showTitle: false,
itemTpl:
'<li><span class="g2-tooltip-marker"></span>{name}: {value}</li>'
});
// 輔助文本
_this.chart.guide().html({
position: ["50%", "50%"],
html:
'<div >目標總數<br><span >' +
sumCount +
"</span></div>",
alignX: "middle",
alignY: "middle"
});
// Step 3：創建圖形語法，繪制餅圖
var interval = _this.chart
.intervalStack()
.position("percent")
.color("item")
.label("percent", {
formatter: function formatter(val, item) {
return item.point.item + ": " + val;
}
})
.tooltip("item*percent", function(item, percent) {
//數據顯示為百分比形式
percent = percent + "%";
return {
name: item,
value: percent
};
})
.style({
lineWidth: 1,
stroke: "#fff"
});
// Step 4：最后一步渲染至畫布
_this.chart.render();
//初始加載圖片后默認顯示第一個條目突起，點擊后進行變更
interval.setSelected(sourceData[0]);
},
//因為父級頁面用的事Tab調用，會有顯示不全的現象發生，所以銷毀所有對象后重新加載
reloadDrawing() {
//銷毀畫布對象
this.chart.destroy();
//重新調用數據進行加載
this.initStrateGoal();
}
}
}*父級頁面時tab調用，并且是一個頁面多次引用，有兩個坑
1.tab點擊時，有的頁面顯示不全，樣式也有問題，需要銷毀重構（只是我的個人方案，有其他方案的話可以推薦）
2.一個頁面有多個圖表，id是不能重復的，必須動態生成
補充知識：vue+antv與數據庫交互實現數據可視化圖表
一、安裝antv
npm install @antv/g2
二、在官網選擇自己需要的圖表
https://g2.antv.vision/zh/examples/gallery
這里以這個圖為例
右側就是實現這個圖的代碼，在這里加上.color(“type”)即可根據字段名顯示不同的顏色
這里數據的字段和值可以按需更改（更改字段名稱的話要把下面相關的字段名全部替換）
三、整合vue antv
在vue中引入antv
import { Chart } from "@antv/g2";
指定一個容器來放圖表
<template> <div id="roomTypeCheckIn"></div> </template>
替換默認的data數據
data() {
return {
mydata: [
{ roomTypeName: "單人間", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "雙人間", checkInValue: 654, checkInPercent: 0.02 },
{ roomTypeName: "鐘點房", checkInValue: 4400, checkInPercent: 0.2 },
{ roomTypeName: "海景房", checkInValue: 5300, checkInPercent: 0.24 },
{ roomTypeName: "主題房", checkInValue: 6200, checkInPercent: 0.28 },
{ roomTypeName: "家庭房", checkInValue: 3300, checkInPercent: 0.14 },
{ roomTypeName: "總統房", checkInValue: 1500, checkInPercent: 0.06 }
]
};
},把繪圖代碼復制進來
此處需要把默認的container：‘container' 修改為自己指定的容器id，渲染數據時，將data修改為this.xxx（自己定義的數據名稱），不同的圖修改的地方可能會不同
methods: {
initComponent() {
const chart = new Chart({
container: "roomTypeCheckIn",
autoFit: true,
height: 500,
padding: [50, 20, 50, 20]
});
chart.data(this.mydata);
chart.scale("checkInValue", {
alias: "銷售額"
});
chart.axis("roomTypeName", {
tickLine: {
alignTick: false
}
});
chart.axis("checkInValue", false);
chart.tooltip({
showMarkers: false
});
chart
.interval()
.position("roomTypeName*checkInValue")
.color("roomTypeName");
chart.interaction("element-active");
// 添加文本標注
this.mydata.forEach(item => {
chart
.annotation()
.text({
position: [item.roomTypeName, item.checkInValue],
content: item.checkInValue,
style: {
textAlign: "center"
},
offsetY: -30
})
.text({
position: [item.roomTypeName, item.checkInValue],
content: (item.checkInPercent * 100).toFixed(0) + "%",
style: {
textAlign: "center"
},
offsetY: -12
});
});
chart.render();
}
}在mounted函數中調用繪圖方法
mounted() {
this.initComponent();
},啟動項目即可看到最終效果
三、與數據庫交互
添加一個獲取數據的方法（按自己的接口進行相應的替換）
getData() {
roomTypeApi.getRoomTypeStatistics().then(res => {
this.mydata = res.data.data
})
},在created函數中調用獲取數據的函數
created() {
this.getData()
},在watch函數中監聽數據，數據發生變化時重新渲染圖表
watch: {
mydata(b,a) {
this.chart.changeData(b)
this.chart.render()
}
},最后得到的圖表數據就是數據庫中的數據了
看完上述內容，你們對在vue項目中如何引用Antv G2有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
