首页vue使用xlsx导出柱状图示例

vue使用xlsx导出柱状图示例

时间: 2023-05-16 22:04:54 浏览: 166

非常感谢您的提问。以下是一个使用 Vue 和 xlsx 库导出柱状图的示例代码： ```javascript <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 文件。

阅读全文