vue封装echart图数据导出excel表格插件

依赖于js-export-excel
下载：

npm install js-export-excel

具体的组件代码如下：

在echart页面中使用该组件，以折线图为例，贴出主要代码。
提示：先确保自己的项目对echart做了相应的处理，本例的前提是已经做了相应的处理，直接在封装的echart组件里面直接加了下载表格的组件，通过showExcle来控制echart是否需要表格下载插件。

特别提醒：
目前根据项目中遇到的数据格式分为了三大类数据格式，对应的传递不同的类型。支持的echart图类型，折线图为line,饼图，词云图，雷达图，地图类型为pie,柱状图为bar。凡是数据格式为[{name:’’,value:’’},{name:’’,value:’’}…]这样的数组对象的，type就为pie；数据格式为data: [1,2,3,4…]，dataName: [类型1,类型2,类型3,类型4,…]这样的，type就为bar;数据格式为
或者

type为line,并且lineExcleType上图第一个为oneArr,第二个为threeArr。如有不一样的数据格式，需要自行修改表格下载组件里面的代码。
最终效果如下：

excel的下载小图标使用的是阿里云图库的icon。
下载的折线图数据表效果如下：

其实单独把下载那块的逻辑单独提取出来，去封装一个公共方法，挂载到全局里面，即用即调，也是完全可以的，比上面还要简单些，感兴趣的同学可以自己操作一下，哈撒给！！！。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！