如何为ApexCharts工具栏添加全屏切换按钮？

完全可以通过ApexCharts的自定义工具栏按钮功能来添加全屏切换选项，以下是Vue项目中的具体实现步骤：

1. 配置自定义工具栏按钮 #

在ApexCharts的配置项中，通过chart.toolbar.customButtons添加自定义的全屏按钮，定义按钮图标与点击事件：

<template>
  <div>
    <apexchart
      ref="chartRef"
      :options="chartOptions"
      :series="series"
    ></apexchart>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import VueApexCharts from 'vue3-apexcharts' // Vue2项目替换为vue-apexcharts

const chartRef = ref(null)
const isFullscreen = ref(false)

// 示例图表数据
const series = [
  { name: '业务数据', data: [30, 40, 35, 50, 49, 60, 70, 91, 125] }
]

const chartOptions = {
  chart: {
    type: 'line',
    toolbar: {
      show: true,
      customButtons: [
        {
          icon: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3h3v3"/><path d="M9 3h3v3"/><path d="M18 21h3v-3"/><path d="M9 21h3v-3"/><path d="M3 9h3v3"/><path d="M3 18h3v-3"/><path d="M21 9h-3v3"/><path d="M3 3v3h3"/></svg>',
          title: '全屏查看',
          onClick: () => toggleFullscreen()
        }
      ]
    }
  },
  xaxis: {
    categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月']
  }
}

// 全屏切换核心逻辑
const toggleFullscreen = () => {
  const chartContainer = chartRef.value.$el.querySelector('.apexcharts-canvas')
  if (!isFullscreen.value) {
    // 进入全屏，兼容主流浏览器
    if (chartContainer.requestFullscreen) {
      chartContainer.requestFullscreen()
    } else if (chartContainer.webkitRequestFullscreen) {
      chartContainer.webkitRequestFullscreen()
    } else if (chartContainer.msRequestFullscreen) {
      chartContainer.msRequestFullscreen()
    }
    // 切换按钮图标为退出全屏样式
    chartOptions.chart.toolbar.customButtons[0].icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"/><path d="M9 3h-6v6"/><path d="M15 21h6v-6"/><path d="M9 21h-6v-6"/><path d="M21 15v6h-6"/><path d="M3 15v6h6"/><path d="M21 9v-6h-6"/><path d="M3 9v-6h6"/></svg>'
    isFullscreen.value = true
  } else {
    // 退出全屏，兼容主流浏览器
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
    // 恢复按钮图标为进入全屏样式
    chartOptions.chart.toolbar.customButtons[0].icon = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3h3v3"/><path d="M9 3h3v3"/><path d="M18 21h3v-3"/><path d="M9 21h3v-3"/><path d="M3 9h3v3"/><path d="M3 18h3v-3"/><path d="M21 9h-3v3"/><path d="M3 3v3h3"/></svg>'
    isFullscreen.value = false
  }
  // 更新图表配置，使图标变化生效
  chartRef.value.updateOptions(chartOptions)
}
</script>

<style scoped>
/* 自定义按钮样式，与原生工具栏按钮对齐 */
.apexcharts-custom-icon {
  cursor: pointer;
  padding: 0 8px;
}
</style>

2. 关键说明 #

• 基于浏览器原生Fullscreen API实现全屏切换，包含了主流浏览器的兼容性处理
• 通过修改customButtons的icon属性，实现进入/退出全屏的图标切换
• 调用updateOptions方法更新图表配置，确保图标变化实时生效
• 可自行替换SVG图标内容，匹配项目的UI风格

3. 注意事项 #

• 全屏操作必须由用户主动触发（如点击按钮），浏览器禁止自动触发全屏
• 若DOM结构有调整，需修改.apexcharts-canvas的选择器以正确获取图表容器
• Vue2项目只需调整组件引入方式与脚本写法，核心逻辑完全通用

内容的提问来源于stack exchange，提问作者Zhanyl Myrzabek kyzy