在Highcharts中，餅圖的大小是Highcharts自動計算并進行繪制。餅圖的大小受數據標簽大小、數據標簽到切片的距離影響。當數據標簽內容較多，并且距離切片較遠時，餅圖就會被壓縮的很小。解決這個問題，有以下幾種方法：
（1）如果不需要特別強調數值大小，可以取消數據標簽的顯示。
（2）使用配置項distance為數據標簽和切片的距離指定一個較小的值。甚至可以指定一個負值，讓數據標簽顯示在切片的內部。
（1）如果不需要特別強調數值大小，可以取消數據標簽的顯示。
（2）使用配置項distance為數據標簽和切片的距離指定一個較小的值。甚至可以指定一個負值，讓數據標簽顯示在切片的內部。
（3）使用餅圖的配置項size強制設置餅圖的大小。
series: [{type: 'pie',size:'180%',innerSize: '80%',data: [['Firefox', 44.2],['IE7', 26.6],['IE6', 20],['Chrome', 3.1],['Other', 5.4]]}]
數據圖形展示頁面，四個圖形，上邊倆，下邊倆，客戶機的分辨率不同，所以如果把圖形的寬度高度寫死，那么會造成屏幕顯示不友好，抽空想了下，很簡單
- 先讓圖形浮動，代碼很簡單：
- <div>??
- ????<div?id="container1"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??
- ????<div?id="container2"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??
- ????<div?id="container3"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??
- ????<div?id="container4"?style="min-width:?600px;?min-height:?400px;?float:left"></div>??
- </div>??
- 使用jquery：
- $(window).resize(function()?{??
- ????var?width_frm?=?$(document.body).width();??
- ????var?height_frm?=?$(document.body).height();??
- ????????????var?width_div?=?width_frm/2;??
- ????var?height_div?=?height_frm/2;??
- ??????
- ????$('#container1').css("height",?height_div);??
- ????$('#container1').css("width",?width_div);??
- ??????
- ????$('#container2').css("height",?height_div);??
- ????$('#container2').css("width",?width_div);??
- ??????
- ????$('#container3').css("height",?height_div);??
- ????$('#container3').css("width",?width_div);??
- ??????
- ????$('#container4').css("height",?height_div);??
- ????$('#container4').css("width",?width_div);??
- });??
- 這里出現一個問題，無法獲取高度，原因是頁面的頭文件格式不對，改為如下即可：
- <!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN">??
- 效果如下，改變窗體大小，圖形跟著變換：
Vue.extend構造器)
