学习在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 = '名称';
                     series.forEach(function (item) {
                         tdHeads += ''+item.name+'';
                     });
                     var table = ''+tdHeads+'';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 +='';}else{
                                 tdBodys +='';}}
                         table +=''+ tdBodys +'';
                         tdBodys ='';}
                     table +='

                      
                        
                            
                                
'+series[j].data[i].value+'
                              
'+ series[j].data[i]+'
                             
                          
'+axisData[i]+'
 
                      
';
                     return table;
                 }
            },
            magicType : {show: true, type: ['line', 'bar']},
            restore : {show: true},
            saveAsImage : {show: true}
        },
        iconStyle:{
            borderColor:'white'
        }
    }}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

修改后的效果为:


如果想解决复制问题，可以给table加个样式就解决了

var table = ''
1
主要是这个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 ? '' : '
'
            })
            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 = `
`; //表头
                    var tdBodys = "";
                    series.forEach(function (item) {
                        tdHeads += ``;
                    });
                    var table = `
 
 
 
日期
${item.name}
${tdHeads} `;
                    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 += ``;
                            } else {
                                tdBodys += ``;
                            }
                        }
                        table += `${tdBodys}`;
                        tdBodys = "";
                    }
                    table += "
${"-"}
${series[j].data[i]["value"]}
${axisData[i]}
";
                    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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132