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

视图并导出excel"/>

【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});}
}