echarts图表分区域--显示不同颜色(markArea)

项目需要这样的效果，在y轴数值大于50的时候，向上的区域显示不同的颜色：

查阅官方文档有一个属性markArea，是标记背景区域的，官方是这样配置的：

因为我有多个色块，所以选择单个配置，每个配置不同的颜色，按照官方文档是这样的：

markArea:  {
   data: [
        [{
            yAxis: '50',
            itemStyle:{
                color:'#c60c30'
            }
        }, {
            yAxis: '60'
        }],
         [{
            yAxis: '60',
            itemStyle:{
                color:'#25C50E'
            }
        }, {
            yAxis: '80'
        }]
    ],
}

讲道理应该渲染成功了，但是没有任何效果！！！

既然按照官方配置没用，那看看广大网友是怎么配置的，哎。。。都说这样配，都是怎么配出来的呢，就纳闷，继续看文档！

我发现这个背景区域的颜色是跟着柱状图上的珠子颜色走的，那就看看珠子颜色的配置：

itemStyle： {
   normal: {
       color: ''
    }
}

这个结构和上面背景区域的不太一样啊，itemStyle里面还包裹一个normal对象啊，于是灵机一动，拿过来试试：

markArea:  {
   data: [
       [
	       {
	           yAxis: '50',
	            itemStyle:{
	                normal: {      //  看这里，加了这个属性
	                    color: {
	                        type: 'linear',
	                        x: 0,
	                        y: 0,
	                        x2: 0,
	                        y2: 1,
	                        colorStops: [{
	                            offset: 1, color: '#EEEEEE' // 0% 处的颜色
	                        }, {
	                            offset: 0, color: '#C60C30' // 100% 处的颜色
	                        }],
	                        global: false // 缺省为 false
	                    }
	                }
	            }
	        },
	        {
	            yAxis: '100'
	        }
        ],
        
        ... ...    //  如果有多种颜色，就继续在这里写区间数组，复制上面的下来改颜色
    ],
}

看效果，我没用多种颜色，多种就再复制一份数据，修改一下颜色，我看了官方的改成了渐变色：

哎，真是一个平平无奇的小天才