業務需求要用到 環形圖的分割槽選中的開發，

情景展示：  好比一個環形，你可以等分成1-8分不同的分數，每份表示一種狀態，你選中一個，表示你當前的狀態值  

需求分析： 方案1：設計背景，分成8種情況等分，經過開發過程，這種比較，選中展示比較生硬，沒有動畫效果，相對來說，和後臺互動每次點選事件都比較慢

                    方案2：後來考慮到這篇文章需要介紹的這個外掛ECharts.js 3.0，採用畫布功能Canvas,支援ajax動態載入，生成不同的份數的畫布，而且每個分割槽都支援

點選動作捕捉，還支援，文字label說明

<span style="color:#ff0000;">//點選事件捕捉 </span>  
 

myChart.on('click', function (params) { //params的功能很強大
        if(params.data.workstateid==selectworkstateid){                            //取消當前選中樣式
            unSelectPie(selectstatename);
            return;
        }

        selectstatename = params.name;
        selectworkstateid = params.data.workstateid;
        changeSeetingShow(selectstatename,"","");
        var  type = submitStatusByStateName(selectstatename);
        setTimeout("submitSetStatusDetails("+type+")", delayTimeForSubmit) <span style="color:#ff0000;">;
    });</span>
 

問題：1.我們是手機app中的html頁面開發，所以對外掛的大小還是很講究的，我們支取ECharts.js 3.0的最基礎壓縮min包，但是還有268kb,這一點很不好，對於不支援4G網路或者網路較差的手機來說體驗不是很好(這是個bug),我們希望200kb一下的js，這是個缺憾。

                 2.   3.0版本的開發文件還是看不清楚，後來發現2.0版本的文件是可以參考的，而且大量註釋，這一點非常好。

                 3.    初始化，我們要預設選中，非選中等各種事件，動畫，這時候必須去找文件了，還好echart.js,這一點支援很好。上點乾貨吧

//第一次進來，每日
function initWorkStateFirstLogin(){
    selectPie(selectstatename);                                                   //此時預設即"在崗"
    setTimeout('submitSetStatusDetails(0)', delayTimeForSubmit) ;
}
 

//取消選擇
function unSelectPie(name){
     myChart.dispatchAction({
              type: 'pieUnSelect',
              name: name
      });
}


//選擇，初始化用
function selectPie(name){
    myChart.dispatchAction({
        type: 'pieSelect',
        name: name
    });
}

4.過程中，我們需要給不同的分割槽渲染上自己可以設定的顏色，這一點文件中時沒有說明的，估計是為了推廣他們新出的主題外掛吧，這裡我還是上吧。

<span style="color:#ff6666;">//function 初始化 畫布pie  我們初始化是沒有載入資料和顏色的</span>
function initPie(){

     myChart = echarts.init(document.getElementById('workstatuList'));              // 基於準備好的dom，初始化echarts例項

     myChart.setOption({                                                            // 使用剛指定的配置項

          series: [{
                    name:'MyWorkStatus',
                    selectedMode: 'single',
                    avoidLabelOverlap: false,
                    type:'pie',
                    radius: ['20%', '80%'],
                    label: {
                            normal: {
                                    rotate:true,
                                    show: true,
                                    position: 'inner'
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    //fontSize: '30',
                                    fontWeight: 'bold'
                                }
                            }
                    },
                     labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[],
                    color:[]
                  }]
     });
}

//pie非同步載入資料
function setPieList(dsList){
    var dataArray = new Array();
    var colorArray = new Array();
    for(var i=0; i<dsList.getRowCount(); i++){
        dsList.goToRow(i);
        var _statename = dsList.getValue("statename");
        var _workstateid = dsList.getValue("workstateid");
        if(_statename=="在崗"){//初始化的時候儲存
            selectworkstateid = _workstateid;
            selectstatename = _statename;
        }
        dataArray.push({"value":1,"name":_statename,"workstateid":_workstateid});
        colorArray.push(dsList.getValue("statuscolour"));
    }
    console.log(colorArray)//主要是放在載入資料後再給這個chart賦值，其實就是series裡面的2個屬性，他們的賦值其實都是陣列型別的
   <span style="color:#ff6666;"> myChart.setOption({
        series: [{
            data: dataArray,
            color:colorArray
        }]
    });</span>
}

<span style="color:#ffffff;background-color: rgb(255, 153, 255);">  color : ['#a2d4e6','#0098d9','#005eaa','#339ca8'];</span>

<span style="color:#ffffff;background-color: rgb(255, 153, 255);">
</span>

<span style="font-size:18px;color:#330033;background-color: rgb(255, 255, 255);"><strong>就說到這裡吧，至於如何裝配，如何載入js等，看官網教程和demo中的程式碼，這樣才能學到東西，我寫這些，只是想有人萬一頁開發這個，看到我的分享，可以少走點彎路，而不是不勞而獲，主要是自己去看文件，這很重要，才能學到東西，如有不明白，可以給我留言</strong></span>