echarts dataView数据对齐

栏目: 数据库 · 发布时间: 6年前

内容简介:因为横坐标日期太长了导致标题(销售量 订单数)和数据没有对齐,

echarts dataView数据对齐

因为横坐标日期太长了导致标题(销售量 订单数)和数据没有对齐, 官方手册 dataView有个optionToContent属性可以修改成表格,比如效果这样:

echarts dataView数据对齐

代码:

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乘法表那样,都做不到(有兴趣的朋友可以试一下,顺便告诉我)

最后找到一个超级简单的办法:

series: [
    {// 根据名字对应到相应的系列
        name:'\t'+'销售量',        //在这里加一个'\t'
        type:'line',
        yAxisIndex:0,
        data:self_sale_amount
    },
    {
        name:‘订单数’,
        type:'line',
        yAxisIndex:1,
        data:self_order_count
    }
]

效果:

echarts dataView数据对齐


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

打火机与公主裙·荒草园

打火机与公主裙·荒草园

Twentine / 青岛出版社 / 2017-3 / 36.00元

“如果人临死前真有走马灯这个环节,她大概会是我这辈子见的最后一人。” 从青涩的校园时代里一抹明亮的金,到厮杀的职场中那化不开的黑,李峋就像荒芜之地的一株野草,受到再大的挫折依然固执地生长。 如果说朱韵从前的生活一直维持着表面的顺风顺水,平静安和,那李峋的出现则打破了这一切。他是她生命中第一次,也是唯一一次的冒险。 在外人眼里李峋嚣张而轻蔑,只有朱韵懂得他心中那片自留地,自愿成为孤......一起来看看 《打火机与公主裙·荒草园》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具