如何让 echarts 根据屏幕宽度自动加上滑动条

要让 ECharts 根据屏幕宽度自动添加滑动条，最直接的方法就是监听窗口的 resize 事件，当屏幕宽度小于某个阈值时，动态地为图表配置 dataZoom 组件。

你可以把 dataZoom 想象成一个“缩放控制器”，它能让你在数据太多、一行显示不全时，通过滑动条来查看所有内容。

下面是一个完整的示例，展示了如何实现这个功能。你可以直接复制代码到 HTML 文件中运行体验。

html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 根据屏幕宽度添加滑动条</title>

<script src="https://yizuotu.net/ajax/libs/echarts/5.6.0/echarts.min.js"></script>
<style>
#chart-container {
width: 100%;
height: 400px;
/* 可以加一些内边距，让图表不紧贴边缘 */
padding: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="chart-container"></div>

<script>
// 初始化图表
const chartDom = document.getElementById('chart-container');
const myChart = echarts.init(chartDom);

// 模拟一些数据，确保数据量够多，能看到滑动条的效果
const days = [];
const values = [];
for (let i = 1; i <= 50; i++) {
days.push('Day ' + i);
values.push(Math.floor(Math.random() * 100) + 20);
}

// 基础的图表配置
const baseOption = {
title: {
text: '动态滑动条示例'
},
tooltip: {},
xAxis: {
type: 'category',
data: days,
axisLabel: {
rotate: 45 // 标签倾斜，避免重叠
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '数值',
type: 'bar',
data: values,
itemStyle: {
color: '#5470c6'
}
}
]
};

// 设置基础配置
myChart.setOption(baseOption);

// 核心逻辑：判断屏幕宽度并决定是否添加滑动条
function updateDataZoomByScreenWidth() {
const screenWidth = window.innerWidth;
// 你可以根据需要调整这个阈值，比如 768px 是一个常见的移动端断点
const MOBILE_BREAKPOINT = 768;

// 获取当前配置，或者从基础配置开始构建
const currentOption = myChart.getOption();

// 如果当前屏幕宽度小于阈值，并且还没有配置过 dataZoom，就添加滑动条
if (screenWidth < MOBILE_BREAKPOINT) {
// 检查是否已经有 dataZoom 配置了，避免重复添加
if (!currentOption.dataZoom || currentOption.dataZoom.length === 0) {
console.log('屏幕宽度较小，添加滑动条');
myChart.setOption({
dataZoom: [
{
type: 'slider', // 使用滑块型的滑动条，方便触摸操作 [citation:4]
show: true,
start: 0, // 数据窗口范围的起始百分比
end: 30, // 数据窗口范围的结束百分比，这里默认显示前30%的数据
xAxisIndex: [0] // 指明这个滑动条控制的是哪个 x 轴
},
{
type: 'inside', // 内置型，支持在坐标系内部通过鼠标滚轮或双指滑动来缩放 [citation:4]
start: 0,
end: 30,
xAxisIndex: [0]
}
]
});
}
} else {
// 如果屏幕宽度足够大，并且之前有 dataZoom 配置，就把它清空
if (currentOption.dataZoom && currentOption.dataZoom.length > 0) {
console.log('屏幕宽度较大，移除滑动条');
// 注意：直接设置 dataZoom 为空数组可能无法完全清理，更稳妥的方式是设置为 []
myChart.setOption({
dataZoom: []
});
}
}
}

// 在窗口大小改变时，执行我们的更新逻辑
window.addEventListener('resize', () => {
// 先让图表自适应容器大小 [citation:9]
myChart.resize();
// 再根据新尺寸决定滑动条的显示与隐藏
updateDataZoomByScreenWidth();
});

// 页面加载完成后也执行一次，确保初始状态正确
updateDataZoomByScreenWidth();

// 为了让初始效果更明显，你可以手动在浏览器里缩小窗口宽度看看
</script>
</body>
</html>

基础配置 (baseOption): 我们先定义了一个包含 50 个数据点的柱状图，确保有足够的数据来触发滚动需求。

核心函数 (updateDataZoomByScreenWidth): 这个函数是逻辑核心。它首先获取当前屏幕宽度 (window.innerWidth)，然后与一个预设的阈值（例如 768px）进行比较。

小于阈值（窄屏）: 如果当前没有 dataZoom 配置，就通过 myChart.setOption 动态添加。这里添加了两种类型的 dataZoom ：

type: 'slider': 显示一个可视化的滑动条，用户可以通过拖拽来浏览数据，在移动端触摸操作也很方便。

type: 'inside': 不显示滑动条，但允许用户在图表区域内通过鼠标滚轮或双指手势来缩放和平移。

大于或等于阈值（宽屏）: 如果之前有 dataZoom 配置，就将其清空（dataZoom: []），恢复到完整的图表展示。

事件监听: 通过 window.addEventListener('resize', ...) 监听浏览器窗口大小变化。在回调中，首先调用 myChart.resize() 让图表容器自适应新尺寸，然后再调用 updateDataZoomByScreenWidth() 来更新滑动条的显示状态。最后，在页面加载时也主动调用一次，确保初始化状态正确。

更精细的控制：你可以调整 start 和 end 的值来控制滑动条默认展示的数据范围。start: 0, end: 30 意味着默认只展示前 30% 的数据。

针对不同轴：上面的例子是控制 X 轴的滑动条。如果你需要垂直滚动，可以设置 yAxisIndex: [0] 。

响应式库：如果你的项目结构复杂，也可以考虑使用 echarts-responsive 这样的第三方库来简化配置。

这个方案的核心就是“监听变化，动态配置”，你可以根据自己的实际需求调整阈值和 dataZoom 的详细参数，以达到最佳的用户体验。

如何让 echarts 根据屏幕宽度 自动加上 滑动条

如何让 echarts 根据屏幕宽度自动加上滑动条