将echarts的数据视图转换为table表格,并且导出excel

• [ 介绍: ] 在做一个echarts柱状图和折线图的过程中遇到,数据视图的数据并没有对齐的现象。于是本人将数据视图改装成了Table表格显示。由于生产那边看到了数据视图,想要我将数据视图的数据导出来,所以,我将数据视图以excel导出了。开发真难 ☹︎☹︎☹︎。
• 本人用的是vue语言写的
• 需要安装两种依赖:
  1. npm install xlsx --save
  2. npm install file-saver --save 效果图如下:

代码走一波:

一:先引入组件

• import * as echarts from "echarts";
• import FileSaver from "file-saver";
• import XLSX from "xlsx";

二:修改echarts里面dataView数据

dataView: {
  show: true,
  readOnly: true,
  optionToContent: function (opt) {
  //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
  var axisData = opt.xAxis[0].data; //坐标轴
  var series = opt.series; //折线图的数据
  var tdHeads ='<td  style="margin-top:10px; padding: 10px 15px">状态</td>'; //表头
  var tdBodys = "";
  series.forEach(function (item) {
  tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;});
  var table = `<table border="0" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" id="table-content"><tbody><tr>${tdHeads} </tr>`;
  for (var i = 0, l = axisData.length; i < l; i++) {
  for (var j = 0; j < series.length; j++) {
  if (series[j].data[i] == undefined) {
  tdBodys += `<td>${"-"}</td>`;
   } else {
  tdBodys += `<td>${series[j].data[i]}</td>`;
  }
   }
  table += `<tr><td style="padding: 15px 20px">${axisData[i]}</td>${tdBodys}</tr>`;
  tdBodys = "";}
  table += "</tbody></table>";
      return table;
              },
        contentToOption: function (HTMLDomElement, opt) {
           let et = XLSX.utils.table_to_book(
                  document.getElementById("table-content")
                ); //此处传入table的DOM节点
                let etout = XLSX.write(et, {
                  bookType: "xlsx",
                  bookSST: true,
                  type: "array",
                });
                try {
                  FileSaver.saveAs(
                    new Blob([etout], {
                      type: "application/octet-stream",
                    }),
                    "统计数据.xlsx"
                  ); //trade-publish.xlsx 为导出的文件名
                } catch (e) {
                  // console.log(e, etout);
                }
                return etout;
              },
            },