JS导出Echarts图标数据为Excel表格

开发需求需要在Echarts图表右上角添加一个按钮，将图表数据下载为Excel，下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求

HTML结构：

 <template><div style="cursor: pointer; position: absolute; right: 1rem; z-index: 10"><el-tooltipv-if="Option?.legend"popper-class="download_tooltip"placement="bottom"content="保存为Excel"effect="light":show-arrow="false"hide-after="0"><el-buttonclass="light_button"type="text"plainicon="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();
}

JS导出Echarts图标数据为Excel表格相关推荐

ssh导出数据库的数据到Excel表格
最近在项目开发过程中,实现了一个excel表格导入数据到数据库,最近又在开发一个功能就是把数据库的数据导出来到excel表格中,觉得这个功能不错,便写出来和大家分享一下, 第一步:导入所需要的poi的 ...
如何在 Vue 中导出数据至 Excel 表格 - 卡拉云
本文首发:<如何在 Vue 中导出数据至 Excel 表格 - 卡拉云> 我们经常需要在 Vue 搭建的后台管理系统里导出数据到 Excel / CSV ,方便我们将数据共享给其他同学或在 ...
百度指数常见php框架,怎么导出数据到excel表格-如何将百度指数数据导出到Excel表格...
如何将百度指数数据导出到Excel表格第一步:打开CAD.CAD命令行输入"Li"."选择对象"选需要提取坐标的多段线.回车. 第二步:将CAD文本框中的数据 ...
如何导出数据到Excel表格
开发工具与关键技术:Visual Studio.MVC 作者:幻奏撰写时间:2019.5.5 我们在日常的生活中常常会看到很多的数据,有时,我们不一定只是在项目里面看到数据,可能我们还要在其他的地方 ...
vb用数组方式快速导出MSFlexGrid表格数据到Excel表格中
本来从MSFlexGrid或MSHFlexGrid导出数据到Excel中,是一个非常简单的问题,但论坛里还是经常有人问如何导出,有的虽然知道用单元格赋值方式循环导出,但速度太慢,因此写了一个通用的数据 ...
使用Navicat 导出 MySQL 数据库表结构、表数据到Excel表格中
文章目录 1 摘要 2 数据导出 2.1 导出数据库表结构至Excel 2.2 导出数据库表结构为 SQL 2.3 导出数据库表数据至Excel 3 推荐参考资料 1 摘要在编写项目设计文档的时候, ...
标题vue导出表格数据，excel表格打不开
vue导出表格数据,excel表格打不开代码如下,当时是将**responseType: 'blob'**写在{headers: getHeader() }外面,导致问题一直没解决,后来经过度娘,了 ...
从浏览器里面的数据导出数据到Excel表格
从浏览器里面的数据导出数据到Excel表格开发工具与关键技术:Visual Studio 2015 作者:李仁海撰写时间:2019.5.5 一. 导出数据到Excel表格 1. public.加上 ...
JavaScript导出图片和数据到Excel
JavaScript导出图片和数据到Excel 以下方法可以利用json数据将图片地址生成图片导出到Excel,同样也可以将数据导出到Excel.解决网上许多方法关于导出图片到Excel却无法让图片在 ...

JS导出Echarts图标数据为Excel表格

JS导出Echarts图标数据为Excel表格相关推荐

最新文章

热门文章