echarts圖表資料匯出excel表格
阿新 • • 發佈：2021-01-20
技術標籤：javascript前端
html
以柱狀圖為例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script src="./jquery/jquery.min.js"></script> <script src="./echarts/echarts.js"></script> <script src="./xlsx.core.js"></script> <script src="./excelIndex.js"></script> <body> <div style="width: 50vw;height: 30vh;" id="attribute"></div> <script> var mycharts = echarts.init(document.getElementById('attribute')) var data1 = ['東京', '西京', '南京', '北京', '上京', '中京', '下京'] var data2 = [10, 52, 200, 334, 390, 330, 220] option = { color: ['#3398DB'], tooltip: { trigger: 'axis', axisPointer: { // 座標軸指示器，座標軸觸發有效 type: 'shadow' // 預設為直線，可選為：'line' | 'shadow' } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', data: data1, axisTick: { alignWithLabel: true } }], yAxis: [{ type: 'value' }], toolbox: { feature: { myTools: { show: true, title: '匯出', icon: 'path://M745 184.3V1H93v1022.5h836V184.3zM500.8 476.2l76.6-131h67.7L532.5 537.9 445.7 686H378l122.8-209.8z m-0.7 70.3l-6.6-11-112.7-190.3h67.7L525 474.4l8.9 15.2L650.3 686h-67.7l-82.5-139.5z', onclick: function() { var obj1 = {} var arrData = [] for (var i = 0; i < data1.length; i++) { obj1 = { value1: data1[i], value2: data2[i] } arrData.push(obj1) } const header = [{ value1: '省份' }, { value2: '人次' }]; //表格資料，表格名稱 const data = arrData var name = "hello excel" downLoad(header, data, name) } } } }, series: [{ name: '直接訪問', type: 'bar', barWidth: '60%', data: data2 }] }; mycharts.setOption(option); function downLoad(header, data, name) { console.log(name); const doit = new ExportsEXCL(name); doit.downLoad({ header: header, body: data, hasTitle: true }); } </script> </body> </html>
js檔案
function ExportsEXCL(name) { this.downLoad = ({ header = [], body = [], excelName = name, hasTitle = true, }) => { const styleCell = this.setBorderStyle(); const _headers = header.map((v, i) => { let key = Object.keys(v); return Object.assign({}, { v: `${v[key[0]]}<key>${key[0]}`, position: String.fromCharCode(65 + i) + (hasTitle ? 1 : 0) }); }) .reduce( (prev, next) => Object.assign({}, prev, { [next.position]: { v: next.v, s: styleCell } }), {} ); const _body = body .map((v, i) => header.map((k, j) => { let key = Object.keys(k); return Object.assign({}, { v: v[key[0]], position: String.fromCharCode(65 + j) + (i + (hasTitle ? 2 : 1)) }); }) ) .reduce((prev, next) => prev.concat(next)) .reduce( (prev, next) => Object.assign({}, prev, { [next.position]: { v: next.v, s: styleCell } }), {} ); const mergeThead = this.setMergeThead(_headers, hasTitle); const _thead = this.setTableThead(mergeThead); const output = Object.assign({}, _thead, _body); const outputPos = Object.keys(output); const ref = outputPos[0] + ':' + outputPos[outputPos.length - 1]; const wb = { SheetNames: ['mySheet'], Sheets: { mySheet: Object.assign({}, output, { '!ref': ref, }) } }; this.save(wb, `${excelName}.xlsx`); }; this.setTableThead = wb => { for (let key in wb) { let i = wb[key].v.indexOf('<key>'); if (wb[key].v.includes('<key>')) { wb[key].v = wb[key].v.substr(0, i); } } return wb; }; this.setMergeThead = (wb, hasTitle) => { const borderAll = { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } }; return wb; }; this.setBorderStyle = () => { const borderAll = { top: { style: 'thin' }, bottom: { style: 'thin' }, left: { style: 'thin' }, right: { style: 'thin' } }; return { border: borderAll }; }; this.save = (wb, fileName) => { let wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' }; let xw = XLSX.write(wb, wopts); let obj = new Blob([this.s2ab(xw)], { type: '' }); let elem = document.createElement('a'); elem.download = fileName || '下載'; elem.href = URL.createObjectURL(obj); elem.click(); setTimeout(function() { URL.revokeObjectURL(obj); }, 100); }; this.s2ab = s => { if (typeof ArrayBuffer !== 'undefined') { var buf = new ArrayBuffer(s.length); var view = new Uint8Array(buf); for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff; return buf; } else { var buf = new Array(s.length); for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff; return buf; } }; // 根據val查詢Object key this.findKey = (val, obj) => { return Object.keys(obj).find(v => obj[v] === val); }; }
連結：https://pan.baidu.com/s/13VjRm_v5ZYGDd0I0IghJdw
提取碼：1111
//本人小白，有問題請指出謝謝