例如一组数据 8点-9点值是10-20,9点-10点值是30-40,10点-11点值是40-59
思路: 通过设置不同系列的stack属性相同来让它们堆叠在一起,同时利用透明色和实色来分别表示区间的最小值和范围。
代码如下:
option = {
xAxis: {
type: 'category',
data: ['08-09', '09-10', '10-11'],
axisLabel: {
show: true,
interval: 0
}
},
yAxis: {
type: 'value'
},
tooltip: {
show: true,
formatter: function (params) {
// 根据条件判断是否需要显示tooltip
if (params.seriesName == 'B') {
let s = option.series[0]['data'][params.dataIndex];
let e = option.series[1]['data'][params.dataIndex];
let r = s + e;
return `${params.seriesName} <br/>${s}-${r}`;
} else {
// 不返回任何内容,则tooltip不显示
return '';
}
}
},
series: [
{
data: [10, 30, 40],// 每个时间段的最小值
type: 'bar',
name: 'A',
stack: 'total',
itemStyle: {
color: 'rgba(0,0,0,0)'// 透明色
}
},
{
data: [10, 10, 19],// 每个时间段的增量
type: 'bar',
name: 'B',
stack: 'total'
}
]
};
标签:10,type,心率,tooltip,可视化,series,params,data,ECharts
From: https://blog.csdn.net/weixin_56105228/article/details/141607015