echarts 柱状图y轴为24小时 显示八点到晚上九点的时间段
时间: 2023-10-17 20:30:06 浏览: 39
你可以通过设置 `yAxis` 的 `min` 和 `max` 属性来限制 y 轴的范围,从而实现显示特定时间段的柱状图。以下是一个示例代码,展示了如何在 ECharts 中设置 y 轴范围来显示从早上八点到晚上九点的时间段:
```javascript
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
min: 8, // 设置 y 轴最小值为 8 点
max: 21, // 设置 y 轴最大值为 21 点
axisLabel: {
formatter: function (value) {
return value + ':00'; // 格式化 y 轴标签显示小时数
}
}
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'bar'
}]
};
```
在上述代码中,我们设置了 `yAxis` 的 `min` 属性为 8,`max` 属性为 21,这样就限制了 y 轴的范围只显示从早上八点到晚上九点的时间段。同时,我们还通过 `axisLabel` 的 `formatter` 属性来格式化 y 轴标签,以便正确显示小时数。