Hightcharts 在vue中實現多圖聯動

官網有一個例子關於Highcharts 多圖聯動，連接地址，可是例子不是在vue中實現的，如何在vue中實現多圖聯動呢？

下面的是完整的例子

定義2個div

<div id="chart1"></div>
<div id="chart2"></div>

引入Highcharts和jquery ,由於要用到mouseover事件，方便用jquery獲取元素

import Highcharts from "highcharts/highcharts";
import $ from "jquery";

methods 裏面的函數

showChart(arr) {
      let chartObj = {};
      for (let i = 0; i < 2; i++) {
        let chartOptions = this.chartOptions;
          chartObj["chart0" + (i + 1)] = Highcharts.chart(
          "chart0" + (i + 1),
          chartOptions
        );
      }

      $(".chart-container").on("mousemove", (e) => {
        var point, event;
        try {
          for (var key in chartObj) {
            if (chartObj[key].pointer) {
              event = chartObj[key].pointer.normalize(e.originalEvent); // Find coordinates within the chartObj[key]
              point = chartObj[key].series[0]
                ? chartObj[key].series[0].searchPoint(event, true)
                : null; // Get the hovered point
              if (point) {
                point.highlight(e);
              }
            }
          }
        } catch (err) {
          console.log(err);
        }
      });
      $(".chart-container").on("mouseout", (e) => {
        var point, event;
        try {
          for (var key in chartObj) {
            chartObj[key].xAxis[0].hideCrosshair(); // 隱藏十字準星線
            chartObj[key].pointer.chart.hoverPoints[0].onMouseOut(); // 去掉鼠標狀態
            chartObj[key].tooltip.isHidden = true;
          }
        } catch (err) {
          console.log(err);
        }
      });
      Highcharts.Pointer.prototype.reset = function () {
        return undefined;
      };
      /**
       * 高亮當前的數據點，並設置鼠標滑動狀態及繪製十字準星線
       */
      Highcharts.Point.prototype.highlight = function (event) {
        // event.target.onMouseOver(); // 顯示鼠標激活標識
        //console.log(event.target);
        this.onMouseOver(); // 顯示鼠標激活標識
        //  this.series.chart.tooltip.refresh(this); // 顯示提示框
        //  this.series.chart.xAxis[0].drawCrosshair(event, this); // 顯示十字準星線
      };
    },

上面已實現聯動，若是要加上縮放

chart: {
          type: "spline",
          marginLeft: 40,
          zoomType: "x",
        },

xAxis: {
          type: "datetime",
          dateTimeLabelFormats: {
            millisecond: "%H:%M:%S.%L",
            second: "%H:%M:%S",
            minute: "%H:%M",
            hour: "%H:%M",
            day: "%m-%d",
            week: "%m-%d",
            month: "%Y-%m",
            year: "%Y",
          },
          crosshair: true,
          events: {
            setExtremes: this.syncExtremes,
          },
        },

 syncExtremes是放在methods中

// 同步縮放效果，即當一個圖表進行了縮放效果，其餘圖表也進行縮放
    syncExtremes(e) {
      let thisChart = e.target.chart;
      if (e.trigger !== "syncExtremes") {
        Highcharts.each(Highcharts.charts, function (chart) {
          if (chart && chart !== thisChart) {
            if (chart.xAxis && chart.xAxis[0] && chart.xAxis[0].setExtremes) {
              chart.xAxis[0].setExtremes(e.min, e.max, undefined, false, {
                trigger: "syncExtremes",
              });
            }
          }
        });
      }
    },

注意：setExtremes: this.syncExtremes,  要加this