---

the previous question did not point out what is the so-called cognate event, so now update a wave of

< hr > < H2 > start of text < / H2 > As a matter of fact, it's not difficult to read your demo,. The good news is that I just wrote an example used in vue-highchart. Let's show you the effect

.

js

you can see that you can get your own chart object and dom, and then get other chart objects and dom, and then start event registration
, so why don't we do the same in vue?

< H2 > my code (with comments in the key steps) < / H2 >

<template>
    <div>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart1)" ref="c1"></highcharts>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart2)" ref="c2"></highcharts>
        <highcharts style="height:200px;width:500px;" :options="createOption(chartData.chart3)" ref="c3"></highcharts>
    </div>
</template>

<script>
import { offset } from "@/js/utils";

export default {
    name: "test",
    data() {
        return {
            chartData: {
                chart1: [["1", 10], ["2", 12], ["3", 22]],
                chart2: [["1", 44], ["2", 30], ["3", 22]],
                chart3: [["1", 10], ["2", 30], ["3", 8]],
            },
        };
    },
    methods: {
        createOption(data) {
            return {
                series: [{ data }],
            };
        },
    },
    mounted() {
        const { c1, c2, c3 } = this.$refs;
        const chart1 = c1.chart;
        const chart2 = c2.chart;
        const chart3 = c3.chart;
        // chart
        const allChart = [chart1, chart2, chart3];
        // 
        allChart.getOther = function(one) {
            return allChart.filter(c => c !== one);
        };
        // 
        allChart.forEach(chart => {
            // chartdom
            const container = chart.container;
            if (container instanceof Element) {
                container.addEventListener("mousemove", function(e) {
                    var sourceXAxis = chart.xAxis[0];
                    var extremes = sourceXAxis.getExtremes();
                    var targetChartContainerList = allChart.getOther(chart);
                    targetChartContainerList.forEach((ct, index) => {
                        var targetChart = ct;
                        var targetDom = ct.container;
                        var sourceOffset = offset(container);
                        var targetOffset = offset(targetDom);
                        var targetE = {};
                        for (var i in e) {
                            targetE[i] = e[i];
                        }
                        targetE.pageX =
                            e.pageX + targetOffset.left - sourceOffset.left;
                        targetE.pageY =
                            e.pageY + targetOffset.top - sourceOffset.top;
                        var targetEl =
                            targetDom.querySelector(
                                "rect.highcharts-background"
                            ) ||
                            targetDom.querySelector("path.highcharts-tracker");

                        targetE.target = targetE.srcElement = targetE.fromElement = targetE.toElement = targetEl;
                        targetE.delegateTarget = targetE.currentTarget = targetDom;
                        targetE.originalEvent = targetE;
                        if (targetChart && targetChart.pointer) {
                            targetChart.pointer.onContainerMouseMove(targetE);
                        }
                        if (targetChart && targetChart.scroller) {
                            targetChart.scroller.mouseMoveHandler(targetE);
                        }

                        if (
                            chart.mouseIsDown == "mouseup" ||
                            chart.mouseIsDown == "mousedown"
                        ) {
                            if (targetChart && targetChart.xAxis[0]) {
                                var targetXAxis = targetChart.xAxis[0];
                                targetXAxis.setExtremes(
                                    extremes.min,
                                    extremes.max
                                );
                            }
                        }
                    });
                    return false;
                });
            }
        });
    },
};
</script>

check to see if the event registration part is very similar to your code. Yes, I copied it.

What is < H2 > offset? < / H2 >

what is the offset method? Because I do not rely on jquery, at all, I have implemented an offset method myself, which is basically copied according to the jquery source code
. I can also show you the offset code

.

// offset: borrow ideas from the implement of offset in jQuery.fn.extend
export const offset = elem => {
    /* jshint eqeqeq: false */
    const isWindow = obj => obj != null && obj == obj.window;
    const getWindow = ele =>
        isWindow(ele)
            ? ele
            : ele.nodeType === 9 ? ele.defaultView || ele.parentWindow : false;

    let docElem,
        win,
        box = { top: 0, left: 0 },
        doc = elem && elem.ownerDocument;

    if (!doc) {
        return;
    }
    docElem = doc.documentElement;
    // Make sure it's not a disconnected DOM node
    if (!docElem.contains(elem)) {
        return box;
    }
    // If we don't have gBCR, just use 0,0 rather than error
    // BlackBerry 5, iOS 3 (original iPhone)
    if (typeof elem.getBoundingClientRect === "function") {
        box = elem.getBoundingClientRect();
    }
    win = getWindow(doc);
    return {
        top:
            box.top +
            (win.pageYOffset || docElem.scrollTop) -
            (docElem.clientTop || 0),
        left:
            box.left +
            (win.pageXOffset || docElem.scrollLeft) -
            (docElem.clientLeft || 0),
    };
};

< H2 > other precautions < / H2 >

Oh, by the way, I only copied the mousemove part, and you can copy the other parts slowly.
when in actual use, the function in addEventListener is best not to be anonymous. In this way, removeEventListener can cancel listening when the component beforeDestory.