http://blog.csdn.net/yhn1121/article/details/52041742 先上個鏈接，百度無意間搜到的，寫得比我全面，可以直接飛去看它；
之前寫網頁用過echarts，中間有比較多不懂的地方，寫完之后用比較清閑的時間試了一下官方示例中 南丁格爾玫瑰圖即Customized Pie 中各個代碼所控制的部分，整理了一下
后期還會陸續補充，說不定后來就比鏈接里那個哥們寫的全面了呢（可惜沒有表情，手動斜眼）
還得一個斜眼，因為突然看到了echarts的說明文檔，鏈接造福人類 http://echarts.baidu.com/option.html#series-pie.label
下面是官方實例的代碼：我會在后面以注釋的形式進行標注
option = {
backgroundColor: '#2c343c',
//很顯然這就是官方示例中外面的那一塊大的黑色背景，還可以自己更改顏色，隨你喜歡； 下面還有陰影部分和餅圖大小與位置的控制代碼，敬請期待
title: {
//有嘗試過設置奇特的position，標題圖層在餅圖圖層之上
text: 'Customized Pie',
//這個是最上面的大標題，空的話標題會消失，當然也可以換成你喜歡的任意標題
left: 'center',
//很顯然，這個是標題的對齊方式，支持純數字和px的形式
top: 20,
//距頂部距離，不支持px形式
textStyle: {
color: '#ccc'
//標題顏色，textStyle可能還有其他的屬性，沒有嘗試 end
}
},
tooltip : {
//當鼠標懸停於餅圖時出現的數據詳情框
trigger: 'item',
//據說有'item'與axis兩種取值，嘗試過餅圖中axis無效，數據詳情框會消失，據說在柱狀圖中會有作用，只是並沒有嘗試
formatter: "{a} <br/>{b} : {c} ({d}%)"
//數據詳情框的數據{a}代表series中的name <br/>換行，{b}為data.name {c}為data.value {d}為占總數的百分比
},
visualMap: {
//看到有講是設置圖值變化顏色(visualMap)，覺得有道理，不過這個其實就是左下角的色彩條設置
show: false,
//左下角縮略圖，是一個色條，應該表示的是最深色到最淺色，有兩個可能的取值，true和false,true為顯示色條，false為隱藏色條
min: 80,
max: 600,
//當min==max時，餅圖顏色均勻，實例為紅色，當然試了一下min和max的值具體指的是什么不是很理解
inRange: {
colorLightness: [0, 1]
//該值為顏色的明暗度，具體可以參見左下角色條，色條底部坐標值為0，頂部為1
}
},
series : [
{
name:'訪問來源',
//顯示在數據詳情框中的一部分，實例中是第一行的內容
type:'pie',
//餅形圖默認是pie, 據我觀察所有的餅圖不管是南丁格爾，還是環形還是嵌套環形，type值都是pie
radius : '55%',
//餅圖直徑與背景的比值，可以在背景大小不變的情況下縮放餅形圖的大小
center: ['50%', '50%'],
//餅圖圓心的位置，不同的是，前者是left 后者是top
data:[
{value:335, name:'直接訪問'},
{value:310, name:'郵件營銷'},
{value:274, name:'聯盟廣告'},
{value:235, name:'視頻廣告'},
{value:400, name:'搜索引擎'}
// 此幾者為餅形圖數據，會隨着比重變化半徑與顏色，當然，min與max設置可以使其顏色不變
//，另外半徑變化不知道由哪個參數控制，后面也知道了，就是series-rosetype
].sort(function (a, b) { return a.value - b.value; }),
//數據的排序，使用了.sort()與function（a,b）{}函數，可見最下方解釋
roseType: 'radius',
//有兩個取值，①'radius' 扇區圓心角展現數據的百分比，半徑展現數據的大小。 ② 'area'所有扇區圓心角相同，僅通過半徑展現數據大小。
label: {
//外部指示線的文本標簽
normal: {
//有兩種可能的取值，normal 和 emphasis（強調; 着重; （輪廓、圖形等的） 鮮明; 突出，重讀;）括號內的是英語意思，而我看了一下說明文檔，這兩個取值normal有position取值而emphasis沒有，其它屬性大致相同
textStyle: {
//標簽的字體樣式。 包括color，fontStyle，fontWeight，fontFamily，fontSize 等屬性
color: 'rgba(255, 255, 255, 0.3)'
//標簽字體顏色
}
}
},
labelLine: {
//標簽的視覺引導線樣式
normal: {
//與label類似也有兩種可能的取值，normal 和 emphasis 其屬性區別較大 emphasis時不存在smooth，length，length2三個屬性
lineStyle: {
color: 'rgba(255, 255, 255, 0.3)'
//引導線顏色，還有多種樣式
},
smooth: 0.2,
//視覺引導線彎曲程度，0為直線加拐角，1為完全的曲線，彎曲程度可以自己去試
length: 10,
length2: 20
//上兩者為兩條直線分別的長度，單位不一致，具體不清楚
}
},
itemStyle: {
//圖形樣式，有 normal 和 emphasis 兩個狀態。normal 是圖形在默認狀態下的樣式；
//emphasis 是圖形在高亮狀態下的樣式，比如在鼠標懸浮或者圖例聯動高亮時。
normal: {
color: '#c23531',
//就如上面所說這個屬性時圖形在默認狀態下的顏色，
//不過我發現了一個神奇的事情，如果引號內為空，那么顏色為五彩，當然引號不能去掉，否則會報錯
shadowBlur: 200,
//這個就是餅圖陰影的控制屬性，數字越大陰影越寬，可以為0，沒有陰影，但是不能為空
shadowColor: 'rgba(0, 0, 0, 0.5)'
//這個是陰影的透明度和顏色，顏色來說的話可以用三種方式來表示：rgba；#；red；后兩者時支持opacity屬性
}
},
animationType: 'scale',
//初始動畫效果，可選 ：①expansion默認研圓弧展開的效果。②scale縮放效果，配合設置 animationEasing='elasticOut' 可以做成 popup 的效果。
animationEasing: 'elasticOut',
//初始動畫的緩動效果 勻速，先快后慢先慢后快等等，一個鏈接 http://echarts.baidu.com/gallery/editor.html?c=line-easing
animationDelay: function (idx) {
//初始動畫的延遲，有試過將實例中的下面一個參數擴大十倍，效果就非常明顯
return Math.random() * 200;
// Math.random() .random() 方法可返回介於 0 ~ 1 之間的一個隨機數，語法為 Math.random()
}
}
]
};
sort() 方法用於對數組的元素進行排序。
語法為 arrayObject.sort(sortby) 即 [].sorrt()
其中sortby規定排序順序。必須是函數。
如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序，說得更精確點，是按照字符編碼的順序進行排序。
若想使其順序為按數字大小進行排序則應如此寫 [].sort(function (a, b) { return a - b;})，此時為升序，b-a為降序
popup:彈窗