最近在使用echarts图表 数据视图时发现，当我切换数据视图之后数据排版错乱。本来想着是不是可以找到dom结构，通过添加样式来修正此问题，当f12检查元素我发现此方法并不可行，数据视图整个内容被渲染成textarea文本域。查阅资料发现：可通过数据视图dataView的optionToContent展现函数 来对数据渲染格式进行改造。官方文档指路：Documentation - Apache ECharts
下面根据我的问题记录一下具体解决方案：
存在问题如图1
数据视图表格化解决代码：
dataView:{readOnly:true,show:true,optionToContent:function(opt){console.log("opt",opt)varaxisData=opt.xAxis[0].data;//坐标轴varseries=opt.series;//折线图的数据vartdHeads='<tdstyle="margin-top:10px;padding:10px15px">时间</td>';//表头vartdBodys="";series.forEach(function(item){tdHeads+=`<tdstyle="padding:5px15px">${item.name}</td>`;});vartable=`<tableborder="0"style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"id="table-content"><tbody><tr>${tdHeads}</tr>`;for(vari=0,l=axisData.length;i<l;i++){for(varj=0;j<series.length;j++){if(series[j].data[i]==undefined){tdBodys+=`<td>${"-"}</td>`;}else{tdBodys+=`<td>${series[j].data[i]}</td>`;}}table+=`<tr><tdstyle="padding:15px20px">${axisData[i]}</td>${tdBodys}</tr>`;tdBodys="";}table+="</tbody></table>";returntable;},}
格式化之后我发现我的数据多出了undefined 字段，因此便将数据opt打印出来查看了一下结构~
接着，便在 遍历 表格表头的函数中多加一个判断，当 name不为undefined时追加字段到表头变量中，同理，数据展示中也一样，最终落地代码以及效果如下
dataView:{readOnly:true, // 数据视图只读show:true, // 是否展示数据视图optionToContent:function(opt){console.log("opt",opt)varaxisData=opt.xAxis[0].data;//坐标轴varseries=opt.series;//折线图的数据vartdHeads='<tdstyle="margin-top:10px;padding:10px15px">时间</td>';//表头vartdBodys="";series.forEach(function(item){if(item){tdHeads+=`<tdstyle="padding:5px15px">${item.name}</td>`;}});vartable=`<tableborder="0"style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"id="table-content"><tbody><tr>${tdHeads}</tr>`;for(vari=0,l=axisData.length;i<l;i++){for(varj=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><tdstyle="padding:15px20px">${axisData[i]}</td>${tdBodys}</tr>`;tdBodys="";}table+="</tbody></table>";returntable;},}
如果觉得《解决echarts 数据视图 排版错乱问题》对你有帮助，请点赞、收藏，并留下你的观点哦！
