/* echarts渲染方法 */
function renderItem(params, api) {
var start = api.coord([api.value(2), api.value(1)]);
var rectShape = echarts.graphic.clipRectByRect({
x: start[0],
y: start[1],
width: api.size([100, 1])[0] * ((api.value(3) - api.value(2)) / 100),
height: api.size([100, 1])[1] * (api.value(1) - api.value(0))
}, {
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
});
return rectShape && {
type: 'rect',
shape: rectShape,
style: api.style()
};
}
var yDate = ["监控点1", "监控点2"]
var sData = [{
itemStyle: {
normal: { color: "#75d874" }
},
// 0 y开始下标
// 1 y结束下标
// 0 x开始值
// 40 x结束值
value: [1, 6, 0, 1]
},{
itemStyle: {
normal: { color: "#75d874" }
},
value: [10, 23, 0, 1]
},{
itemStyle: {
normal: { color: "#75d874" }
},
value: [10, 13, 1, 2]
},]
option = {
xAxis: [{
position: "right",
max: yDate.length,
min: 0,
axisTick: {
show: false
},
axisLabel: {
show: false
}
}, {
name: '时间',
position: "bottom",
data: yDate,
axisLine: {
lineStyle: {
color: "rgba(0,0,0,0.7)"
}
},
splitLine: {
show: false
}
}],
yAxis: [{
type: 'value',
name: '',
nameGap: 30,
min: 0,
max: 24,
splitNumber: 24
}],
series: [{
type: 'custom',
renderItem: renderItem,
itemStyle: {
normal: {
opacity: 0.9
}
},
encode: {
x: [1, 2],
y: 0
},
data: sData
}],
grid: {
x: 35,
y: 35,
x2: 60,
y2: 50,
borderWidth: 0
}
};