將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