解决echarts 数据视图排版错乱问题

最新推荐文章于 2024-09-05 00:31:38 发布

别薅我假发

最新推荐文章于 2024-09-05 00:31:38 发布

阅读量2.3k

点赞数 7

文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_45371730/article/details/126070817

版权

本文记录了在使用Echarts图表时遇到的数据视图排版错乱问题及其解决方案。通过自定义`optionToContent`函数，实现了数据视图的表格化展示，同时解决了因数据undefined导致的显示异常。通过对遍历过程增加条件判断，成功避免了未定义字段的显示，确保了数据视图的正确渲染。

摘要由CSDN通过智能技术生成

最近在使用echarts图表数据视图时发现，当我切换数据视图之后数据排版错乱。本来想着是不是可以找到dom结构，通过添加样式来修正此问题，当f12检查元素我发现此方法并不可行，数据视图整个内容被渲染成textarea文本域。查阅资料发现：可通过数据视图dataView的 optionToContent 展现函数来对数据渲染格式进行改造。官方文档指路：Documentation - Apache ECharts

下面根据我的问题记录一下具体解决方案：

存在问题如图1

数据视图表格化解决代码：

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;
    },
}

格式化之后我发现我的数据多出了undefined 字段，因此便将数据opt打印出来查看了一下结构~

接着，便在遍历表格表头的函数中多加一个判断，当 name不为undefined时追加字段到表头变量中，同理，数据展示中也一样，最终落地代码以及效果如下

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;
    },
}