Vue Apexcharts时间线图表：项目不可见时数据标签仍显示问题

针对时间线图表中，任务超出可视范围（过期或拖拽后）仍显示数据标签并堆叠的问题，可以通过自定义数据标签格式化逻辑结合图表可视范围判断来解决，Vue和React版本通用。

核心思路 #

利用ApexCharts提供的getXaxisRange()方法获取当前x轴的可视时间范围，在dataLabels.formatter中判断每个数据点的起止时间是否完全超出该范围：

• 若完全超出范围，返回空字符串隐藏标签
• 若部分或完全在范围内，正常显示标签
• 监听图表updated事件，确保拖拽或视图变化后重新计算标签显示状态

Vue版本实现示例 #

<template>
  <apexchart
    ref="timelineChart"
    type="rangeBar"
    :options="chartOptions"
    :series="series"
  />
</template>

<script setup>
import VueApexCharts from 'vue3-apexcharts'

const timelineChart = ref(null)
const series = ref([
  {
    name: '项目任务',
    data: [
      { x: '需求调研', y: [new Date('2024-01-01').getTime(), new Date('2024-01-07').getTime()] },
      { x: '原型设计', y: [new Date('2024-01-05').getTime(), new Date('2024-01-12').getTime()] },
      { x: '开发阶段', y: [new Date('2024-01-10').getTime(), new Date('2024-01-25').getTime()] },
      { x: '测试验收', y: [new Date('2024-01-22').getTime(), new Date('2024-01-30').getTime()] },
      // 已过期的任务，测试用
      { x: '前期准备', y: [new Date('2023-12-20').getTime(), new Date('2023-12-31').getTime()] }
    ]
  }
])

const chartOptions = ref({
  chart: {
    type: 'rangeBar',
    height: 380,
    events: {
      // 图表更新（拖拽/缩放）后触发重算标签
      updated: (chart) => chart.updateOptions({})
    }
  },
  xaxis: {
    type: 'datetime'
  },
  dataLabels: {
    enabled: true,
    formatter: (val, opts) => {
      const chartInstance = timelineChart.value?.chart
      if (!chartInstance) return val
      
      const { min, max } = chartInstance.getXaxisRange()
      const [startTime, endTime] = opts.w.series[opts.seriesIndex].data[opts.dataPointIndex].y
      
      // 判断任务是否完全超出可视范围
      const isOutOfView = endTime < min || startTime > max
      return isOutOfView ? '' : val
    }
  }
})
</script>

React版本实现示例 #

import React, { useRef, useState, useEffect } from 'react'
import ApexCharts from 'apexcharts'

const TimelineChart = () => {
  const chartContainer = useRef(null)
  const chartInstance = useRef(null)
  const [series] = useState([
    {
      name: '项目任务',
      data: [
        { x: '需求调研', y: [new Date('2024-01-01').getTime(), new Date('2024-01-07').getTime()] },
        { x: '原型设计', y: [new Date('2024-01-05').getTime(), new Date('2024-01-12').getTime()] },
        { x: '开发阶段', y: [new Date('2024-01-10').getTime(), new Date('2024-01-25').getTime()] },
        { x: '测试验收', y: [new Date('2024-01-22').getTime(), new Date('2024-01-30').getTime()] },
        { x: '前期准备', y: [new Date('2023-12-20').getTime(), new Date('2023-12-31').getTime()] }
      ]
    }
  ])

  useEffect(() => {
    if (!chartContainer.current) return

    chartInstance.current = new ApexCharts(chartContainer.current, {
      chart: {
        type: 'rangeBar',
        height: 380,
        events: {
          updated: (chart) => chart.updateOptions({})
        }
      },
      xaxis: {
        type: 'datetime'
      },
      dataLabels: {
        enabled: true,
        formatter: (val, opts) => {
          if (!chartInstance.current) return val
          
          const { min, max } = chartInstance.current.getXaxisRange()
          const [startTime, endTime] = opts.w.series[opts.seriesIndex].data[opts.dataPointIndex].y
          
          const isOutOfView = endTime < min || startTime > max
          return isOutOfView ? '' : val
        }
      },
      series
    })

    chartInstance.current.render()

    return () => chartInstance.current?.destroy()
  }, [series])

  return <div ref={chartContainer} />
}

export default TimelineChart

关键说明 #

1. 范围判断逻辑：仅当任务的结束时间早于可视范围最小值，或开始时间晚于可视范围最大值时，才隐藏标签，确保部分可见的任务仍能正常显示标签。
2. updated事件监听：拖拽图表或缩放视图后，触发一次空的updateOptions调用，强制重新执行所有数据标签的格式化逻辑，保证标签状态与当前视图同步。
3. 适配数据结构：示例中使用官方标准的y: [start, end]时间数组结构，若你的数据使用x1/x2字段，只需将判断逻辑中的startTime/endTime替换为对应字段即可。

内容的提问来源于stack exchange，提问作者Nguyen Hieu