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

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},
   }
},
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题？

  • angular——echarts
    2019-07-04 17:16
    肖ZE的博客 安装依赖 ...angular.json 中全局引入 echarts "scripts": [ "node_modules/echarts/dist/echarts.min.js" ], 在所要使用的 module 中引入 ngx-echarts // ngx-echarts import { NgxEchartsModule }...
  • Angular-Slickgrid中的数据更新与聚合计算
    2025-03-23 02:22
    t0_54program的博客 Angular-Slickgrid是一款强大而灵活的网格组件，支持复杂的数据操作，包括分组、排序和聚合计算。假设我们有一个数据表，包含用户的性别（Gender）、费用（Cost）和时长（Duration）等字段。我们希望根据性别进行...
  • 在angular6项目中使用echarts
    2019-03-19 17:16
    盼盼盼的博客 1.安装相关的依赖 npm install echarts --save npm install ngx-echarts --save 2.引入NgxEchartsModule到...import { NgModule } from '@angular/core'; import {NgxEchartsModule} from 'ngx-echarts'; @NgModu...
  • ngx-echarts笔记（angular+ngx-echarts）
    2018-05-23 23:51
    kikyou`的博客 这里的很乱，正确md排版的见`ngx-echarts笔记2`(https://blog.csdn.net/kikyou_csdn/article/details/82528373) ### 一、给图表添加背景 在图表外加一个外层div,给这个外层div设置背景 &gt;html:   ``` &...
  • js中ECharts基础
    2022-11-11 16:34
    九阈的博客 ECharts是一个使用JavaScript 实现的开源可视化库，可以流畅的运行在PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome,t Firefox，Safari等) ，底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度...
  • ngx-echarts笔记2（angular+ngx-echarts）
    2018-09-08 12:24
    kikyou`的博客 一、给图表添加背景 在图表外加一个外层div,给这个外层div设置背景 ...div echarts [options]="rightOption4" class='demo-chart'&gt;&lt;/div&gt; &lt;/div&gt;
  • echarts的各种demo
    2015-10-23 21:36
    11. **与其他框架集成**：ECharts可以方便地与Angular、React、Vue等前端框架结合使用，提供丰富的API和事件系统，方便进行组件间的交互。 "echarts-2.2.7"可能是指ECharts的一个特定版本，其中包含了各种示例代码...
  • 【echarts】数据可视化之桑葚图
    2019-10-20 00:46
    CallMeJacky的博客 最近由于一个特殊的需求，需要利用js读取本地json，然后再通过Echarts可视化出来。之前没有做过js读写本地文件的实验，幸亏看到一位大佬已经有做过这方面的工作，详情请移步这里：使用HTML5来实现本地文件读取和写入...
  • 前端数据操作总结
    2018-11-30 22:11
    测试小柚子的博客 objectURL(url)转arraybuffer，当服务端传递二级制数据时使用 function URLtoblob(){ return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest() xhr.open('GET', input) xhr.response...
  • 学习笔记（五）——数据适配器、数据表、数据网格视图控件的综合应用。
    2019-09-29 04:02
    baman1774的博客 学习笔记（五）——数据适配器、数据表、数据网格视图控件的综合应用。 1、 批量修改 修改包括增加，删除以及更新3个操作，所以声明实力化3个SQL命令分别应用于插入，删除以及修改 将声明的SQL命令连接...
  • 没有解决我的问题, 去提问

问题事件

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