如何在Apache ECharts中仅保留DataZoom底部滑块，移除顶部图表？

可以通过配置ECharts实例，隐藏图表部分只保留DataZoom滑块，完全满足你的需求。ECharts的DataZoom虽依赖图表容器，但可以通过极简配置让图表不可见，仅展示滑块组件。

1. 核心配置思路 #

• 配置空的图表系列（series: []），让图表无数据展示
• 隐藏坐标轴的所有元素（轴线、刻度、标签），消除图表痕迹
• 启用DataZoom滑块组件，按需配置数据标记、阴影等样式

2. 完整示例代码 #

// 初始化ECharts实例
const myChart = echarts.init(document.getElementById('dataZoomSlider'));

const option = {
  // 隐藏坐标轴
  xAxis: {
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false },
    splitLine: { show: false }
  },
  yAxis: {
    type: 'value',
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false },
    splitLine: { show: false }
  },
  // 空系列，无图表内容
  series: [],
  // 配置DataZoom滑块，匹配你的需求
  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: 0,
      // 显示数据阴影
      showDataShadow: true,
      // 显示当前缩放范围详情
      showDetail: true,
      // 滑块样式调整
      handleStyle: {
        color: '#333'
      },
      // 数据标记点样式
      dataBackground: {
        areaStyle: {
          color: 'rgba(180, 180, 180, 0.3)'
        }
      },
      // 默认缩放范围
      start: 20,
      end: 80
    }
  ]
};

myChart.setOption(option);

// 监听DataZoom事件，用于过滤你的网格数据
myChart.on('datazoom', function(params) {
  const { start, end } = params.batch[0];
  // 这里根据start/end值过滤你的网格数据
  console.log('当前缩放范围:', start, end);
  // 示例：更新网格数据的逻辑
  // updateGridData(start, end);
});

3. 容器样式调整 #

为了让滑块更贴合需求，可以给ECharts容器设置合适的高度（比如60px），避免多余空白：

#dataZoomSlider {
  width: 100%;
  height: 60px;
}

4. 关于单独使用滑块组件 #

ECharts的DataZoom无法完全脱离图表实例独立使用，但通过上述配置，图表部分会被完全隐藏，视觉上就只有滑块组件，完全可以满足你的过滤需求。如果需要更轻量化的纯滑块组件，也可以考虑专门的UI库，但ECharts的DataZoom在数据标记、范围展示上的表现更匹配你的需求。

内容的提问来源于stack exchange，提问作者EinarI