如果想 y 轴也能够缩放，那么在 y 轴上也加上 dataZoom 组件

const dataZoomY = ref([{type: "slider",yAxisIndex: 0,startValue: 0,endValue: 9,filterMode: "empty",width: 10,height: "80%",showDataShadow: false,left: 5,},{type: "inside",yAxisIndex: 0,},
]);

在ECharts中，dataZoom组件是一个非常强大的工具，它允许用户对图表中的数据进行区域缩放和平移，从而更详细地查看数据的某个部分。以下是如何使用dataZoom来控制Y轴的详细步骤和示例代码：

1. 理解dataZoom组件

dataZoom组件可以在ECharts图表中通过鼠标拖拽、滚轮滚动或滑动条来调整数据的显示范围。它通常用于时间序列数据、股票数据等，帮助用户聚焦到感兴趣的数据范围。

2. 如何通过dataZoom控制Y轴

要通过dataZoom控制Y轴，需要在dataZoom的配置项中设置yAxisIndex属性。这个属性指定了dataZoom组件要控制的Y轴索引。如果图表中有多个Y轴，可以通过设置不同的yAxisIndex来控制不同的Y轴。

3. 示例代码

以下是一个使用dataZoom来控制Y轴的示例代码：

var chart = echarts.init(document.getElementById('main'));var option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}],dataZoom: [{type: 'slider', // 滑动条型 dataZoom 组件xAxisIndex: null, // 不控制 X 轴yAxisIndex: 0, // 控制第一个 Y 轴start: 20, // 初始时，20% 到 80% 的数据可见end: 80}]
};chart.setOption(option);

在这个示例中，dataZoom组件被配置为控制第一个Y轴（yAxisIndex: 0），并且设置为滑动条型（type: 'slider'）。初始时，只有20%到80%的Y轴数据范围是可见的。

4. 测试并验证示例代码的功能

将上述代码添加到你的HTML文件中，并确保你已经引入了ECharts的库。然后在浏览器中打开这个文件，你应该能看到一个带有滑动条型dataZoom组件的柱状图。通过拖动滑动条，你可以调整Y轴数据的显示范围。

5. 注意事项

• 当同时配置X轴和Y轴的dataZoom时，需要确保它们的start和end值不会相互冲突。
• 如果数据范围很大，可能需要调整dataZoom的minSpan和maxSpan属性，以限制缩放和平移的最小和最大范围。
• 如果dataZoom不起作用，检查是否正确设置了xAxisIndex或yAxisIndex。

通过上述步骤和示例代码，你应该能够成功使用dataZoom来控制ECharts图表中的Y轴。