Vue3中为Highcharts折线图添加鼠标滚轮缩放功能的方法

根据Highcharts v11.1.0更新日志：

新增了通过chart.zooming.mouseWheel实现鼠标滚轮缩放的支持。该功能在Highcharts Stock包中内置，但在Highcharts包中需要额外引入模块文件。

你在Vue3开发的折线图中已经配置了chart.zooming.mouseWheel: true，但功能未生效的核心原因是缺少鼠标滚轮缩放模块的引入，以下是完整实现步骤：

1. 引入并注册鼠标滚轮缩放模块 #

在组件脚本开头添加Highcharts核心库和mouse-wheel-zoom模块的导入与注册：

import Highcharts from 'highcharts'
import mouseWheelZoom from 'highcharts/modules/mouse-wheel-zoom'

// 注册模块，让配置生效
mouseWheelZoom(Highcharts)

2. 确认缩放配置参数 #

你当前的chart.zooming配置已经符合要求，保留以下参数即可：

chart: {
  zooming: {
    enabled: true,
    mouseWheel: true,
    type: "x" // 指定仅在X轴方向缩放
  },
  // ... 其他图表配置
}

修改后的完整代码示例 #

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

<script>
/* eslint-disable */
import Highcharts from 'highcharts'
import mouseWheelZoom from 'highcharts/modules/mouse-wheel-zoom'
mouseWheelZoom(Highcharts)

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',
          resetZoomButton: {
            position: {
              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 {
                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);
                this.xAxis[0].update({
                  tickInterval: newTickInterval,
                });
              }
            },
          },
        },
        credits: false,
        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,
          gridLineColor: '#e6e6e6',
          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;
            tooltipY = labelHeight + 40;
            return { x: tooltipX, y: tooltipY };
          },
        },
        legend: {
          enabled: false
        },
        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];
        return `${day}/${month}/${year} ${hours}:${minutes}:${seconds}`;
      }
      return "";
    }
  },
  created() {
    const { username, authority } = decode_jwt_token_payload()
    this.username = username
    this.authority = authority
    this.lineChartOptions.xAxis.categories = Array.from({ length: spectrumData.CountX + 1 }, (_, i) => spectrumData.StartX + i * spectrumData.IncX);
    for (let i = 0; i < spectrumData.Measures.length; i++) {
      this.lineChartOptions.series.push({
        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>

注意事项 #

• 确保你的Highcharts版本为v11.1.0及以上，低版本不支持该配置
• 若使用CDN方式引入Highcharts，需额外添加模块脚本：<script src="https://code.highcharts.com/modules/mouse-wheel-zoom.js"></script>

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