echarts数据视图的自定义数据展现

echarts图标  右上角的刷新和数据视图按钮通过echarts的setoption里的toolbox配置项进行展现，代码如下：

        toolbox: {
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: false }
          }
        },

通过以上配置，数据视图可以展现相关的内容表格，但是格式是不够明朗简单的，数据左侧为X轴，右侧为对应的Y轴的值 

根据要求，我是用的x轴的type为time，所以图表显示出来是时间格式，实际上是后端传过来的时间戳，这样可以保证时间和数据是对应的，不会因为某个时刻没有值，导致后边的值往前挪，使图表出现数据错位。

采用这种写法series里每项的data都是一个二维数组，内层数组都是长度为2，0位是时间戳，1位是对应的值，大致数据格式如下：

data: [[1596038400000, 430] , [1596039040000, 51] ,  [1596039680000, 51] ,[1596040320000, 51] , [1596040832000, 58] ]

这样写就会出现上图的表格，图表中的三项纵向排开，X轴为时间戳，现在想要的效果是X轴内容为标准时间格式，表格每一行是此时刻的三个值（三个出力），通过对toolbox配置实现：

toolbox: {
    show: true,
    feature: {
        dataView: {
            readOnly: true,
            optionToContent(opt) {
                let resultX = [];
                // 使用for循环遍历二维数组
                for (let i = 0; i < opt.series[0].data.length; i++) {
                    // 将每个子数组的第一项添加到结果数组中
                    resultX.push(opt.series[0].data[i][0]);
                }
                let axisData = resultX; // 假设x轴是时间戳数据
                var series = []
                let resultY1 = [];
                // 使用for循环遍历二维数组
                for (let i = 0; i < opt.series[0].data.length; i++) {
                    // 将每个子数组的第一项添加到结果数组中
                    resultY1.push(opt.series[0].data[i][1]);
                }
                series.push(resultY1);
                let resultY2 = [];
                // 使用for循环遍历二维数组
                for (let i = 0; i < opt.series[1].data.length; i++) {
                    // 将每个子数组的第一项添加到结果数组中
                    resultY2.push(opt.series[1].data[i][1]);
                }
                series.push(resultY2);
                let resultY3 = [];
                // 使用for循环遍历二维数组
                for (let i = 0; i < opt.series[2].data.length; i++) {
                    // 将每个子数组的第一项添加到结果数组中
                    resultY3.push(opt.series[2].data[i][1]);
                }
                series.push(resultY3);
                let table= '<table style="width:100%;text-align:center"><tbody><tr>'
                    + '<td>时间</td>'
                    + '<td>日前计划出力</td>'
                    + '<td>日内计划出力</td>'
                    + '<td>实际出力</td>'
                    + '</tr>';
                for (let i = 0, l = axisData.length; i < l; i++) {
                    let time = new Date(axisData[i]); // 将时间戳转换为Date对象
                    var value1 = series[0][i];
                    var value2 = series[1][i];
                    var value3 = series[2][i];
                    table += '<tr>'
                        + '<td>' + time.toLocaleString().slice(-8) + '</td>'
                        + '<td>' + value1 + '</td>'
                        + '<td>' + value2 + '</td>'
                        + '<td>' + value3 + '</td>'
                        + '</tr>';
                }
                table += '</tbody></table>';
                return table;
            }
        },
        restore: { show: true },
        saveAsImage: { show: false }
    }
},

最终效果：