根据最新版本（v11.1.0）change log：
增加了对鼠标滚轮通过chart.zooming.mouseWheel进行缩放的支持。此功能嵌入在Highcharts Stock捆绑包中，但需要Highcharts捆绑包的附加模块文件。
我在做一个折线图。我想添加这个功能，但不知道如何。
我用的是Vue 3。
下面是我的代码：

<template>
  <h1 style="text-align: center">Facilities Analyst</h1>
  <highcharts class="chart" :options="lineChartOptions"></highcharts>
</template>

<script>
/* eslint-disable */
import { decode_jwt_token_payload } from '@/services/auth';
import spectrumDataAll from '../../spectrum_example.json';
import { tuple } from 'ant-design-vue/lib/_util/type';
const spectrumData = spectrumDataAll[0];

export default {
  data() {
    return {
      username: '',
      authority: '',
      lineChartOptions: {
        chart: {
          zooming: {
            enabled: true,
            mouseWheel: true,
            type: "x",
          },
          height: "50%",
          type: 'line',
          // zoomType: 'x',
          resetZoomButton: {
            position: {
              // align: 'right', // by default
              // verticalAlign: 'top', // by default
              x: 0,
              y: -30
            }
          },
          events: {
            selection: function (event) {
              console.log(Highcharts.version);
              console.log(event);
              if (event.resetSelection) {
                this.xAxis[0].update({ tickInterval: 100 });
              }
              else {
                // Retrieve the minimum and maximum x-values
                let xAxis = event.xAxis[0];
                let minX = this.xAxis[0].categories[Math.floor(xAxis.min)];
                let maxX = this.xAxis[0].categories[Math.ceil(xAxis.max)];
                const range = maxX - minX + 1;
                let newTickInterval = this.xAxis[0].tickInterval;
                if (range > 1000) newTickInterval = 100;
                else if (range > 500) newTickInterval = 50;
                else if (range > 100) newTickInterval = 10;
                else if (range > 50) newTickInterval = 5;
                else if (range > 10) newTickInterval = 2;
                else if (range > 5) newTickInterval = 1;
                console.log(newTickInterval);
                // Set the calculated tickInterval for the x-axis
                this.xAxis[0].update({
                  tickInterval: newTickInterval,
                });
              }
            },
          },
        },
        credits: false, // can add credits in bottom right
        title: {
          text: 'Spectrum',
          align: 'left',
          style: {
            fontFamily: 'Montserrat, Arial, sans-serif',
            fontSize: '1.3rem',
            fontWeight: '600',
            color: '#181819',
          },
        },
        subtitle: {
          text: 'bla bla bla',
          align: 'left',
          style: {
            fontFamily: 'Montserrat, Arial, sans-serif',
            fontSize: '0.9rem',
            fontWeight: '600',
            color: '#a3a3a3',
          },
        },

        xAxis: {
          title: {
            text: 'Frequency (Hz)'
          },
          tickInterval: 100,
          offset: 10,
          gridLineWidth: 1, // Set the width of the X grid lines
          gridLineColor: '#e6e6e6', // Set the color of the X grid lines
          categories: [],
          crosshair: {
            width: 1,
            color: 'black'
          },
          events: {
            setExtremes: function (event) {

            },
            afterSetExtremes: function (event) {

            },
          },
        },
        yAxis: {
          title: {
            text: 'Velocity (mm/s)'
          },
          crosshair: {
            width: 1,
            color: 'black'
          },
        },
        tooltip: {
          animation: false,
          useHTML: true,
          headerFormat: '<table><tr><th colspan="2">{series.name}</th></tr>',
          pointFormat:
            '<tr><td style="color: {series.color}">M(x): </td>' +
            '<td style="text-align: left">{point.category} Hz</td></tr>' +
            '<tr><td style="color: {series.color}">M(y): </td>' +
            '<td style="text-align: left">{point.y} mm/s</td></tr>',
          footerFormat: '</table>',
          valueDecimals: 2,
          positioner: function (labelWidth, labelHeight, point) {
            var tooltipX, tooltipY;

            tooltipX = this.chart.chartWidth - labelWidth - 10; // Adjust the offset if needed
            tooltipY = labelHeight + 40; // Adjust the offset if needed

            return {
              x: tooltipX,
              y: tooltipY
            };
          },
        },
        legend: {
          enabled: false // Disable legend
        },
        series: []
      }
    };
  },
  methods: {
    convertDate(dateString) {
      const regex = /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})$/;
      const match = regex.exec(dateString);

      if (match) {
        const year = match[1];
        const month = match[2];
        const day = match[3];
        const hours = match[4];
        const minutes = match[5];
        const seconds = match[6];

        const formattedDate = `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
        return formattedDate;
      }
      return "";
    }
  },
  created() {
    const { username, authority } = decode_jwt_token_payload()
    this.username = username
    this.authority = authority
    console.log(spectrumData)
    // Insert X categories:
    this.lineChartOptions.xAxis.categories = Array.from({ length: spectrumData.CountX + 1 }, (_, i) => spectrumData.StartX + i * spectrumData.IncX);
    // Insert Y series:
    for (let i = 0; i < spectrumData.Measures.length; i++) {
      this.lineChartOptions.series.push({
        data: spectrumData.Measures[i].Values.map(v => parseInt(v)),
        // data: spectrumData.Measures[i].Values.map(v => parseInt(v)),
        name: this.convertDate(spectrumData.Measures[i].Date),
        visible: i < 1,
        marker: {
          enabled: false,
        }
      })
    }
  },
  mounted() {
  }

};
</script>

<style>
.chart {
  background-color: #fff;
  box-shadow: 3px 0.5px 10px rgba(119, 119, 119, 0.25);
  border-radius: 8px;
  padding: 10px;
  margin-left: 5%;
  width: 70%;
}
</style>

字符串