开发需求需要在Echarts图表右上角添加一个按钮,将图表数据下载为Excel,下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求
HTML结构:
<template>
<div style="cursor: pointer; position: absolute; right: 1rem; z-index: 10">
<el-tooltip
v-if="Option?.legend"
popper-class="download_tooltip"
placement="bottom"
content="保存为Excel"
effect="light"
:show-arrow="false"
hide-after="0"
>
<el-button
class="light_button"
type="text"
plain
icon="Document"
@click="downloadExcel()"
></el-button>
</el-tooltip>
</div>
</template>
JS代码:
const downloadExcel = () => {
let str = "";
str = [...Option.legend.data].unshift("日期");
str = str.join(",") + "\n";//图例数据作为标题,逗号隔开代表一个单元格
const legend = props.Option.legend.data; //获取到图例数据
const series = props.Option.series; //获取到图表数据
const xAxis = props.Option.xAxis.data; //x轴数据作为excel表格第一列数据
const seriesData = {};
series.forEach((item) => {
seriesData[item.name] = item.data; //将图表每列标题与数据对应
});
xAxis.forEach((item, i) => {
str += `${item + "\t"},`; //往str添加每行第一个数据
legend.forEach((el) => {
str += `${seriesData[el][i] + "\t"},`; //添加进去图表每行对应的数据
});
str += "\n";//添加完一行后就换行
});
//防止中文乱码
const uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
const link = document.createElement("a"); //在页面创建a链接并点击下载文件
link.href = uri;
// 对下载的文件命名
link.download = `${Option.title.text}.csv`;
link.click();
}