javascript - 使用媒体查询修改 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 值，因此将间隔设置得非常高会删除其间的所有数字。