vue开发使用echarts自定义数据视图样式并且导出excel

先说使用的依赖包

1. 安装插件，这里是两个。

npm install --save xlsx file-saver

2. 引入依赖

import FileSaver from 'file-saver'
import XLSX from 'xlsx'

3. 导出方法

exportExcel () {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '文件名字.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

修改echarts配置

1. 找到toolbox进行修改

toolbox: {
            feature: {
              dataView: {
                show: true,
                readOnly: false,
                lang: ['数据视图', '关闭', '导出Excel'], // 这里将刷新改成其他用途
                optionToContent(opt) {
                  const series = opt.series // 折线图数据
                  const axisData = opt.yAxis[0].data // 这里看你放的是x轴还是y轴
                  let tdHeads = '<td  style="padding: 0 10px">层数</td>' // 表头
                  let tdBodys = '' // 数据
                  series.forEach(function (item) {
                  // 组装表头
                    tdHeads += '<td style="padding: 0 10px">' + item.name + '</td>'
                  })
                  let table = '<table id="exportTab" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>' + tdHeads + ' </tr>'
                  for (let i = 0, l = axisData.length; i < l; i++) {
                    for (let j = 0; j < series.length; j++) {
                    // 组装表数据
                      tdBodys += '<td>' + (series[j].data[i].value !== null ? series[j].data[i].value.toFixed(4) : '-') + '</td>'
                    }
                    table += '<tr><td style="padding: 0 10px">' + (i + 1) + '层</td>' + tdBodys + '</tr>'
                    tdBodys = ''
                  }
                  table += '</tbody></table>'
                  return table
                },
                // 重置刷新事件方法
                contentToOption(opt) {
                  that.exportExcel()
                }
              },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          }

2. 注意this指向，上述的that我是放在options外面

还有一个就是如果是多图表，都可以做导出这里写死id就不可以了，所以做以下修改

1. 修改导出方法

 exportExcel (el) {
      /* generate workbook object from table */
      var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
      var wb = XLSX.utils.table_to_book(document.querySelector(`${el}`), xlsxParam)

      /* get binary string as output */
      var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
      try {
        FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '文件名字.xlsx')
      } catch (e) {
        if (typeof console !== 'undefined') {
          console.log(e, wbout)
        }
      }
      return wbout
}

2. 重置导出方法做传参

  contentToOption(opt) {
    that.exportExcel(opt.children[0].getAttribute('id'))
  }