四时宝库

程序员的知识宝库

在 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'
    }
  ]
};

其他代码

  1. 计算最大值和最小值
  2. 使用 Math.max 和 Math.min 函数计算数据中的最大值和最小值。
  3. 设置 Y 轴范围
  4. Math.ceil(maxValue):计算大于最大值的最接近的整数。
  5. Math.floor(minValue):计算小于最小值的最大整数。
  6. ECharts 配置项
  7. 设置 yAxis 的 min 和 max 属性,确保 Y 轴显示的范围如预期。
  8. 使用 series 配置项中的 type: 'line' 创建折线图。

运行效果



这段代码可以直接在 HTML 文件中运行,并且假设你已经引入了 ECharts 的库。通过这种方式,我们可以根据数据的最大值和最小值,动态地调整 Y 轴的范围。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接