ECharts：如何设置 datazoom 以便其滑块可以选择我定义为离散值的值？

Question

我想使用datazoom提供的滑块来过滤其他数据，但我只希望用户从我预定义的离散值（例如从0到100的整数）中进行选择，而不是使用期间使用的series.data中的数据绘画。我应该如何实施这个？如果您能提供任何建议，我将不胜感激！

Answer 1

您可以添加类型为 'category' 和

show: false

的不可见

xAxis

，用于存储数据中的预定义值。在 dataZoom 中，您将此轴指定为

xAxisIndex

。

示例：

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],
    }
  ]
};