学习在echarts中优化数据视图dataView样式带表格样式，支持复制功能

学习在echarts中优化数据视图dataView样式带表格样式

toolbox里有个dataView视图模式，里面的数据没有对整，影响展示效果，情形如下：
在这里插入图片描述像这种标题跟数据没有整齐对应上，看起来乱

改问题解决方案为，option 》 toolbox 》 feature 》 dataView 》optionTocontent 回调函数中处理，具体代码如下：

option = {
    color: ['#f54c49','#1976d2'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        }
    },
    toolbox: {
        show : true,
        feature : {
             dataView : {show: true, readOnly: false,
                 optionToContent: function (opt) {
                     var axisData = opt.xAxis[0].data;//x轴作为条件，y轴需改成yAxis[0].data;
                     var series = opt.series;
                     var tdHeads = '<td  style="padding:0 10px">名称</td>';
                     series.forEach(function (item) {
                         tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';
                     });
                     var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center;background-color:#666"><tbody><tr>'+tdHeads+'</tr>';
                     var tdBodys = '';
                     for (var i = 0, l = axisData.length; i < l; i++) {
                         for (var j = 0; j < series.length; j++) {
                             if(typeof(series[j].data[i]) == 'object'){
                                 tdBodys += '<td>'+series[j].data[i].value+'</td>';
                             }else{
                                 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;
                 }
            },
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        },
        iconStyle:{
            borderColor:'white'
        }
    }}

修改后的效果为:
在这里插入图片描述

如果想解决复制问题，可以给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