Solve the problem of typesetting confusion in echarts data view

Recently, when using the echarts chart data view, I found that when I switch the data view, the data layout is disordered. I was thinking about finding the dom structure and correcting this problem by adding styles. When f12 checked the element, I found that this method was not feasible, and the entire content of the data view was rendered as a textarea text field. After consulting the data, it is found that   the data rendering format can be modified through the optionToContent display function of the data view dataView. Official document guidance: Documentation - Apache ECharts

The following is a record of the specific solution according to my problem:

There is a problem as shown in Figure 1

 Data view tabular solution code:

dataView: {
    readOnly: true,
    show: true,
    optionToContent: function (opt) {
        console.log("opt",opt)
        var axisData = opt.xAxis[0].data; //坐标轴
        var series = opt.series; //折线图的数据
        var tdHeads ='<td  style="margin-top:10px; padding: 10px 15px">时间</td>'; //表头
        var tdBodys = "";
        series.forEach(function (item) {
            tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
        });
        var table = `<table border="0" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" id="table-content"><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]}</td>`;
                }
             }
             table += `<tr><td style="padding: 15px 20px">${axisData[i]}</td>${tdBodys}</tr>`;
           tdBodys = "";
            }
            table += "</tbody></table>";
            return table;
    },
}

After formatting, I found that my data had more undefined fields, so I printed out the data opt to check the structure~

 

Then, add a judgment to the function of traversing the header of the table. When the name is not undefined, add a field to the variable of the header. Similarly, the same is true in the data display. The final landing code and effect are as follows

dataView: {
    readOnly: true, // 数据视图只读
    show: true, // 是否展示数据视图
    optionToContent: function (opt) {
        console.log("opt",opt)
        var axisData = opt.xAxis[0].data; //坐标轴
        var series = opt.series; //折线图的数据
        var tdHeads ='<td  style="margin-top:10px; padding: 10px 15px">时间</td>'; //表头
        var tdBodys = "";
        series.forEach(function (item) {
            if(item){
                tdHeads += `<td style="padding:5px 15px">${item.name}</td>`;
            }
        });
        var table = `<table border="0" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" id="table-content"><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]){
                     if (series[j].data[i] == undefined) {
                       tdBodys += `<td>${"-"}</td>`;
                    } else {
                       tdBodys += `<td>${series[j].data[i]}</td>`;
                    }
                }
               
             }
             table += `<tr><td style="padding: 15px 20px">${axisData[i]}</td>${tdBodys}</tr>`;
           tdBodys = "";
            }
            table += "</tbody></table>";
            return table;
    },
}