天天看點

Echarts 自定義資料視圖

toolbox : {

show : true,

feature : {

dataView : {

optionToContent : function(option) {

// 行名稱

var axisData = option.xAxis[0].data;

// 列名稱

var header = option.legend[0].data;

var seriesarr = option.series;

var eldiv = '<div id="viewdata" style="width:100%;display:block;margin-left:85px;overflow:auto;">';

var firsttd = '<td></td>';

var table = '<table style="width:100%;text-align:left;overflow:scroll;"><tbody>'

+ '<tr>'

if (header != undefined) {

for (var i = 0; i < header.length; i++) {

firsttd += '<td>' + header[i] + '</td>'

}

} else {

table = '<table style="width:50%;text-align:left;overflow:scroll;"><tbody>';

for (var i = 0; i < 1; i++) {

firsttd += '<td>' + "分數" + '</td>'

// 表格列頭拼裝完畢

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

// 表格行頭拼裝完畢

for (var i = 0, l = axisData.length; i < l; i++) {

table += '<tr>' + '<td>' + axisData[i] + '</td>'

for (var j = 0; j < seriesarr.length; j++) {

table += '<td>' + seriesarr[j].data[i]

+ '</td>'

table += "</tr>";

table += '</tbody></table>';

return eldiv + table + "</div>";

},

magicType : {

type : [ 'line', 'bar' ]

restore : {

show : true

saveAsImage : {

繼續閱讀