rw941123 2023-03-27 20:41 采纳率: 80%
浏览 20
已结题

将echarts条形图导出excel表格

请问导出按钮是直接写在条形图的方法中吗，还是写在上面给条形图的div中呢，应该用什么方法才能导出表格呢？
条形图代码如下：


//获取条形图数据
async getStockList() {
      const {data: res} = await this.$http.get("allStock", {params: this.queryInfo});
      this.stockList = res.data;//用户列表
      this.total = res.numbers;//总用户数
      this.xData = this.stockList.map(item => item.itemname);
      this.yData = this.stockList.map(item => item.numbers);
      this.getEchartData();



getEchartData() {
      var myChart = echarts.init(document.getElementById('tiaoxing'));
      let option = {
        title: {
          text: "库存条形图"
        },
        legend: {
          data: ["库存量"]
        },
        xAxis: {

          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: "库存量",
            data: this.yData,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: '#b8c1ec'
            },
          }
        ]
      }
      myChart.setOption(option);
    },
  • 写回答

1条回答 默认 最新

  • 明月落乌江 2023-03-27 21:11
    关注

    要将 Echarts 条形图导出为 Excel 表格，可以在 Echarts 官方提供的 echarts-stat 库中使用 exportExcel 方法实现，
    并需要引入 FileSaver.js 库来实现文件下载功能

    
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Echarts导出Excel</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts-stat/1.1.0/echarts-stat.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
</head>
<body>
  <div id="chart" style="width: 600px; height: 400px;"></div>
  <button id="export">导出</button>
  <script>
    var data = [
      ['类别', '销量'],
      ['衬衫', 5],
      ['羊毛衫', 20],
      ['雪纺衫', 36],
      ['裤子', 10],
      ['高跟鞋', 10],
      ['袜子', 20]
    ];
    var chartDom = document.getElementById('chart');
    var myChart = echarts.init(chartDom);
    var option = {
      xAxis: { type: 'category' },
      yAxis: {},
      series: [{
        type: 'bar',
        data: data.slice(1),
        encode: {
          x: 0,
          y: 1
        }
      }]
    };
    myChart.setOption(option);
    var btn = document.getElementById('export');
    btn.addEventListener('click', function() {
      var data = myChart.getOption().series[0].data;
      var header = ['类别', '销量'];
      var rows = [header];
      for (var i = 0; i < data.length; i++) {
        var row = [];
        row.push(data[i].name);
        row.push(data[i].value);
        rows.push(row);
      }
      var filename = 'chart.xlsx';
      var sheetname = 'Sheet1';
      var result = echarts.dataTool.exportExcel({
        filename: filename,
        sheetname: sheetname,
        data: rows
      });
      saveAs(new Blob([result], { type: 'application/octet-stream' }), filename);
    });
  </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

问题事件

  • 系统已结题 4月5日
  • 已采纳回答 3月28日
  • 创建了问题 3月27日

悬赏问题

  • ¥15 远程桌面文档内容复制粘贴，格式会变化
  • ¥15 关于#java#的问题：找一份能快速看完mooc视频的代码
  • ¥15 这种微信登录授权 谁可以做啊
  • ¥15 请问我该如何添加自己的数据去运行蚁群算法代码
  • ¥20 用HslCommunication 连接欧姆龙 plc有时会连接失败。报异常为“未知错误”
  • ¥15 网络设备配置与管理这个该怎么弄
  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题