vue: echarts 中資料檢視樣式
阿新 • 來源:網路 • 發佈:2022-06-09
echarts 中資料視圖表格很醜,如下,這樣是不行滴
直接在 option 配置項中新增如下屬性(在toolbox中的dateView配置)
optionToContent(opt) {
let axisData = opt.xAxis[0].data; //座標資料
let series = opt.series; //折線圖資料
let tdHeads = '<td style="padding:8px 25px">時間</td>'; //表頭
let tdBodys = ''; //資料
series.forEach((item) => {
//組裝表頭
tdHeads += `<td style="padding: 8px 25px">${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: 8px 25px">${axisData[i]}</td>${tdBodys}</tr>`;
tdBodys = '';
}
table += '</tbody></table>';
return table;
},
再來看下效果,是不是好看多了呢
