需求：利用eCharts做一個數據折線圖，分為 等待數量和請求數量

百分比 = 等待數量/請求數量（四捨五入，擷取兩位有效數字）

• 0% < 百分比 <= 50% 標域顯示綠色
• 50% < 百分比 <100% 標域顯示黃色
• 百分比 >= 100% 標域顯示紅色

下面展示部分關鍵程式碼：

先宣告兩個陣列：

1 //儲存百分比
2 var percent = new Array();
3 //儲存標域根據百分比劃分要顯示的顏色和位置
4 var markData= new Array(); 

此部分為eCharts資料展示

1 series : [{
2     name:'請求量',
 
3     type:'line',
4     markArea : {
5         data:markData
6     }
7 }]

接下來做資料判斷劃分相應百分比的顏色和顯示的位置

getPercent();儲存百分比得到，percent（四捨五入，擷取兩位有效數字）,此方法在這裡不是關鍵，所以不做展示了

 1 function getMarkData(index,colors) {
 2         var data = [{
 3             xAxis: index,
 4             yAxis:0,
 5             itemStyle:{
 
 6                 color: colors
 7             }
 8         },{
 9             xAxis: index + 1; 
10         }];
11         markData.push(data);
12     }
13     
14     function markArea(){
15         //用於獲取百分比
16         getPercent();
17         for(var i = 0 ; i < percent.length ; i++){
18             if
 
(percent[i] > 0 && percent[i] <= 0.5){
19                 getMarkData(i,'green');
20             }else if(percent[i] >= 1){
21                 getMarkData(i,'red');
22             }else if(percent[i] > 0.5 && percent[i] < 1){
23                 getMarkData(i,'yellow');
24             }else{
25                 getMarkData(i,'white');
26             }
27         }
28     }

最後直接呼叫就可以了。