How to set up datazoom so that its slider can select values I have defined as discrete values?

Question

I want to use the slider provided by datazoom to filter other data, but I only want users to select from the discrete values I have predefined (such as integers from 0 to 100), rather than using the data from series.data used during drawing. How should I implement this? I'll appreciate it much if you could offer any suggestion!

chart.setOption({
  xAxis: {
    splitLine: false,
    axisLabel: { show: false },
    axisTick: { show: false }
  },
  yAxis: {
    axisLabel: false,
    axisTick: false,
    splitLine: false
  },
  dataZoom: [
    {
      type: "slider",
      id: 'magnitude',
      show: true,
      xAxisIndex: [0],
      height: sliderHeight,
      bottom: 8,
      realtime: false
    }
  ],
  series: [
    {
      data: <data>,
      type: "line",
      smooth: true,
      showSymbol: false,
      itemStyle: {
        color: defaultColor
      },
      areaStyle: {
        color: defaultColor
      }
    }
  ]
})

In above code, data is a two-dimensional array of the coordinates of the points of the curve I want to plot. The picture below shows what it looks like now.

Answer 1

You can add an invisable xAxis of type 'category' and show: false which stores your predefined values in data. In dataZoom you specify this axis as xAxisIndex.

Example:

option = {
  xAxis: [
    {
      type: 'category',
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    {
      type: 'category',
      data: Array.from({length: 100}, (x, i) => i + 1),
      show: false
    }
  ],
  dataZoom: {
    type: 'slider',
    xAxisIndex: 1,
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      data: [150, 230, 224, 218, 135, 147, 260],
    }
  ]
};