Echarts数据视图格式化为Excel并导出

实现效果：

1. 自定义toolbox.feature.dataview;

2. 重新定义Echarts自带数据视图的刷新按钮为”导出Excel“；

3. 组装table;

贴部分代码：

饼图、矩形树图、china地图可使用使用以下代码（data[{name:xx,value:xx}]）：

//饼状图dataView
function pieDataView(fileName) {
    var dataView = {
        show: true, readOnly: false,
        lang: ['数据视图', '关闭', '导出Excel'],
        contentToOption: function (opts) {
            $("#tableExcel_Day").table2excel({
                exclude: ".noExl",
                filename: fileName + '-' + new Date().Format("yyyyMMddHHmmss") + ".xls", //文件名称
                sheetName: fileName,
                name: "Excel Document Name.xls",
                exclude_img: true,
                exclude_links: true,
                exclude_inputs: true
            });
        },
        optionToContent: function (opt) {
            var series = opt.series[0].data;
            var tdHeads = '<td  style="padding: 0 10px">车辆类型</td><td style="padding: 0 10px">车辆数</td>';
            var tdBodys = ''; //表数据

            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 j = 0; j < series.length; j++) {
                var name = series[j].name;
                if (name != null && name != undefined) {
                    tdBodys += '<td>' + name + '</td>';
                } else {
                    tdBodys += '<td></td>';
                }

                var value = series[j].value;
                if (value != null && value != undefined) {
                    tdBodys += '<td>' + value + '</td>';
                } else {
                    tdBodys += '<td></td>';
                }

                table += '<tr>' + tdBodys + '</tr>';
                tdBodys = '';
            }
            table += '</tbody></table>';
            return table;
        }
    }
    return dataView;
}

柱状图、折线图使用以下代码：

//柱状图dataView
function barDataView(fileName) {
    var dataView = {
        show: true, readOnly: false,
        lang: ['数据视图', '关闭', '导出Excel'],
        contentToOption: function (opts) {
            $("#tableExcel_Day").table2excel({
                exclude: ".noExl", //过滤位置的 css 类名
                filename: fileName + '-' + new Date().Format("yyyyMMddHHmmss") + ".xls", //文件名称
                sheetName: fileName,
                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 tdHeads = '<td  style="padding: 0 10px">驱动类型</td><td  style="padding: 0 10px">车辆数</td>'; //表头第一列
            var tdBodys = ''; //表数据

            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, l = axisData.length; i < l; i++) {
                for (var j = 0; j < series.length; j++) {
                    var temp = series[j].data[i];
                    if (temp != null && temp != undefined) {
                        tdBodys += '<td>' + temp + '</td>';
                    } else {
                        tdBodys += '<td></td>';
                    }
                }
                table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                tdBodys = '';
            }
            table += '</tbody></table>';
            return table;
        }
    }
    return dataView;
}