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

原文鏈接：點我

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

1、場景重現

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

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

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

2、解決方案

點擊文檔傳送

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;
}

 

改完效果如下，大家可以自己試試看哦。可以改成自己想要的風格哦。

3、總結

和數據視圖有關的都可以這樣改，不一定是我的那個場景。

如果項目中圖表很多，可以把這段代碼抽取出來，畢竟篇幅很長。
寫這篇文章，主要是自己剛學會，其次是搜了一會沒找到合適的答案。就分享下自己的小喜悅吧，嘻嘻。