JS导出Echarts图标数据为Excel表格

开发需求需要在Echarts图表右上角添加一个按钮，将图表数据下载为Excel，下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求

HTML结构：

 <template>
    <div style="cursor: pointer; position: absolute; right: 1rem; z-index: 10">
      <el-tooltip
        v-if="Option?.legend"
        popper-class="download_tooltip"
        placement="bottom"
        content="保存为Excel"
        effect="light"
        :show-arrow="false"
        hide-after="0"
      >
        <el-button
          class="light_button"
          type="text"
          plain
          icon="Document"
          @click="downloadExcel()"
        ></el-button>
      </el-tooltip>
    </div>
</template>

JS代码：

const downloadExcel = () => {
 let str = "";
  str = [...Option.legend.data].unshift("日期");
  str = str.join(",") + "\n";//图例数据作为标题，逗号隔开代表一个单元格
  const legend = props.Option.legend.data; //获取到图例数据
  const series = props.Option.series;  //获取到图表数据
  const xAxis = props.Option.xAxis.data; //x轴数据作为excel表格第一列数据
  const seriesData = {};
  series.forEach((item) => {
    seriesData[item.name] = item.data; //将图表每列标题与数据对应
  });
  xAxis.forEach((item, i) => {
    str += `${item + "\t"},`; //往str添加每行第一个数据
    legend.forEach((el) => {
      str += `${seriesData[el][i] + "\t"},`; //添加进去图表每行对应的数据
    });
    str += "\n";//添加完一行后就换行
  });
  //防止中文乱码
  const uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str);
  const link = document.createElement("a"); //在页面创建a链接并点击下载文件
  link.href = uri;
  // 对下载的文件命名
  link.download = `${Option.title.text}.csv`;
  link.click();
}