const xData = ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00'];
const barData = [5, 20, 36, 10, 10, 20];
option = {
tooltip: {
show: true,
trigger: 'axis',
confine: true,
formatter(item) {
const html = `<div>
<div>${xData[item[0].dataIndex]}~${
xData[item[0].dataIndex + 1]
}</div>
<div><span style="width:10px;height:10px;display: inline-block;background:${
item[0].color
}"></span> ${item[0].data}</div>
</div>`;
return html;
},
},
xAxis: [{
data: barData,
show:false
},
{
data: xData,
axisLabel: {
interval: 0,
show: true,
},
position: 'bottom',
boundaryGap: false,
axisPointer: {
show: false,
},
name: "BP",
nameLocation: "end", // 将名称放置在 X 轴的末尾
nameTextStyle: {
// padding: [10, 0, 0, -30], // 向下偏移 10 像素
fontWeight: 600,
color: "black",
verticalAlign: "top"
},
},
],
yAxis: {
type: 'value',
axisLine:{
show:true
},
name: "频数", // Y 轴的名称
nameLocation: "end", // 将名称放置在 Y 轴的顶部
nameGap: 15, // 轴名称与轴线之间的间距
nameTextStyle: {
padding: [0, 0, 0, -50] // 设置 Y 轴名称的偏移位置,右偏移 20 像素
}
// show: false,
},
dataZoom: [
{
type: "slider",
show: true,
xAxisIndex: [0,1],
start: 0,
end: 100,
bottom: "2%"
}
],
series: [{
data: barData,
type: 'bar',
barWidth:'100%',
backgroundStyle: {
color: 'rgba(220, 220, 220, 0.8)',
},
}, ],
}
echarts柱状图区间滚动
于 2024-08-16 09:15:30 首次发布