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

2024-07-03 18:37| 来源: 网络整理| 查看: 265

根据折线图、柱状图原有数据实现表格视图转换，然后再利用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 = ''+ thName +''; //表头第一列 var tr = '', td = ''; //表数据 //组装表头 $.each(legend, function (index, value){ tdHeads += '' + value + ''; }) //组装表数据 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 += '' + (temp || '') + ' '; } tr += '' + axisData[i] + '' + td + ''; td = ''; } var table = '' + '' + '' + tdHeads + ' ' + ''+tr+'' + ''; return table; }else if(chartType === 'excel'){ // 表格导出 $("#tableExcel").table2excel({ exclude: ".noExl", //过滤位置的 css 类名 filename: thName, //文件名称 name: thName, exclude_img: true, exclude_links: true, exclude_inputs: true }); } }

折线图表格视图示例在这里插入图片描述

【本文地址】

公司简介

联系我们