echarts的markArea图表标域，图表区域背景

如下图所示浅粉色标域（柱子上打了一行马赛克，这不是重点）：

需求

横坐标是三天的00-23小时数，要求给这三天分别标识出一段工作时区，也好区分这是三天

实现

首先看看这个官网的这个属性markArea，这个属性之前我在这篇博文说过，这次是横坐标有重复的坐标呀，就不适用了，但是官网有好几种方法：

根据需求选择了第一种，这种也是比较万能的，因为它支持百分比：

markArea:{
    itemStyle: {     // 这个是所有标域的样式，也可以写在data的item[0]里面，表示该段标域的样式
        color: 'rgba(233,205,203,.4)'       //  也可以使用渐变色，看我上面提到的之前的博文
    },
    data: [        //  他是二维数组，里面的item代表一段标域，item[0]代表标域的起始位置，item[1]代表标域的结束位置，x表示横坐标，如果标域要求竖向，则使用y
        [
            {
                name: '工作时区',     // 标域名称
                x: '15%'
            }, {
                x: '30%'
            }
        ],
        [
            {
                name: '工作时区',
                x: '45%'
            }, {
                x: '60%'
            }
        ],
        [
            {
                name: '工作时区',
                x: '75%'
            }, {
                x: '90%'
            }
        ],
    ]
}

---

就酱~