在Node14+Nuxt2.14.7+Highcharts8中添加全屏按钮

1. 修正Exporting配置的位置 #

你当前将exporting配置放在了组件根层级，而Highcharts的配置项必须嵌套在chartOptions内部才能生效。将exporting移至chartOptions中：

data() {
  return {
    // ...其他data内容
    chartOptions: {
      // ...现有配置
      exporting: {
        buttons: {
          contextButton: {
            menuItems: ['viewFullscreen', 'downloadPNG', 'downloadJPEG', 'downloadPDF']
          }
        }
      },
      // ...其他chartOptions配置
    }
  }
}

2. 确保正确导入Highcharts必需模块 #

Highcharts 8的全屏功能依赖exporting和full-screen模块，在Nuxt 2中需要通过插件手动引入：

1. 在项目plugins目录下创建highcharts.js：

import Highcharts from 'highcharts'
import Exporting from 'highcharts/modules/exporting'
import FullScreen from 'highcharts/modules/full-screen'

Exporting(Highcharts)
FullScreen(Highcharts)

// 若使用vue-highcharts组件，需挂载到Vue：
// import VueHighcharts from 'vue-highcharts'
// Vue.use(VueHighcharts, { Highcharts })

2. 在nuxt.config.js中注册该插件：

export default {
  plugins: [
    { src: '@/plugins/highcharts.js', mode: 'client' } // 仅客户端加载
  ]
}

3. 修复Chart事件的语法缩进问题 #

你的代码中chart.events的缩进存在语法错误，导致事件无法被正确识别。修正后的chart配置：

chart: {
  renderTo: "container",
  defaultSeriesType: "line",
  backgroundColor: "rgba(0,0,0,0)",
  zoomType: 'xy',
  panning: { enabled: true, type: "xy" },
  events: { // 此处需与panning同级，修正缩进
    fullscreenOpen: function () {
      this.update({
        title: {
          style: {
            fontSize: '30px'
          }
        },
        subtitle: {
          style: {
            color: 'red'
          }
        }
      });
    },
    fullscreenClose: function () {
      this.update({
        title: {
          style: {
            fontSize: '18px'
          }
        }
      });
    }
  }
},

4. 手动自定义全屏按钮（若内置菜单无效） #

如果上述步骤仍未生效，可以手动添加独立的全屏按钮，通过Highcharts的API控制全屏状态：

在组件的mounted钩子中添加按钮逻辑：

mounted() {
  const chart = this.$refs.chart.chartInstance // 假设你的图表组件有ref="chart"
  const container = chart.container

  // 创建全屏按钮
  const fullscreenBtn = document.createElement('button')
  fullscreenBtn.innerText = '全屏'
  fullscreenBtn.style.position = 'absolute'
  fullscreenBtn.style.top = '10px'
  fullscreenBtn.style.right = '10px'
  container.appendChild(fullscreenBtn)

  // 绑定全屏事件
  fullscreenBtn.addEventListener('click', () => {
    if (!chart.fullscreen.isFullscreen) {
      chart.fullscreen.open()
    } else {
      chart.fullscreen.close()
    }
  })
}

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