# 饼图
饼图，以及其衍生多纳圈图，也是一种相对基础的图形，其实现类为`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
}])
```
