餅圖是一種基于圓形的統計圖表，通過劃分圓形面積來表示不同類別的數據占總體的比例。在Vue框架中，我們可以使用第三方庫echarts來創建餅圖。

首先，我們需要在Vue項目中安裝echarts：

npm install echarts --save

接下來，我們需要在Vue組件中引入echarts：

import echarts from 'echarts'

在組件中定義數據和餅圖配置項：

data() {
return {
pieData: [
{
name: '類別1',
value: 20
},
{
name: '類別2',
value: 30
},
{
name: '類別3',
value: 50
}
],
pieOption: {
title: {
text: '餅圖示例',
subtext: '數據來自某個資源'
},
tooltip: {
trigger: 'item',
formatter: '{a}
{b}: {c} (fhvphzz%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['類別1', '類別2', '類別3']
},
series: [
{
name: '數據比例',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: this.pieData
}
]
}
}
},

這里我們定義了一個pieData數組，里面包含了每一塊餅圖的名稱和數值，以及一個pieOption對象，用來配置餅圖的樣式、標簽等信息。

接著，我們需要在組件生命周期函數中初始化echarts實例，并將餅圖配置項傳遞給echarts實例進行初始化：

mounted() {
// 基于準備好的dom，初始化echarts實例
const myChart = echarts.init(document.getElementById('myChart'))
// 將餅圖配置項設置
myChart.setOption(this.pieOption)
}

最后，在組件的模板中添加一個div元素，用來顯示餅圖：

這樣，一個基于Vue的餅圖組件就完成了。通過修改pieData數組中的數據，我們可以輕松地更新餅圖的顯示。