highcharts多图表联动

官方案例：

https://www.highcharts.com.cn/demo/highcharts/synchronized-charts

展示图：

vue中使用

触发：

watch: {
  chartList: {
    handler (n) {
      if (!this.mouseMove) {
        this.mouseMove = true
        setTimeout(() => {
          this.handleMouse()
          this.mouseMove = false
        }, 50)
      }
    },
    deep: false
  }
},
mounted () {
  this.handleMouse()
  const _this = this
  window.onresize = function () {
    _this.isFullScreen = document.fullscreen
  }
}

methods：

handleMouse () {
  this.$refs.chartArea.$el.removeEventListener('mousemove', this.hoverCharts, false)
  this.$refs.chartArea.$el.addEventListener('mousemove', this.hoverCharts)
},
hoverCharts (e) {
  if (!this.chartList.length) return

  this.highcharts.Pointer.prototype.reset = function () {
    return undefined
  }

  let event = null
  this.chartList.forEach(chart => {
    event = chart.pointer.normalize(e) // Find coordinates within the chart
    // 由于tooltip 设置了shared:true，所以refresh应传数组形式
    const points = []

    if (chart.series && chart.series.length) {
      chart.series.forEach((serie, index) => {
        const point = serie.searchPoint(event, true)
        if (point) {
          points.push(point)
          point.highlight(e)
        }
      })
    }

    if (points.length) {
      // chart.xAxis[0].drawCrosshair(event, this)
      chart.tooltip.refresh(points)
    }
  })

  /**
* 高亮当前的数据点，并设置鼠标滑动状态及绘制十字准星线
*/
  this.highcharts.Point.prototype.highlight = function (event) {
    this.onMouseOver() // 显示鼠标激活标识
    // this.series.chart.tooltip.refresh(this) // 显示提示框
    // this.series.chart.xAxis[0].drawCrosshair(event, this) // 显示十字准星线
  }
}