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

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 Opencv配置出错
  • ¥15 模电中二极管，三极管和电容的应用
  • ¥15 关于模型导入UNITY的.FBX: Check external application preferences.警告。
  • ¥15 气象网格数据与卫星轨道数据如何匹配
  • ¥100 java ee ssm项目 悬赏，感兴趣直接联系我
  • ¥15 微软账户问题不小心注销了好像
  • ¥15 x264库中预测模式字IPM、运动向量差MVD、量化后的DCT系数的位置
  • ¥15 curl 命令调用正常，程序调用报 java.net.ConnectException: connection refused
  • ¥20 关于web前端如何播放二次加密m3u8视频的问题
  • ¥15 使用百度地图api 位置函数报错？