做了一個現(xiàn)實折線圖的圖表德迹，通過右上角icon可以自由切換成柱狀圖，表格双吆。
在表格中遇到的一點小問題，解決方案如下：
1会前、場景重現(xiàn)
場景重現(xiàn)
這是一個顯示兩個折線圖的圖表好乐，一切看起來都很順利。
但是點擊紅色箭頭所指的圖標瓦宜，這個作用就是以表格的形式展現(xiàn)蔚万。
展現(xiàn)如下。
場景重現(xiàn)
很丑是吧临庇，測試姐姐說一定要改掉反璃。
附加一下右上角的實現(xiàn)代碼昵慌，在options配置項加下面的配置就OK。
//右上角切換實現(xiàn)方法
toolbox: {
show: true,
right: '5%',
feature: {
dataView: {
readOnly: true
},
magicType: {type: ['line', 'bar']}
}
},
2淮蜈、解決方案
文檔地址
echarts給的解決的辦法就是自定義斋攀。
下面寫了一個小表格，opt包含了所有折線圖的數(shù)據(jù)礁芦，自己組裝下蜻韭。
可以console看看都有什么。
optionToContent: function (opt) {
let axisData = opt.xAxis[0].data; //坐標數(shù)據(jù)
let series = opt.series; //折線圖數(shù)據(jù)
let tdHeads = '<td style="padding: 0 10px">時間</td>'; //表頭
let tdBodys = ''; //數(shù)據(jù)
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++) {
//組裝表數(shù)據(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俯画、總結
和數(shù)據(jù)視圖有關的都可以這樣改，不一定是我的那個場景司草。
如果項目中圖表很多艰垂，可以把這段代碼抽取出來，畢竟篇幅很長埋虹。
寫這篇文章猜憎，主要是自己剛學會，其次是搜了一會沒找到合適的答案搔课。就分享下自己的小喜悅吧胰柑，嘻嘻。
