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');
            }
        }
    }

最后直接调用就可以了。