echarts 多toolti同时触发图表实现

需求背景

需要实现同x轴，4个图表的的多图表联动效果，且滑动会触发各个图表的tooltip，即一个图表拥有4个tooltip(目前echarts不支持，我这里绕过了这个问题)

解决效果

视频效果

ISQQW代码地址

由于ISQQW只能上传一个option对象的图表，故未上传

energyChart.vue

<!--/**
* @author: liuk
* @date: 2023/11/21
* @describe: 能耗分析图表
* @email:https://blog.csdn.net/hr_beginner?spm=1018.2226.3001.5343
*/-->
<template>
  <div ref="chatDom1" class="energyChart"></div>
  <div ref="chatDom2" class="energyChart"></div>
  <div ref="chatDom3" class="energyChart"></div>
  <div ref="chatDom4" class="energyChart"></div>
</template>

<script lang="ts" setup>
import {ref, onMounted, watch, nextTick} from "vue"
import * as echarts from 'echarts'
import {formatToFixed} from "@/utils/dictionary";

// Props
const props = defineProps(['data'])
const myCharts = {// Vue3 使用 proxy 对象代理，而 echarts 则使用了大量的全等（===）, 对比失败从而导致了bug。
  myChart1: null,
  myChart2: null,
  myChart3: null,
  myChart4: null
}

const chatDom1 = ref(null)
const chatDom2 = ref(null)
const chatDom3 = ref(null)
const chatDom4 = ref(null)

watch(() => props.data, (data) => {
  nextTick(() => {
    renderFn(myCharts.myChart1, {
      xData: data.heatRateHistory.map(item => item.time),
      yName: '度日数单耗 W/m²·℃',
      sData: data.heatRateHistory.map(item => formatToFixed(item.heatRate)),
      markLineVal: data.heatRateHistory[0]?.heatRate3 || 0,
      color: '#EB8F4A'
    })
    renderFn(myCharts.myChart2, {
      xData: data.flowPowerHistory.map(item => item.time),
      yName: '电单耗 W/m²',
      sData: data.flowPowerHistory.map(item => formatToFixed(item.power1)),
      markLineVal: data.flowPowerHistory[0]?.power3 || 0,
      color: '#BF97FF'
    })
    renderFn(myCharts.myChart3, {
      xData: data.flowPowerHistory.map(item => item.time),
      yName: '水单耗 W/m²',
      sData: data.flowPowerHistory.map(item => formatToFixed(item.flow1)),
      markLineVal: data.flowPowerHistory[0]?.flow3 || 0,
      color: "#5690FF"
    })
    renderFn(myCharts.myChart4, {
      xData: data.energyAnalysisData.time,
      yName: '室外温度 °C',
      sData: data.energyAnalysisData.tt301_value_val_arr,
      markLineVal: false,
      color: '#00CCA3'
    })
  })
})

onMounted(() => {
  drawChart(chatDom1.value, 1)
  drawChart(chatDom2.value, 2)
  drawChart(chatDom3.value, 3)
  drawChart(chatDom4.value, 4)
  echarts.connect('sameControls'); // **相同操作
  window.addEventListener('resize', () => {
    renderFn(myCharts.myChart1, {
      xData: props.data.heatRateHistory.map(item => item.time),
      yName: '度日数单耗 W/m²·℃',
      sData: props.data.heatRateHistory.map(item => formatToFixed(item.heatRate)),
      markLineVal: props.data.heatRateHistory[0]?.heatRate3 || 0,
      color: '#EB8F4A'
    })
    renderFn(myCharts.myChart2, {
      xData: props.data.flowPowerHistory.map(item => item.time),
      yName: '电单耗 W/m²',
      sData: props.data.flowPowerHistory.map(item => formatToFixed(item.power1)),
      markLineVal: props.data.flowPowerHistory[0]?.power3 || 0,
      color: '#BF97FF'
    })
    renderFn(myCharts.myChart3, {
      xData: props.data.flowPowerHistory.map(item => item.time),
      yName: '水单耗 W/m²',
      sData: props.data.flowPowerHistory.map(item => formatToFixed(item.flow1)),
      markLineVal: props.data.flowPowerHistory[0]?.flow3 || 0,
      color: "#5690FF"
    })
    renderFn(myCharts.myChart4, {
      xData: props.data.energyAnalysisData.time,
      yName: '室外温度 °C',
      sData: props.data.energyAnalysisData.tt301_value_val_arr,
      markLineVal: false,
      color: '#00CCA3'
    })
  }, {passive: true});
})

const renderFn = (myChart, {xData, yName, sData, markLineVal, color}) => {
  const option = myChart.getOption()
  option.xAxis[0].data = xData
  option.xAxis[0].min = null
  option.yAxis[0].name = yName
  option.series[0].name = yName
  option.series[0].data = sData
  option.series[0].color = color
  option.series[0].markLine.data[0].yAxis = markLineVal
  option.series[0].markLine.data[0].label.color = color
  if (markLineVal === false) delete option.series[0].markLine
  option.tooltip[0].formatter = (param) => {
    const data = param[0] || {}
    const temp = data.data - markLineVal
    const [name, unit] = yName.split(" ")
    const nameArr = [
      {
        name,
        num: data.data
      },
      {
        name: '基准年' + name,
        num: markLineVal
      },
      {
        name: '对比基准年',
        num: temp
      }
    ]
    return `${
      nameArr.map((item, i) => {
        return `
          <p class="energyChart-item">
              <i class="icon" style="color:${i === 3 ? '#fff' : data.color}">
                    ${
          new Array(1).fill('').map(() => {
            switch (i) {
              case 0:
                return '一'
              case 1:
                return '···'
              case 2:
                return temp > 0 ? '↑' : '↓'
            }
          })[0]
        }
              </i>
              <span class="name">${item.name}</span>
              <span>${formatToFixed(item.num)}</span>
              <span>${unit}</span>
          </p>`
      }).join("")
    }`
  }
  myChart.clear()
  myChart.setOption(option)
}

const drawChart = (chatDom, n) => {
  let chartDom = chatDom
  if (chartDom == null) {
    return
  }
  echarts.dispose(chartDom)
  myCharts['myChart' + n] = echarts.init(chartDom)
  myCharts['myChart' + n].group = 'sameControls';
  const option = {
    grid: [
      {
        top: 29,
        left: 90,
        right: 90,
        height: 100
      },
    ],
    axisPointer: {
      type: 'shadow',
      link: {xAxisIndex: 'all'},
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(61,57,48,0.8)',
      borderColor: 'rgba(149,149,149,0.8)',
      textStyle: {
        color: '#fff'
      },
    },
    xAxis: [
      {
        data: ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00'],
        boundaryGap: false,
        axisLine: {
          show: true,
          onZero: false,
        },

        min: 'dataMin',
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLabel: {
          show: true,
          color: 'rgba(165,166,166,1)',
          fontSize: '12',
        },
      }
    ],
    yAxis: [
      {
        name: '度日数单耗 W/m²·℃',
        offset: 20,
        nameTextStyle: {
          padding: [0, 0, 0, -10],
          color: '#fff',
          fontSize: '14',
          opacity: 0.7,
          align: 'left',
          fontWeight: 'normal'
        },
        nameLocation: 'end',
        position: 'left',
        axisTick: {show: false},
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(52,52,52,1)'
          }
        },
        axisLine: {show: false,},
        axisLabel: {
          show: true,
          align: 'left',
          showMinLabel: false,
          color: 'rgba(165,166,166,1)',
          fontSize: '14',
          formatter: (val) => {
            switch (true) {
              case val < 1000:
                return val
              case val >= 1e3 && val < 1e4:
                return (val / 1e3).toFixed(1) + 'k'
              default:
                return (val / 1e4).toFixed(1) + 'w'
            }
          }
        },

      },
    ],
    series: [
      {
        name: '度日数单耗',
        type: 'line',
        symbol: 'image://',
        data: [-1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, -12, 13, 14, 15, 16, 17, 18, 19, -20, 21, 22, -23, 24],
        markLine: {
          symbol: "none",
          silent: true,
          data: [{
            yAxis: 5,
            label: {
              show: true,
              position: 'start',
              color: 'rgba(238,145,75,1)',
            }
          }]
        },
        lineStyle: {
          type: 'solid'
        }
      },
    ]
  }
  option && myCharts['myChart' + n].setOption(option)
}
</script>

<style lang="scss" scoped>
.energyChart {
  width: 100%;
  height: 175px;
  margin-top: 5px;
}
</style>
<style lang="scss">
.energyChart-item {
  display: flex;
  align-items: center;
  margin: 10px 0;

  &:last-child {
    margin-bottom: 0;
  }

  .icon {
    display: inline-block;
    width: 12px;
    text-align: center;
    margin-right: 10px;
  }

  .name {
    display: inline-block;
    width: 120px;
    margin-right: 20px;
  }
}
</style>