2020-11-03

vue项目中把echart中的数据导出成Excel的格式
本次借鉴了此文章然后做了一些改动。
由于项目需要把使用echart做的统计数据导出成Excel的格式，刚开始不知道怎么做，经过网上查询也没找到VUE项目关于echart统计数据导出Excel的形式，这里主要用到了jquery和jquery的一个导出Excel的插件jquery-table2excel.js，
首先要全局引入jquery 具体引入参考这边文章vue项目引入jquery，然后是把jquery-table2excel.js引入到项目中，把下载的jquery-table2excel.js文件放在项目文件名为static的文件名下面，由于jquery-table2excel.js文件是采用es5的形式来写的，未采用export dafault xxx 的形式来写，因此要对源文件进项改写，改写很简单，把立即执行函数，把原先的(function（）{})改写成function table2excel(){}，然后调用次函数
具体如下图所示

调用，然后以export default的形式来暴露出来

然后就可以在本地项目的组件中调用了，
使用import from …/…/static/jquery-table2excel.js来引入。
之后是导出Excel格式的数据
主要是在echart中的toolbox来进行改写，具体如下图所示：

var linechar=this.$refs.tzlfx;
            if(linechar){
                this.charts = echarts.init(linechar);
                this.charts.setOption({
                    toolbox:{
                        show:true,
                        feature:{
                            dataView:{
                                title:'数据视图',
                                readOnly:false,
                                show:true,
                                lang:['数据视图','关闭','导出Excel'],
                                contentToOption:function(opts){
                                    $('#tableExcel_Day').table2excel({
                                        exclude:'.noExl',
                                        filename:'不同强度的TC年频数变化',
                                        name:'Excel Document Name',
                                        fileext:'.xlsx',
                                        exclude_img:false,
                                        exclude_links:false,
                                        exclude_inputs:false
                                    });
                                },
                                optionToContent:function(opt){
                                    var axisData = opt.xAxis[0].data;//坐标数据
                                    var series = opt.series;//数据
                                    var tdHeads = '<td style="padding:0 10px">年份</td>';//表头第一列
                                    var tdBodys = '';//表数据

                                    var nameData = new Array('SuperTY','STY','TY','STS','TS','TD')
                                    for(var i=0;i<nameData.length;i++){
                                        tdHeads+='<td style="padding:0 10px">'+nameData[i]+'</td>'
                                    }
                                    var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                                    //绘制表数据
                                    for(var i=0;i<axisData.length;i++){
                                        for(var j=0;j<series.length;j++){
                                            var temp=series[j].data[i];
                                            if(temp != null && temp != undefined){
                                                tdBodys += '<td>' + temp +'</td>'
                                            }else{
                                                tdBodys += '<td></td>'
                                            }
                                        }
                                        table += '<tr><td style="padding:0 10px">'+ axisData[i] + '</td>' + tdBodys + '</tr>' ;
                                        tdBodys = '';
                                    }
                                    table += '</tbody></table>';
                                    return table
                                },
                            }
                        },
                        padding:[13,160,15,20]
                    },
                    title:{
                        text:'不同强度TC年变化趋势',
                        left:'center',
                        top:15
                    },
                    tooltip:{
                        trigger:'axis',
                    },
                    color:['red','purple','orange','yellow','blue','green'],
                    legend:{
                        data:['SuperTY','STY','TY','STS','TS','TD'],
                        orient:'vertical',
                        x:'right',
                        padding:[5,60,15,20]
                    },
                    xAxis:{
                        type:'category',
                        data:this.years,
                        name:'年份'
                    },
                    yAxis:{
                        type:'value',
                        name:'频数'
                    },
                    series:[
                        {
                            name:'SuperTY',
                            type:'line',
                            data:this.superTY_year,
                            smooth:true
                        },
                        {
                            name:'STY',
                            type:'line',
                            data:this.sty_year,
                            smooth:true
                        },
                        {
                            name:'TY',
                            type:'line',
                            data:this.ty_year,
                            smooth:true
                        },
                        {
                            name:'STS',
                            type:'line',
                            data:this.sts_year,
                            smooth:true
                        },
                        {
                            name:'TS',
                            type:'line',
                            data:this.ts_year,
                            smooth:true
                        },
                        {
                            name:'TD',
                            type:'line',
                            data:this.td_year,
                            smooth:true
                            
                        },
                    ]
                },true)
            }

结果展示