核心思路:

利用 jquery.table2excel.js 包的table2excel()方法实现echarts数据视图的导出

1、重写toolbox-feature-dataView-lang的optionToContent()方法,使数据视图显示表格

2、重写toolbox-feature-dataView-lang的contentToOption方法,借助jquery.table2excel.js给按钮添加导出excel功能

附源码:

toolbox: {
feature: {
dataView: {
    show: true,
    lang: ['数据视图', '关闭', '导出Excel'],
    contentToOption: function (opts) {
            $("#displacementAnalysisExcel").table2excel({
            exclude: ".noExl", //过滤位置的 css 类名
            filename:   $("#s2id_analysisParameter .select2-chosen").text().replace(/\s*/g,"") + " - 排量(L) 散点图数据", //文件名称
            name: "Excel Document Name.xls",
            exclude_img: true,
            exclude_links: true,
            exclude_inputs: true
        });
    },
    optionToContent: function(opt) {
        var axisData = opt.xAxis[0].data;
        var series = opt.series;
        var table = '<table id="displacementAnalysisExcel" border="1" class="table-bordered table-striped" style="user-select:text;width:100%;text-align:center"><tbody><tr>'
            + '<td>机型</td>'
            + '<td>排量</td>'
            + '<td>' + $("#s2id_analysisParameter .select2-chosen").text().replace(/\s*/g,"") + '</td>'
            + '</tr>';
        for (var i = 0, l = series[0].data.length; i < l; i++) {
            table += '<tr>'
                + '<td>' + series[0].data[i][2] + '</td>'
                + '<td>' + series[0].data[i][0] + '</td>'
                + '<td>' + series[0].data[i][1] + '</td>'
                + '</tr>';
        }
        table += '</tbody></table>';
        return table;
    }
},
// magicType: {
//     type: ['line', 'bar']
// },
restore: {
    show: true,
},
saveAsImage: {},
}
},

Logo

技术共进,成长同行——讯飞AI开发者社区

更多推荐