【echarts】实现折线图、柱状图转换为表格视图并导出excel

根据折线图、柱状图原有数据实现表格视图转换，然后再利用jquery.table2excel.js并实现excel导出，此示例需要引入jquery.table2excel.js类库，具体功能实现直接上代码~

jquery.table2exce.js下载地址

option:{
	 toolbox: {
          show: true,
            feature: {
                saveAsImage: {
                    show: true
                },
                dataView: { // 数据视图
                    show: true,
                    readOnly: false,
                    lang: [' ', '关闭', '导出Excel'],
                     optionToContent: function (opt) {
                        return chartToTable('table', '日期',  opt); //图形数据转成表格
                    },
                    contentToOption: function (opts) {
                        chartToTable('excel',  '导出文件名称');//表格导出
                    }
                },
            },
            top: 0,
            right: 15,
            itemSize: 20,//工具栏 icon 的大小
            emphasis: {//触发时
                iconStyle: {
                    borderWidth: 2,
                    borderColor: "#59d2d4",//图形的描边颜色
                }
            }
       },
}

/**
 * 图表数据转成表格
 * @param {String} chartType chart类型
 * @param {String} thName 表头第一列名称/文件名称
 * @param {Object} opt chart配置
 * */
function chartToTable(chartType, thName, opt){
    if(chartType === 'table'){  //根据option数据转换为表格
        var axisData = opt.xAxis[0].data; //坐标数据
        var series = opt.series; //折线图数据
        var legend = opt.legend[0].data;
        var th_width = 100 / (legend.length + 1) + '%';
        var tdHeads = '<th class="table-fixed-th" style="width: '+th_width+';text-align: center">'+ thName +'</th>'; //表头第一列
        var tr = '', td = ''; //表数据
        //组装表头
        $.each(legend, function (index, value){
            tdHeads += '<th class="table-fixed-th" style="width: '+th_width+';text-align: center">' + value + '</th>';
        })
        //组装表数据
        for (var i = 0, l = axisData.length; i < l; i++) {
            for (var j = 0; j < series.length ; j++) {
                var temp = series[j].data[i];
                td += '<td style="width: '+th_width+'">' + (temp || '') + ' </td>';
            }
            tr += '<tr><td style="width: '+th_width+'">' + axisData[i] + '</td>' + td + '</tr>';
            td = '';
        }
        var table = '<table id="tableExcel" class="layui-table text-center" lay-size="sm">' +
            '<thead class="layui-table-header" style="top: '+15+'px;width: 99.5%">' +
            '<tr style="width: 100%;">' + tdHeads + ' </tr></thead>' +
            '<tbody>'+tr+'</tbody>' +
            '</table>';
        return table;
    }else if(chartType === 'excel'){ 
	    // 表格导出
        $("#tableExcel").table2excel({
            exclude: ".noExl", //过滤位置的 css 类名
            filename: thName, //文件名称
            name: thName,
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    }
}