问题还原:
在做项目中,图表展示基本是每个项目中必不可少的内容,通常我们会用开源的Echarts来实现图表展示功能。Echarts自带很多组件,在数据视图中可以查看对应的图表中的数据列表,但是默认的样式挺丑的,如下图所示:
那么如何优化下展示样式那?
解决方案:
***通过toolbox中的optionToContent展现函数来实现。***官方API地址如下:
optionToContent展现函数代码如下:
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table style="width:100%;text-align:center"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '<td>' + series[1].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '<td>' + series[1].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
本人修改后的展示效果如下图所示:
具体代码如下。
JS代码:
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table class="echartsTable"><tbody><tr>'
+ '<td>时间</td>'
+ '<td>' + series[0].name + '</td>'
+ '</tr>';
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>'
+ '<td>' + series[0].data[i] + '</td>'
+ '</tr>';
}
table += '</tbody></table>';
return table;
}
CSS代码:
/* echarts表格样式 */
.echartsTable {
width: 100%;
text-align: center;
min-height: 25px;
line-height: 25px;
border-collapse: collapse;
padding: 2px;
}
.echartsTable, .echartsTable tr th, .echartsTable tr td{
border: 1px solid gray;
}
PS:欢迎大家点赞、关注、支持。如有需要,欢迎添加博主QQ沟通交流!QQ:156587607