将Echarts的数据视图展示为table并且导出Excel

谁践踏了优雅 2023-06-24 11:29 6阅读 0赞

[Echarts官网示例][Echarts]，用过Echarts的小伙伴都知道，它带有自己很多原生功能，比如简单举例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]  
想要详细了解可以去官网看配置项，今天主要说一下图中蓝色框的‘数据视图’这个功能，如下是官网上这个功能按钮所展示的数据视图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]  
现在项目有需求，就是客户既要看到这个折线图，又要看到数据展示，当然这个已经实现展示了，只不过没有样式，要求是整齐的table表格，而且还能导出这个table。  
当然方式很多，可以将数据拿出来，单独写一个table，然后写一个导出功能，但是这样未免麻烦，而且echarts本身也可以hold住这样的功能，如下是我项目中折线图用到的代码：

myCharts.setOption({ 
                    tooltip: { 
                        trigger: 'axis'
                    },
                    legend: { 
                        data: legends,   // 我的外部legend数组
                        y: '25px',       // legend位置
                    },
                    toolbox: { 
                        show: true,
                        right: '13px',
                        top: '-7px',
                        feature: { 
                            dataZoom: { 
                                yAxisIndex: 'none',
                                show:false
                            },
                            magicType: { 
                                type: ['bar'],
                                title: { bar: '柱状图'}
                            },
                            restore: { },
                            saveAsImage: { },
                        },
                    },
                    grid: {         // 图的上下左右边距
                        x: '8%',
                        y: '13%',
                        x2: '6%',
                        y2: '6%'
                    },
                    xAxis:  { 
                        type: 'category',
                        boundaryGap: false,
                        data: lineX,
                        axisLine:{ 
                            lineStyle:{ 
                                color:'#3db3ff',
                            }
                        }
                    },
                    yAxis: { 
                        type: 'value',
                        axisLabel: { 
                            formatter: '{value}'
                        },
                        axisLine:{ 
                            lineStyle:{ 
                                color:'#3db3ff',
                            }
                        }
                    },
                    series: serie     // 我的数据源，有疑问看官方折线图示例即可
                }, true)

这样写就是和官方一模一样的效果了，现在，我们进行数据视图的样式修改和导出，主要是toolbox里面增加：

toolbox: { 
       show: true,
        right: '13px',
        top: '-7px',
        feature: { 
            dataZoom: { 
                yAxisIndex: 'none',
                show:false
            },
            magicType: { 
                type: ['bar'],
                title: { bar: '柱状图'}
            },
            restore: { },
            saveAsImage: { },
            /echarts tool封装导出Excel
            dataView: { 
                show: true,
                title: '表格数据',
                lang: ['表格数据：', '关闭', '导出Excel'],    // 按钮
                icon:"image://image/excel.png",             // ‘数据视图’按钮自定义img
                contentToOption: function (opts) { 
                    $("#tempChart").table2excel({            // 下载jquery.table2excel.js，引入，$("#tempChart")是Echarts容器
                        exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
                        filename: '电容柜——' + currentDevName + ".xls", // 文件名称
                        name: "Excel Document Name.xls",
                        exclude_img: true,
                        exclude_links: true,
                        exclude_inputs: true
                    });
                },
                // 数据视图展示为table
                optionToContent: function (opt) { 
                    var axisData = opt.xAxis[0].data; // 坐标数据
                    var series = opt.series; //折线图数据，此处即为数据源，可以打印查看
                    var tdHeads = '<td style="padding: 0 10px">时间</td>'; //表头第一列
                    var tdBodys = ''; //表数据
                    //组装表头
                    var nameData = new Array("A相电流", "B相电流", "C相电流", "A相电压", "B相电压", "C相电压");
                    for (var i = 0; i < nameData.length; i++) { 
                        tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                    }
                    var table = '<table id="tableExcel_Day" border="1" class="table-bordered table-striped" style="width:100%;text-align:center" ><tbody><tr>' + tdHeads + ' </tr>';
                    //组装表数据
                    for (var i = 0; i < axisData.length;  i++) { 
                        for (var j = 0; j < series.length ; j++) {                           
                            var temp = series[j].data[i];
                            if (temp != null && temp != undefined) {                                      
                                tdBodys += '<td>' + temp.toFixed(2) + '</td>';      
                            } else { 
                                tdBodys += '<td></td>';
                            }
                        }
                        table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                        tdBodys = '';
                    }
                    table += '</tbody></table>';                                  
                    return table;
                }
            }
            
        },
    },

由代码不难看出，这是渲染了一个table，渲染完效果如下所示：  
![这是数据视图按钮自定义图标][20191223102258787.png]  
点击展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]  
可以看到，现在展示的数据视图便是很整齐的table，下方两个按钮，一个关闭数据视图，一个导出table，导出功能下载一个jquery.table2excel.js[下载地址][Link 1]的文件引入，按照图中所示使用。表格上方有四个按钮的一半是位置没调整好，微调即可。

做人，最重要的是开心嘛，der  
![在这里插入图片描述][20191213171014492.png_pic_center]

[Echarts]: https://www.echartsjs.com/examples/zh/index.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191223100233663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191223100604613.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[20191223102258787.png]: https://img-blog.csdnimg.cn/20191223102258787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191223102500392.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1YW5odWFuMDM=,size_16,color_FFFFFF,t_70
[Link 1]: https://github.com/rainabba/jquery-table2excel
[20191213171014492.png_pic_center]: https://img-blog.csdnimg.cn/20191213171014492.png#pic_center