共计 1075 个字符，预计需要花费 3 分钟才能阅读完成。

因为横坐标日期太长了导致标题（销售量订单数）和数据没有对齐，官方手册 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
    }
]

效果：

echarts-dataView数据对齐

站内搜索