Modifying behavior of yAxys component with media queries

Question

I am creating a responsive chart with ECharts, and as a way to improve the user's visual experience I need to remove the intermediate values ​​between the 0 (min value) and 1 (max value) displayed on the yAxis:

This is my code:

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

Answer 1

Try playing around with the yAxis.interval option.

---

Clean solution

option: {
    yAxis: {
        interval: 1
    }
}

or use a function (closure):

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

It accepts both a number and a function, so you can achieve what you want, even with variable datasets.

---

Dirty solution

option: {
    yAxis: {
        interval: 9999999999
    }
}

Since eCharts always shows the min and max value on the yAxis, setting the interval very high removes all the numbers in between.