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%'
            }
        ],
    ]
}

---

就醬~