echarts给数据视图添加表格样式

1，准备好样式

<style>
.myTable {
margin: 0 auto;
/* height: 300px; */
width: 700px;
}

.myTitle {
background-color: #F2F3F5;
}

tr:hover {
background: #edffcf;
}

th {
font-size: 16px;
font-weight: bold;
}

td {
font-size: 14px;
}

th,td {
border: solid 1px black;
text-align: center;
}
</style>

2，toolbox中添加optionToContent

代码：

optionToContent: function(opt) {
var dataview = opt.toolbox[0].feature.dataView; //获取dataview
var table = '<div style="position:absolute;top: 5px;left: 0px;right: 0px;line-height: 1.4em;text-align:center;font-size:14px;">'+dataview.title+'</div>'
table += getTable(opt);
return table;
}

getTable方法：

function getTable(opt){
var axisData = opt.xAxis[0].data;//获取图形的data数组
var series = opt.series;//获取series
var num = 0;//记录序号
var sum = new Array();//获取合计数组（根据对应的系数生成相应数量的sum）
for(var i=0; i<series.length; i++){
sum[i] = 0;
}
var table = '<table class="myTable"><thead><tr class="myTitle"> ';
table += '<th>'+''+'</th>'
for(var i=0; i<series.length;i++){
table += '<th>'+series[i].name+'</th>'
}
table += '</tr></thead><tbody>';

//遍历x轴
for (var i = 0, l = axisData.length; i < l; i++) {
table += '<tr>'
+ '<td>' + axisData[i] + '</td>';
//遍历y轴
for(var j=0; j<series.length;j++){
if(series[j].data[i]){
table += '<td>' + series[j].data[i] + '</td>';
}else{
table += '<td>' + 0 + '</td>';
}

}
table += '</tr>';
}

table += '</tr></tbody></table>';
return table;
}