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

实现效果:

Echarts数据视图格式化为Excel并导出_第1张图片

Echarts数据视图格式化为Excel并导出_第2张图片

1. 自定义toolbox.feature.dataview;

Echarts数据视图格式化为Excel并导出_第3张图片

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

Echarts数据视图格式化为Excel并导出_第4张图片

3. 组装table;

Echarts数据视图格式化为Excel并导出_第5张图片

贴部分代码:

饼图、矩形树图、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 = '车辆类型车辆数';
            var tdBodys = ''; //表数据

            var table = '' + tdHeads + ' ';
            //组装表数据
            for (var j = 0; j < series.length; j++) {
                var name = series[j].name;
                if (name != null && name != undefined) {
                    tdBodys += '';
                } else {
                    tdBodys += '';
                }

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

                table += '' + tdBodys + '';
                tdBodys = '';
            }
            table += '
' + name + '' + value + '
'; 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 = '驱动类型车辆数'; //表头第一列
            var tdBodys = ''; //表数据

            var table = '' + tdHeads + ' ';
            //组装表数据
            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 += '';
                    } else {
                        tdBodys += '';
                    }
                }
                table += '' + tdBodys + '';
                tdBodys = '';
            }
            table += '
' + temp + '
' + axisData[i] + '
'; return table; } } return dataView; }

你可能感兴趣的:(Echarts数据视图格式化为Excel并导出)