使用了dataview里面的optionToContent,返回的是表格显示,在自己本地测试显示的table的源码,但是在这里测试是好的,请问是什么原因
配置项如下
option = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
toolbox: {
show: true,
feature: {
dataView: {
show: true,
readOnly: true,
title: "切换到图表",
optionToContent: function(opt) {
var axisData = opt.xAxis[0].data;
var series = opt.series;
var tdHeaders = '<td>时间</td>'; //表头
series.forEach(function(item) {
tdHeaders += '<td>' + item.name + '</td>'; //组装表头
});
var table = '<table border = "1" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
var tdBodys = ''; //数据
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: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
tdBodys = '';
}
table += '</tbody></table>';
return table;
}
},
magicType: {
show: true,
type: ['line', 'bar'],
title: {
line: "切换到折线图",
bar: "切换到柱状图"
}
},
restore: {
show: true
}
}
},
legend: {
data: ['环比活跃人数', '环比VIP活跃人数', '环比老用户活跃人数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}],
yAxis: [{
type: 'value'
}],
series: [{
name: '环比活跃人数',
type: 'bar',
data: [-320, 332, 301, 334, 390, 330, 320]
},
{
name: '环比VIP活跃人数',
type: 'bar',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: '环比老用户活跃人数',
type: 'bar',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};