我想实现当鼠标经过横轴的某个区域时,可以设置一个背景色,效果如我上传的截图
配置项如下
option = {
grid: {
left:30,
top:80,
right:30
},
title: { text: '' },
tooltip: {
formatter: '{b0} <br/> {a0}:{c0}',
backgroundColor:'#EEE',
borderColor:'#2ea3ff',
borderWidth:1,
padding: [5, 20],
position: function (point, params, dom, rect, size) {
// 固定在顶部
return [point[0] - 70, point[1] - 80];
},
textStyle: {
color:'#333'
}
},
color:['#488fff'],
xAxis: {
data: ['2019-01-01','2019-01-02','2019-01-03','2019-01-04','2019-01-05','2019-01-06','2019-01-07'],
axisLine: {
lineStyle: {
type: 'solid',
color:'#EEE',
width:'2'
}
},
axisLabel: {
textStyle: {
color: '#999'
}
},
splitLine: {
show: false,
lineStyle: {
width:1,
color: '#EEE'
}
}
},
yAxis: {
axisLine: {show:false},
axisTick: {show:false},
splitLine:{
lineStyle: {
type: 'solid',
color:'#EEE',
width:2
}
},
axisLabel: {
textStyle: {
color: '#999'
}
}
},
series: [{
name: 'PV访问量',
type: 'line',
symbolSize: 6,
hoverAnimation:true,
symbol: 'circle',
data: [1000,2000,1893,1532,3000,4444,3233],
label:{
show: true,
color: '#AAA',
fontWeight: 'bolder',
fontFamily: 'monospace',
fontSize: 14,
// position: [-5, -20]
},
itemStyle: {
borderWidth: 4,
borderColor: '#2ea3ff'
},// 高亮样式。
emphasis: {
label:{
show:false
},
itemStyle: {
// 高亮时点的颜色。
color: '#2ea3ff',
shadowColor: '#2ea3ff',
shadowBlur:8,
borderWidth:2,
borderColor: '#FFF'
}
},
markArea:{
emphasis:{
itemStyle:{
color: '#F00'
}
}
}
}]
};