echarts dataView数据对齐及表格复制

我就是我 2022-09-12 11:47 230阅读 0赞

参考：[https://segmentfault.com/a/1190000019547857][https_segmentfault.com_a_1190000019547857]

上面的链接介绍了"数据视图"表格数据对齐显示的问题（**使用'\\t'的小技巧**），但是还是不能下载表格或者复制表格，如果想解决复制问题，可以给table加个样式就解决了 var table = '<table style="width:100%;user-select: text;text-align:center;"><tbody><tr>' 主要是这个user-select: text; 就能复制了。

如下：

result = {
        "title": {
            "text": "互动情况（UV）",
            "subtext": "注: 点击下方说明项可选择是否展示, UV计算方式: 各个行为对应用户总数（去重）",
            "textStyle": {
                "color": "rgba(255, 0, 0, 1)",
                "fontSize": 20
            }
        },
        "tooltip": {
            "trigger": "axis",
            "formatter": function (params) {
                let str = '';
                params.forEach((item, idx) => {
                    str += `${item.marker} ${item.data.time}_${item.seriesName}:  ${item.data.value}`
                    str += idx === params.length - 1 ? '' : '<br/>'
                })
                return str
            },
        },
        "legend": {
            "type": "scroll",
            "bottom": 6,
            "data": [
                "like",
                "comment",
                "collect",
                "share",
                "dislike",
                "ALL"
            ]
        },
        "toolbox": {
            "show": true,
            "feature": {
                "dataZoom": {
                    "yAxisIndex": "none"
                },
                "dataView": {
                    "show": true,
                    "optionToContent": function (opt) {
                        // console.log(opt) 
                        //该函数可以自定义列表为table，opt是给我们提供的原始数据的obj。 可打印出来数据结构查看
                        var axisData = opt.xAxis[0].data; //坐标轴
                        var series = opt.series; //折线图的数据
                        console.log("1")
                        console.log(series)
                        console.log("2")
                        var tdHeads = `<td  style="margin-top:10px; padding: 0 15px">日期</td>`; //表头
                        var tdBodys = "";
                        series.forEach(function (item) {
                            tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
                        });
                        var table = `<table border="1" style="margin-left:20px;user-select:text;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>${tdHeads} </tr>`;
                        for (var i = 0, l = axisData.length; i < l; i++) {
                            for (var j = 0; j < series.length; j++) {
                                if (series[j].data[i] == undefined) {
                                    tdBodys += `<td>${"-"}</td>`;
                                } else {
                                    tdBodys += `<td>${series[j].data[i]["value"]}</td>`;
                                }
                            }
                            table += `<tr><td style="padding: 0 15px">${axisData[i]}</td>${tdBodys}</tr>`;
                            tdBodys = "";
                        }
                        table += "</tbody></table>";
                        return table;
                    },
                    "contentToOption": function (HTMLDomElement, opt) {
                        return opt;
                    },
                    "readOnly": false
                },
                "magicType": {
                    "type": [
                        "line",
                        "bar"
                    ]
                },
                "restore": {
                },
                "saveAsImage": {
                }
            }
        },
        "xAxis": {
            "type": "category",
            "boundaryGap": false,
            "data": config.xAxis_data,
        },
        "yAxis": {
            "type": "value",
            "axisLabel": {
                "formatter": "{value}"
            }
        },
        "series": [
            {
                "name": "like",
                "type": "line",
                "data": config.interaction_data.like
            },
            {
                "name": "comment",
                "type": "line",
                "data": config.interaction_data.comment
            },
            {
                "name": "collect",
                "type": "line",
                "data": config.interaction_data.collect
            },
            {
                "name": "share",
                "type": "line",
                "data": config.interaction_data.share
            },
            {
                "name": "dislike",
                "type": "line",
                "data": config.interaction_data.dislike
            },
            {
                "name": "ALL",
                "type": "line",
                "data": config.interaction_data.ALL
            },
        ]
    }
    
    
    return result

[https_segmentfault.com_a_1190000019547857]: https://segmentfault.com/a/1190000019547857