Echarts Beautiful Form

388 阅读1分钟

toolbox: {
    show: true,
    right: '3%',
    top: '3%',
    feature: {
        dataView:{
            show: true,
            optionToContent: function (opt) {
                var axisData = opt.xAxis[0].data; //坐标数据
                var series = opt.series; //折线图数据
                var tdHeads = '<td  style="padding: 0 10px">时间</td>'; //表头
                var tdBodys = ''; //数据
                series.forEach(function (item) {
                    //组装表头
                    tdHeads += '<td style="padding: 0 10px">'+item.name
                        +'</td>';
                });
                var table = '<table border="1" style="width:100%;text-align:center;line-height: 35px;border-collapse:collapse;""><tbody><tr>'+tdHeads+'</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                    for (var 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;
            },
            contentToOption: function(HTMLDomElement, opt){
                return opt;
            },
        },
        magicType: {type: ['line', 'bar'],show: true},
        restore:{show: true},
        saveAsImage:{show: true}
    }
}, 

效果图: