# 餅圖
餅圖，以及其衍生多納圈圖，也是一種相對基礎的圖形，其實現類為`WxDoughnut`。
餅圖相對于其他圖形來說，配置比較簡單。
## <span id="init">簡單實例</span>
首先，我們先來繪制一個簡單的餅圖實例：
```js
let wxDoughnut = new WxDoughnut('myCanvas', {
width: 600,
height: 350,
cutoutPercentage: 0,
title: '各直銷公司業務銷量',
point: {
format: function(label, value, totalValue) {
return label + ' (' + (value/totalValue*100).toFixed(2) + '%)';
}
}
});
wxDoughnut.update([{
label: '北京',
value: 30
},{
label: '天津',
value: 32
},{
label: '廈門',
value: 10
},{
label: '福建',
value: 100
},{
label: '廣州',
value: 3
}]);
```
默認的餅圖圖例文字僅僅是簡單的值的標識。上面的實例中，我們通過設置`point.format`配置來改變文字的配置。
另外，你會注意到我們配置`cutoutPercentage=0`，這表示我們將多納圈圖的內環半徑設置為0，就呈現了餅圖的樣式。
## <span id="init">多納圈圖</span>
默認的，如果不設置`cutoutPercentage=0`，我們的圖形就會展現為一個內環半徑為外環半徑一般的多納圈圖。如下圖所示
除此之外，多納圈圖還可以通過`percentage`自定義每個多納圈內半徑與外半徑之間的比值
```js
let wxDoughnut = new WxDoughnut('myCanvas', {
...
});
wxDoughnut.update([{
label: '北京',
value: 100,
percentage: 60
},{
label: '天津',
value: 100,
percentage: 70
},{
label: '廈門',
value: 50,
percentage: 80
},{
label: '福建',
value: 30,
percentage: 90
},{
label: '廣州',
value: 30,
percentage: 100
}])
```
