使用媒体查询修改 yAxys 组件的行为

Question

我正在使用 ECharts 创建一个响应式图表，为了改善用户的视觉体验，我需要删除 0（最小值）和 1 之间的中间值（最大值）显示在 y 轴上：

这是我的代码：

media: [{
    query: {
      maxWidth: 500
    },
    option: {
      title: {
        textStyle: {
          fontSize: 10
        }
      },
      yAxis: {
        nameGap: 25,
      },
      xAxis: {
        nameGap: 19
      },
      legend: {
        right: 0,
        top: '15%',
        orient: 'vertical'
      },
    }
  }]

Answer 1

尝试使用 yAxis.interval 选项。

---

清洁溶液

option: {
    yAxis: {
        interval: 1
    }
}

或者使用一个函数（闭包）：

option: {
    yAxis: {
        interval: (() => {
            return 1;
        })()
    }
}

它接受一个数字和一个函数，所以你可以实现你想要的，即使是可变数据集。

---

肮脏的解决方案

option: {
    yAxis: {
        interval: 9999999999
    }
}

由于 eCharts 总是 在 y 轴上显示 min 和 max 值，将间隔设置得非常高会删除中间的所有数字。