餅圖元件的基本使用和自定義調整

需要計算金額/數量的各個部分構成比例的情況，可以透過白碼使用餅圖的方式來直觀顯示。

如下圖顯示各手機銷量佔比： 

1、餅圖的基本使用

大小及圖例調整透過樣式皮膚調整 

資料來源：

使用已釋出且包含“數字”型別屬性的資料集

在資料皮膚的“來源”中選擇集合選擇資料集

設定數值屬性：（注意：記得將預設值清除）

設定分類(即圖例屬性)：選擇分組下的屬性（注意：記得將預設值清除）

設定排序： 

到這裡一個簡單餅圖就設定完畢。

2、分組統計及排序

如果資料集中的資料需要合併統計，比如有兩條華為mate40的銷量資料，這種情況需要在數值屬性中使用“分組統計”下的屬性進行合併統計算。

此外，排序板塊不支援分組統計的排序，因此需要到程式設計中進行調整。

點開如圖所示位置的“程式設計”開啟餅圖元件的程式碼編輯框。

找到computed下的data（），此處返回的data即為數值屬性的資料。

我們可以使用sort()對這個data進行排序在return。

如圖對數值從大到小排序：

sort()方法的使用可參考：

編寫完程式碼後點選儲存即可看到效果。

3、顏色系列調整

餅圖的顏色預設使用白碼指定的色系，你也可以在程式設計中修改為自己的色系。

在餅圖元件程式設計中找到computed下的option（）,在return中新增 color:[“color”] 引數，儲存即可，將按照順序使用顏色，顏色不夠時將迴圈使用。

4、合併為其它項

以只顯示銷售前5名，剩下的合併為其他為例，在餅圖元件程式設計中找到computed下的data（），在return之前對data重新處理

1）對原始資料從大到小排序。

 //排序:從大到小
    data.sort(function(item1,item2){
      return -(item1.value-item2.value);
    });

2）除前5名以外的合併為其他，重新組成data。

//合併為其他
    let newData=[];//重新組成資料
    let mainDataLength=5;//主要顯示的資料數量
    let otherDataValue=0;//其他：除了主要資料外的資料值值合
    for(let i=0,length=data.length;i<length;i++){
      if(i<mainDataLength){//新增前5名
        newData.push(data[i]);
      }else if(data[i]&&data[i].value){
        otherDataValue += parseInt(data[i].value);
      }
    }
    if(otherDataValue>0){//新增其他，如果不足5項則忽略
         newData.push({
           name:"其他",
          value:otherDataValue
        });
        data=newData;
      }

編寫完成後儲存程式碼即可。

5、圖例顯示內容調整

餅圖預設的圖例顯示格式為：分類+數值。可在程式碼中修改。

在餅圖元件程式設計中找到computed下的legend（），其中item下的formatter可修改圖例顯示內容。

餅圖的其他修改可以自己閱讀其程式碼進行修改。