效果如图
代码。。。
var option = {
grid: {
left: '1%',
right: '5%',
bottom: '3%',
top: '1%',
containLabel: true
},
xAxis: {
type: 'value',
position: 'top',
interval: 2, //以一个小时递增
max: 30,
min: 0, //将data里最小时间的整点时间设为min,否则min会以data里面的min为开始进行整点递增
axisLabel: {
show: true,
formatter: function (value, index) {
return value ? value : '';
}
}
},
yAxis: {
axisLine: {
lineStyle: {
color: 'rgba(0,0,0,0.1)',
}
},
data: ['aaa', 'bbb', 'ccc', 'ddd'],
axisLabel: {
textStyle: {
color: "rgba(0, 0, 0, 0.65)", //刻度颜色
fontSize: 14 //刻度大小
},
}
},
series: [
{
type: 'custom',
renderItem: function (params, api) {//开发者自定义的图形元素渲染逻辑,是通过书写 renderItem 函数实现的
var categoryIndex = api.value(0);//这里使用 api.value(0) 取出当前 dataItem 中第一个维度的数值。
var start = api.coord([api.value(1), categoryIndex]); // 这里使用 api.coord(...) 将数值在当前坐标系中转换成为屏幕上的点的像素值。
var end = api.coord([api.value(2), categoryIndex]);
// var height = api.size([0, 1])[1];
var height = 20;
return {
type: 'rect',// 表示这个图形元素是矩形。还可以是 'circle', 'sector', 'polygon' 等等。
shape: echarts.graphic.clipRectByRect({ // 矩形的位置和大小。
x: start[0],
y: start[1] - height / 2,
width: end[0] - start[0],
height: height
}, { // 当前坐标系的包围盒。
x: params.coordSys.x,
y: params.coordSys.y,
width: params.coordSys.width,
height: params.coordSys.height
}),
style: api.style()
};
},
encode: {
x: [1, 2], // data 中『维度1』和『维度2』对应到 X 轴
y: 0// data 中『维度0』对应到 Y 轴
},
itemStyle: {
normal: {
color: '#0A8BFF'
}
},
data: [[0, 3, 5], [0, 3, 5], [0, 6, 10], [1, 2, 3], [1, 3, 4], [1, 6, 8], [1, 12, 20]]
}
]
};