将Echarts的数据视图展示为table并且导出Excel

Echarts官网示例，用过Echarts的小伙伴都知道，它带有自己很多原生功能，比如简单举例：

想要详细了解可以去官网看配置项，今天主要说一下图中蓝色框的‘数据视图’这个功能，如下是官网上这个功能按钮所展示的数据视图：

现在项目有需求，就是客户既要看到这个折线图，又要看到数据展示，当然这个已经实现展示了，只不过没有样式，要求是整齐的table表格，而且还能导出这个table。
当然方式很多，可以将数据拿出来，单独写一个table，然后写一个导出功能，但是这样未免麻烦，而且echarts本身也可以hold住这样的功能，如下是我项目中折线图用到的代码：

myCharts.setOption({
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: legends,   // 我的外部legend数组
                    y: '25px',       // legend位置
                },
                toolbox: {
                    show: true,
                    right: '13px',
                    top: '-7px',
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none',
                            show:false
                        },
                        magicType: {
                            type: ['bar'],
                            title: {bar: '柱状图'}
                        },
                        restore: {},
                        saveAsImage: {},
                    },
                },
                grid: {        // 图的上下左右边距
                    x: '8%',
                    y: '13%',
                    x2: '6%',
                    y2: '6%'
                },
                xAxis:  {
                    type: 'category',
                    boundaryGap: false,
                    data: lineX,
                    axisLine:{
                        lineStyle:{
                            color:'#3db3ff',
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#3db3ff',
                        }
                    }
                },
                series: serie     // 我的数据源，有疑问看官方折线图示例即可
            }, true)

这样写就是和官方一模一样的效果了，现在，我们进行数据视图的样式修改和导出，主要是toolbox里面增加：

toolbox: {
   show: true,
    right: '13px',
    top: '-7px',
    feature: {
        dataZoom: {
            yAxisIndex: 'none',
            show:false
        },
        magicType: {
            type: ['bar'],
            title: {bar: '柱状图'}
        },
        restore: {},
        saveAsImage: {},
        /echarts tool封装导出Excel
        dataView: {
            show: true,
            title: '表格数据',
            lang: ['表格数据：', '关闭', '导出Excel'],    // 按钮
            icon:"image://image/excel.png",             // ‘数据视图’按钮自定义img
            contentToOption: function (opts) {
                $("#tempChart").table2excel({           // 下载jquery.table2excel.js，引入，$("#tempChart")是Echarts容器
                    exclude: ".noExl", //过滤位置的 css 类名， 有class = “noExl” 的行不被导出
                    filename: '电容柜——' + currentDevName + ".xls", // 文件名称
                    name: "Excel Document Name.xls",
                    exclude_img: true,
                    exclude_links: true,
                    exclude_inputs: true
                });
            },
            // 数据视图展示为table
            optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data; // 坐标数据
                var series = opt.series; //折线图数据，此处即为数据源，可以打印查看
                var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头第一列
                var tdBodys = ''; //表数据
                //组装表头
                var nameData = new Array("A相电流", "B相电流", "C相电流", "A相电压", "B相电压", "C相电压");
                for (var i = 0; i < nameData.length; i++) {
                    tdHeads += '<td style="padding: 0 10px">' + nameData[i] + '</td>';
                }
                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; i < axisData.length;  i++) {
                    for (var j = 0; j < series.length ; j++) {                          
                        var temp = series[j].data[i];
                        if (temp != null && temp != undefined) {                                     
                            tdBodys += '<td>' + temp.toFixed(2) + '</td>';      
                        } else {
                            tdBodys += '<td></td>';
                        }
                    }
                    table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                    tdBodys = '';
                }
                table += '</tbody></table>';                                  
                return table;
            }
        }
        
    },
},

由代码不难看出，这是渲染了一个table，渲染完效果如下所示：

点击展示：

可以看到，现在展示的数据视图便是很整齐的table，下方两个按钮，一个关闭数据视图，一个导出table，导出功能下载一个jquery.table2excel.js下载地址的文件引入，按照图中所示使用。表格上方有四个按钮的一半是位置没调整好，微调即可。

做人，最重要的是开心嘛，der