eCharts標域markArea分區域顯示不同顏色

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

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

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

下面展示部分關鍵代碼：

先聲明兩個數組：

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

此部分為eCharts數據展示

series : [{
    name:'請求量',
    type:'line',
    markArea : {
        data:markData
    }
}]

 

接下來做數據判斷划分相應百分比的顏色和顯示的位置

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

function getMarkData(index,colors) {
        var data = [{
            xAxis: index,
            yAxis:0,
            itemStyle:{
                color: colors
            }
        },{
            xAxis: index + 1; 
        }];
        markData.push(data);
    }
    
    function markArea(){
        //用於獲取百分比
        getPercent();
        for(var i = 0 ; i < percent.length ; i++){
            if(percent[i] > 0 && percent[i] <= 0.5){
                getMarkData(i,'green');
            }else if(percent[i] >= 1){
                getMarkData(i,'red');
            }else if(percent[i] > 0.5 && percent[i] < 1){
                getMarkData(i,'yellow');
            }else{
                getMarkData(i,'white');
            }
        }
    }

最后直接調用就可以了。