1.使用echarts,实现点击tooltip进入详情页vue3

<template>
  <div class="bar-echart">
    <base-echart :options="options" height="240px"></base-echart>
  </div>
</template>

<script lang="ts" setup>
import BaseEchart from '@/base-ui/echart'
import * as echarts from 'echarts'
import { defineProps, computed, withDefaults, defineEmits } from 'vue'

const props = withDefaults(
  defineProps<{
    lineData: any[][]
    // lineData2: any[]
    xLabels: string[]
    legendData: string[]
    colors: string[]
    left: number
    showDetail: boolean
  }>(),
  {
    left: 60,
    showDetail: false
  }
)
const emit = defineEmits<{
  (e: 'click', payload: string): void
}>()

window.toDetail = function (params) {
  emit('click', params)
}

const options = computed(() => {
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: props.legendData,
      icon: 'circle'
    },
    grid: {
      left: props.left,
      top: 60,
      bottom: 30,
      right: 20
    },
    xAxis: {
      data: props.xLabels,
      axisLabel: {
        // inside: true,
        color: '#999999'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: '#999'
        }
      }
    },
    dataZoom: [
      {
        type: 'inside'
      }
    ],
    series: []
  }
//需要点击tooltip进入详情页的页面才需要使用formatter，
//绑定事件只能通过onclick在DOM元素上绑定，事件触发时调用的方法需要挂载到window上
  if (props.showDetail) {
    option.tooltip.enterable = true
    option.tooltip.formatter = (params: any) => {
      //日期是21.12.14这种格式，转换为2021/12/14这种格式
      const arr = params[0].axisValue.split('.')
      arr.splice(0, 1, '20' + arr[0])
      const date = arr.join('/')
      let res = `
              <div >
                <div class="flex align-center">
                  <span class="ml-2">${params[0].axisValue}</span>
                  <span 
                    style="font-weight:bold;font-size: 12px;color:#4f78ed" 
                    class="ml-auto" 
                    onclick="toDetail('${date}')">详情></span>
                </div>
              `
      params.forEach((item) => {
        res += `
                <div >
                  ${item.marker}
                  <span style="font-size: 12px;">${item.seriesName}</span>
                  <span style="font-weight:bold;font-size: 12px;">${item.value}</span>
                </div>
              `
      })
      res += '</div>'
      return res
    }
  }
  props.legendData.forEach((item, index) => {
    option.series.push({
      name: item,
      type: 'bar',
      showBackground: true,
      itemStyle: {
        color: props.colors[index]
      },
      emphasis: {
        itemStyle: {
          color: props.colors[index]
        }
      },
      data: props.lineData[index]
    })
  })

  return option
})
</script>

上面重点看这两段代码