KA冉KA 2021-03-29 13:14 采纳率: 34.4%
浏览 362
已结题

angular使用echarts中dataView(数据视图),如何下载数据视图的列表

如何下载 导出这个数据视图列表

  • 写回答

1条回答 默认 最新

  • KA冉KA 2021-04-28 11:30
    关注
    toolbox: {
       top: '12%',
       feature: {
          dataView: {
             show: true, lang: ['', '关闭','导出excel'], title: '数据视图', optionToContent: function(opt) {
                let axisData = opt.xAxis[0].data;
                let series = opt.series;
                let tdHeads = '<td style="padding: 6px 10px">名称</td>';
                series.forEach(function(item) {
                   tdHeads += '<td style="padding: 6px 10px">' + item.name + '</td>';
                });
                let table = '<table id="dataview" border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center">
                                <tbody><tr>' + tdHeads + '</tr>';
                let tdBodys = '';
                for (let i = 0, l = axisData.length; i < l; i++) {
                   for (let j = 0; j < series.length; j++) {
                      if (typeof (series[j].data[i]) == 'object') {
                         tdBodys += '<td>' + series[j].data[i].value + '</td>';
                      } else {
                         tdBodys += '<td>' + series[j].data[i] + '</td>';
                      }
                   }
                   table += '<tr><td style="padding: 6px 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                   tdBodys = '';
                }
                table += '</tbody></table>';
                return table;
             },
             contentToOption: function(opt) {
                let dataview = document.getElementById('dataview').innerHTML;
                let excelFile = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" 
                                       xmlns="http://www.w3.org/TR/REC-html40">';
                excelFile += '<head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>
                                  {worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet>
                                 </x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head>';
                excelFile += '<body><table width="10%"  border="1">';
                excelFile += dataview;
                excelFile += '</table></body>';
                excelFile += '</html>';
                let link = 'data:application/vnd.ms-excel;base64,' + window.btoa(unescape(encodeURIComponent(excelFile)));
                let a = document.createElement('a');
                a.download = '降水量统计.xls';
                a.href = link;
                a.click();
             }
          },
          magicType: {show: true, type: ['line', 'stack', 'tiled']},
          restore: {show: true, title: '刷新'},
          saveAsImage: {show: true},
       }
    },
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

问题事件

  • 系统已结题 9月30日
  • 已采纳回答 9月22日

悬赏问题

  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿
  • ¥15 求差集那个函数有问题,有无佬可以解决