由于横坐标日期太长了致使标题(销售量 订单数)和数据没有对齐,官方手册dataView有个optionToContent属性能够修改为表格,好比效果这样:html
代码:echarts
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中去制做图表),不想由于好看放弃实用
而后就想到再作个下载表格功能。找个一个教程,要修改源码,改不来,须要高大上的朋友能够参考ui
再而后期间想到方式,好比修改源码改下默认样式、optionToContent:function可否手写打印要的样式,像代码题要求打印9*9乘法表那样,都作不到(有兴趣的朋友能够试一下,顺便告诉我)
最后找到一个超级简单的办法:spa
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 } ]
效果:.net