vue使用xlsx导出柱状图示例

非常感谢您的提问。以下是一个使用 Vue 和 xlsx 库导出柱状图的示例代码：

<template>
  <div>
    <button @click="exportChart">导出图表</button>
    <div ref="chart"></div>
  </div>
</template>

<script>
import * as XLSX from 'xlsx';
import Highcharts from 'highcharts';
import Exporting from 'highcharts/modules/exporting';

Exporting(Highcharts);

export default {
  data() {
    return {
      chartData: [
        ['Month', 'Sales'],
        ['Jan', 1000],
        ['Feb', 2000],
        ['Mar', 3000],
        ['Apr', 4000],
        ['May', 5000],
        ['Jun', 6000],
      ],
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      Highcharts.chart(this.$refs.chart, {
        chart: {
          type: 'column',
        },
        title: {
          text: 'Monthly Sales',
        },
        xAxis: {
          type: 'category',
        },
        yAxis: {
          title: {
            text: 'Sales',
          },
        },
        series: [
          {
            name: 'Sales',
            data: this.chartData.slice(1),
          },
        ],
      });
    },
    exportChart() {
      const wb = XLSX.utils.book_new();
      const ws = XLSX.utils.aoa_to_sheet(this.chartData);
      XLSX.utils.book_append_sheet(wb, ws, 'Sales');
      XLSX.writeFile(wb, 'sales.xlsx');
    },
  },
};
</script>

这个示例使用了 Highcharts 库来绘制柱状图，并使用 xlsx 库将数据导出为 Excel 文件。在页面上点击“导出图表”按钮即可将图表数据导出为 sales.xlsx 文件。