如果想?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軸。

?