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 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。
  • ¥20 CST怎么把天线放在座椅环境中并仿真
  • ¥15 任务A：大数据平台搭建（容器环境）怎么做呢？
  • ¥15 YOLOv8obb获取边框坐标时报错AttributeError: 'NoneType' object has no attribute 'xywhr'
  • ¥15 r语言神经网络自变量重要性分析
  • ¥15 基于双目测规则物体尺寸
  • ¥15 wegame打不开英雄联盟
  • ¥15 公司的电脑，win10系统自带远程协助，访问家里个人电脑，提示出现内部错误，各种常规的设置都已经尝试，感觉公司对此功能进行了限制（我们是集团公司）
  • ¥15 救！ENVI5.6深度学习初始化模型报错怎么办？