Echarts折线图表数据导出excle表格
首先从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
});
}`
上一篇: Linux静态IP配置
下一篇: Linux文件与目录管理常用命令