欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Echarts折线图表数据导出excle表格

程序员文章站 2022-07-14 10:20:23
...

首先从https://github.com/rainabba/jquery-table2excel/blob/master/dist/jquery.table2excel.js将jquery-table2excel插件代码下载到本地,将其放在项目中,在所需的页面中用script标签将其引用,<script src="../../js/jquery-table2excel.js"></script>,注意引入时自己下载的插件在项目中的路径哦!
第一步先构建表格,代码如下<div style="display: none;" id="xiazai"></div> <!--构建table--> <iframe id="txtArea1" name="txtArea1" style="display:none"></iframe>
第二步在折线图option的开始处加如下代码dataset : { source :yData },,source的值根据自己项目的y轴值写哦,
最后在折线图的得toolbox中feature对象中加如下代码 :` myTool2: {
show: true,
title: ‘导出excel文件’,
iconStyle: {
borderColor: ‘#ffffff’
},
icon:‘path://M525.4 721.2H330.9c-9 0-18.5-7.7-18.5-18.1V311c0-9 9.3-18.1 18.5-18.1h336.6c9.3 0 18.5 9.1 18.5 18.1v232.7c0 6 8.8 12.1 15 12.1 6.2 0 15-6 15-12.1V311c0-25.6-25.3-48.9-50.1-48.9h-335c-26.2 0-50.1 23.3-50.1 48.9v389.1c0 36.3 20 51.5 50.1 51.5h197.6c6.2 0 9.3-7.5 9.3-15.1 0-6-6.2-15.3-12.4-15.3zM378.8 580.6c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h141.4c6.2 0 12.3-5.8 12.3-13.4 0.3-9.5-6.2-15.9-12.3-15.9H378.8z m251.6-91.2c0-6-6.2-14.6-12.3-14.6H375.7c-6.2 0-12.4 8.6-12.4 14.6s6.2 14.6 12.4 14.6h240.8c6.2 0.1 13.9-8.5 13.9-14.6z m-9.2-120.5H378.8c-6.2 0-12.3 8.6-12.3 14.6s6.2 14.6 12.3 14.6h240.8c7.7 0 13.9-8.6 13.9-14.6s-6.2-14.6-12.3-14.6z m119.4 376.6L709 714.1c9.2-12 14.6-27 14.6-43.2 0-39.4-32.1-71.4-71.8-71.4-39.7 0-71.8 32-71.8 71.4s32.1 71.4 71.8 71.4c16.3 0 31.3-5.4 43.4-14.5l31.6 31.5c3.8 3.8 10 3.8 13.8 0 3.8-3.8 3.8-10 0-13.8z m-88.8-23.6c-28.3 0-51.3-22.8-51.3-51s23-51 51.3-51c28.3 0 51.3 22.8 51.3 51s-23 51-51.3 51z’,
onclick: function () {
var newArray = [];
for(var i=0;i<xLabel.length;i++){
for(var j=0;j<yData.length;j++){
newArray.push(xLabel[i]+","+yData[i]) //这里的 xLabel(x轴)和yData(y轴)都按自己图表的值来写
break
}
}
newArray.unshift(“社区卫生服务中心”+","+“机构在岗人员情况”) //导出图表的表头
var newquchukongge=[]
for(var i=0;i<newArray.length;i++){
newquchukongge.push(newArray[i].split(","))
}

                            var headData = newquchukongge;
                            var table = '<table id="tableExcel_Day" style="width:100%;text-align:center"><tbody>';
                            for (var i = 0; i < headData.length; i++) {
                                var bodyData = headData[i];
                                table += '<tr>';
                                for (var j = 0; j < bodyData.length; j++) {
                                    table += '<td>' + bodyData[j] + '</td>';
                                }
                                table += '</tr>';
                            }
                            table += '</tbody></table>';

                            $('#xiazai').html(table);//这里是把table放入html文件的隐藏div中,好让table2excel插件获取
                            //使用table2excel插件,用到table的id
                            $("#tableExcel_Day").table2excel({
                                exclude: ".noExl", //过滤位置的 css 类名
                                filename: '机构在岗人员情况' + ".xls", //文件名称
                                name: "机构在岗人员情况.xls",
                                exclude_img: true,
                                exclude_links: true,
                                exclude_inputs: true
                            });
                        }`
相关标签: jquery