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

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日

悬赏问题

  • ¥20 机器学习能否像多层线性模型一样处理嵌套数据
  • ¥20 西门子S7-Graph,S7-300，梯形图
  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效