echarts如何修改數據視圖dataView中的樣式

作了一個現實折線圖的圖表，經過右上角icon能夠自由切換成柱狀圖，表格。
在表格中遇到的一點小問題，解決方案以下：

一、場景重現

這是一個顯示兩個折線圖的圖表，一切看起來都很順利。
可是點擊紅色箭頭所指的圖標，這個做用就是以表格的形式展示。
展示以下。

很醜是吧，測試姐姐說必定要改掉。
附加一下右上角的實現代碼，在options配置項加下面的配置就OK。

//右上角切換實現方法
toolbox: {
    show: true,
        right: '5%',
        feature: {
        dataView: {
            readOnly: true              
        },
        magicType: {type: ['line', 'bar']}
    }
},

二、解決方案

點擊文檔傳送門

echarts給的解決的辦法就是自定義。
下面寫了一個小表格，opt包含了全部折線圖的數據，本身組裝下。
能夠console看看都有什麼。

optionToContent: function (opt) {
    let axisData = opt.xAxis[0].data; //座標數據
    let series = opt.series; //折線圖數據
    let tdHeads = '<td  style="padding: 0 10px">時間</td>'; //表頭
    let tdBodys = ''; //數據
    series.forEach(function (item) {
        //組裝表頭
        tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
    });
    let table = `<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
    for (let i = 0, l = axisData.length; i < l; i++) {
        for (let j = 0; j < series.length; j++) {
            //組裝表數據
            tdBodys += `<td>${ series[j].data[i]}</td>`;
        }
        table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
        tdBodys = '';
    }
    table += '</tbody></table>';
    return table;
}

改完效果以下，你們能夠本身試試看哦。能夠改爲本身想要的風格哦。

三、總結

和數據視圖有關的均可以這樣改，不必定是個人那個場景。

若是項目中圖表不少，能夠把這段代碼抽取出來，畢竟篇幅很長。
寫這篇文章，主要是本身剛學會，其次是搜了一會沒找到合適的答案。就分享下本身的小喜悅吧，嘻嘻。