因为横坐标日期太长了导致标题(销售量 订单数)和数据没有对齐,官方手册 dataView 有个 optionToContent 属性可以修改成表格,比如效果这样:
代码:
dataView : {
show: true,
readOnly: true,
optionToContent: function(opt) {var axisData = opt.xAxis[0].data;
var series = opt.series;
var table = '<table class="layui-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;
}
}
但是有个不方便的地方,表格不能选中数据复制(为了方便得到数据,到 Excel 中去制作图表),不想因为好看放弃实用
然后就想到再做个下载表格功能。找个一个教程,要修改源码,改不来,需要高大上的朋友可以参考
再然后期间想到方式,比如修改源码改下默认样式、optionToContent:function 能否手写打印要的样式,像代码题要求打印 9 * 9 乘法表那样,都做不到(有兴趣的朋友可以试一下,顺便告诉我)
最后找到一个超级简单的办法:
var sale_amount = '\t'+'销售量'; // 在纵坐标标题前加一个 '\t', 不影响图表纵坐标显示,照常使用,但 dataView 数据对齐。可能是图表纵坐标显示忽略 \t, 而 dataView 拼接成 html 片段,\t 生效。...
legend: {data: [sale_amount, order_count]
},
...
series: [
{// 根据名字对应到相应的系列
name:sale_amount ,
type:'line',
yAxisIndex:0,
data:self_sale_amount
},
{
name:‘订单数’,
type:'line',
yAxisIndex:1,
data:self_order_count
}
]
效果: