Echart中设置分割区域

最近碰到一个需求横向绘制区域，用不同颜色进行分割，刚开始用的areaStyle，最后发现对于负数等情况不能很好适应，最终通过研究和百度发现了markArea的方法，特此分享，直接上代码，
这个网址https://echarts.baidu.com/examples/editor.html?c=area-basicEchar的官方demo编辑页面，我喜欢在这中间试验好，然后添加到代码就可以了，我就直接贴出我的试验代码，把下面的代码放到左边文本编辑框中即可观看样式：

效果图：

代码：

option = {
   
    xAxis: {
   
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed',