有时候需要用饼图做数据分析，而展示分布数据，使用饼图是一个相当棒的方式，你不用说太多，直接在饼图中显示，就能把信息传达清楚。

选择amCharts制作饼图也是一个很棒的选择，因为amCharts的饼图可以自动适配小容器，甚至是一个200x200px 的容器，他也是i可以自动适应的。

• 下载amCharts

让我们来看看下面的例子：

1、将饼图插入200px 宽的边栏

2、我们还可以设置半径，让图表变得更大些，图表大小很合适，但是标签超出，被截断

边栏内边距可以调整，这里有几个技巧：

• 使图表容器变大
• 使用新div，让图表和内边距适应

这里有个例子：

如上图，大容器包含小容器。

3、我们需要一个CSS实现它：

#chartwrapper {
position: relative;
width: 200px;
height: 200px;
}
#chartdiv {
position: absolute;
top: -30px;
left: -30px;
width : 260px;
height : 260px;
}

4、最后结果如下图，书籍标签没有被截断但是超出了。

5、无边框的效果

6、完整的JS代码：

var chart = AmCharts.makeChart("chartdiv", {
"type": "pie",
"theme": "none",
"dataProvider": [
{
"country": "Lithuania",
"litres": 501.9
},
{
"country": "Czech Republic",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}],
"valueField": "litres",
"titleField": "country",
//"radius": "28%",
"labelRadius": 4,
"labelText": "[[percents]]%"
});

CSS

body {
font-family: Verdana;
font-size: 12px;
padding: 30px;
}
p {
margin-bottom: 20px;
}
#sidebar {
width: 200px;
background: #eee;
float: right;
margin-left: 30px;
}
#sidebar h2 {
font-size: 18px;
text-align: center;
background: #dfdfdf;
border-bottom: 2px solid #fff;
padding: 10px;
}
#sidebar p {
padding: 10px;
margin: 0;
}
#chartwrapper {
position: relative;
width : 200px;
height : 200px;
background: #fff;
/*border: 1px dotted #c00;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#chartdiv {
position: absolute;
top: -30px;
left: -30px;
width : 260px;
height : 260px;
/*border: 1px dotted #0c0;*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

HTML

<script type="text/javascript" src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/pie.js"></script>
<script type="text/javascript" src="http://www.amcharts.com/lib/3/themes/none.js"></script>

<div id="sidebar">
<h2>Sidebar</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sapien at purus lacinia, ac accumsan justo consequat. </p>
<div id="chartwrapper">
<div id="chartdiv"></div>
</div>
<p>Curabitur eget sollicitudin nisi. Curabitur dapibus at mi a elementum. Nullam ut nisi diam. Nulla ac enim feugiat, imperdiet dolor a, commodo ipsum.</p>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam egestas sapien at purus lacinia, ac accumsan justo consequat. Curabitur eget sollicitudin nisi. Curabitur dapibus at mi a elementum. Nullam ut nisi diam. Nulla ac enim feugiat, imperdiet dolor a, commodo ipsum. Etiam convallis sem nisl, sagittis dignissim sapien viverra at. Integer pharetra dolor ut odio fringilla, quis porta orci adipiscing. Donec tellus arcu, luctus et vulputate nec, gravida eu ipsum. In eget nunc eu enim tincidunt posuere. Ut auctor neque ligula, et posuere arcu egestas in. Integer malesuada viverra lectus, quis ullamcorper neque tristique eu. Ut in dui ac purus placerat lacinia sed ut enim. Nunc leo ante, faucibus nec mollis vitae, placerat in odio. Nam id augue sit amet tortor rutrum vehicula et in erat. Donec ullamcorper lectus non nisi convallis, eget rutrum risus tempor.</p>

<p>Cras mollis sem turpis, feugiat laoreet est venenatis nec. Phasellus dignissim, elit in hendrerit condimentum, mi nulla facilisis risus, non viverra leo ipsum et mauris. Pellentesque volutpat sem id luctus pharetra. Donec varius pulvinar ipsum eget fermentum. Vestibulum id eleifend massa, quis pharetra nisi. Cras malesuada lobortis arcu, in imperdiet tellus. Fusce eget lacinia velit. Duis congue hendrerit pellentesque. Sed suscipit bibendum massa, id posuere lacus. Etiam aliquet neque non elit luctus congue. Nunc purus sapien, vestibulum ut gravida vel, elementum egestas turpis. Suspendisse a lacinia ante. Quisque volutpat orci metus, eu cursus mauris malesuada vitae. Donec ac nisi gravida, scelerisque quam et, commodo mi.</p>

<p>Aenean scelerisque mi vel ligula mattis, eget pharetra elit interdum. Pellentesque feugiat nulla sed metus imperdiet consequat. Curabitur convallis nisi ornare ultricies fringilla. Sed rhoncus odio magna, convallis vulputate metus consequat et. Donec laoreet, velit sed congue auctor, leo sapien pulvinar sapien, sed venenatis mauris sem at velit. Ut et ipsum libero. Mauris vel metus nec lectus ultricies interdum vel sed turpis. In hac habitasse platea dictumst.</p>