在 ECharts 图表中设置 Y 轴的显示范围
为了在 ECharts 图表中设置 Y 轴的显示范围，使其显示大于最大值 A 的最接近的整数和小于最小值 B 的最大整数，可以通过设置 yAxis 的 min 和 max 属性来实现。以下是一个具体的例子：
假设我们有一组数据 [150, 230, 224, 218, 135, 147, 260]，最大值 A ，最小值 B 。我们希望 Y 轴的范围为大于 A 的最接近的整数和小于 B 的最大整数。
ECharts 配置代码（数值写死）
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
min:100,// 设置 Y 轴的范围
max:300// 设置 Y 轴的范围
},
series: [
{
data: [150, 230, 224, 218, 135, 147, 260],
type: 'line'
}
]
};
其他代码
- 计算最大值和最小值：
- 使用 Math.max 和 Math.min 函数计算数据中的最大值和最小值。
- 设置 Y 轴范围：
- Math.ceil(maxValue)：计算大于最大值的最接近的整数。
- Math.floor(minValue)：计算小于最小值的最大整数。
- ECharts 配置项：
- 设置 yAxis 的 min 和 max 属性，确保 Y 轴显示的范围如预期。
- 使用 series 配置项中的 type: 'line' 创建折线图。
运行效果
这段代码可以直接在 HTML 文件中运行，并且假设你已经引入了 ECharts 的库。通过这种方式，我们可以根据数据的最大值和最小值，动态地调整 Y 轴的范围。