如下图所示浅粉色标域(柱子上打了一行马赛克,这不是重点):
需求
横座标是三天的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%'
}
],
]
}
就酱~