请问导出按钮是直接写在条形图的方法中吗，还是写在上面给条形图的div中呢，应该用什么方法才能导出表格呢？
条形图代码如下：
//获取条形图数据
async getStockList() {
const {data: res} = await this.$http.get("allStock", {params: this.queryInfo});
this.stockList = res.data;//用户列表
this.total = res.numbers;//总用户数
this.xData = this.stockList.map(item => item.itemname);
this.yData = this.stockList.map(item => item.numbers);
this.getEchartData();
getEchartData() {
var myChart = echarts.init(document.getElementById('tiaoxing'));
let option = {
title: {
text: "库存条形图"
},
legend: {
data: ["库存量"]
},
xAxis: {
data: this.xData
},
yAxis: {
type: 'value'
},
series: [
{
name: "库存量",
data: this.yData,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: '#b8c1ec'
},
}
]
}
myChart.setOption(option);
},
要将 Echarts 条形图导出为 Excel 表格，可以在 Echarts 官方提供的 echarts-stat 库中使用 exportExcel 方法实现，
并需要引入 FileSaver.js 库来实现文件下载功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Echarts导出Excel</title>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts-stat/1.1.0/echarts-stat.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
<div id="chart" style="width: 600px; height: 400px;"></div>
<button id="export">导出</button>
<script>
var data = [
['类别', '销量'],
['衬衫', 5],
['羊毛衫', 20],
['雪纺衫', 36],
['裤子', 10],
['高跟鞋', 10],
['袜子', 20]
];
var chartDom = document.getElementById('chart');
var myChart = echarts.init(chartDom);
var option = {
xAxis: { type: 'category' },
yAxis: {},
series: [{
type: 'bar',
data: data.slice(1),
encode: {
x: 0,
y: 1
}
}]
};
myChart.setOption(option);
var btn = document.getElementById('export');
btn.addEventListener('click', function() {
var data = myChart.getOption().series[0].data;
var header = ['类别', '销量'];
var rows = [header];
for (var i = 0; i < data.length; i++) {
var row = [];
row.push(data[i].name);
row.push(data[i].value);
rows.push(row);
}
var filename = 'chart.xlsx';
var sheetname = 'Sheet1';
var result = echarts.dataTool.exportExcel({
filename: filename,
sheetname: sheetname,
data: rows
});
saveAs(new Blob([result], { type: 'application/octet-stream' }), filename);
});
</script>
</body>
</html>