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

最近在使用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;},
}

解决echarts 数据视图排版错乱问题相关推荐

项目踩坑之Echarts数据视图不更新问题
问题描述 Echarts检测到数据更新不会立即更新相应的视图.也就是说即使series中data 或者value的值发生变化,Echarts也不会发生改变. 解决方法发送请求获取数据以后重新 ...
php 使用dataview,echarts如何优化数据视图dataView中的样式（代码示例）
本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 在使用echart过程中,toolbo ...
html缩小网页时版块乱跑,解决动网论坛最后发表显示代码的问题(或导致首页排版错乱)...
动网论坛作为一个优秀的ASP论坛程序,两年前曾是千千万万站长的选择.虽然动网论坛官方停止了更新,但是由于我一个站用的是动网论坛,转换的话闲麻烦,而且之前做了不少个性化修改,再者我用着感觉也挺快的,也能 ...
窗口缩放导致页面排版错乱的解决方法
窗口缩放导致页面排版错乱的解决方法参考文章: (1)窗口缩放导致页面排版错乱的解决方法 (2)https://www.cnblogs.com/mingdao/p/11115613.html 备忘一下 ...
android点赞刷新列表图片闪烁,RecyclerView使用——有效解决刷新数据错乱,图片闪烁,OOM问题...
做项目时,用到RecyclerView去加载1w张图片,为了防止OOM,需要进行分页预加载;这些完成后测试发现刷新recyclerView会造成数据错乱,在查阅资料得到一下的解决方法. 根据网上资料: ...
python 横坐标只显示部分数据_解决echarts中横坐标值显示不全(自动隐藏)问题
echarts中,横轴数据如果非常多,会自动隐藏一部分数据,我们可以通过属性interval来进行调整. 如下图,当横轴时间为13天时,echarts会自动隔天显示如果我们想显示全,则需要在xAxi ...
Echarts自定义数据视图(DataView)-按钮名称-刷新方法
基于jquery3.1 & echarts.js; 了解更多细节请访问: https://www.echartsjs.com 先上效果图: gif没录好,大家可以自己把代码拷贝,到本地 & ...
echarts修改数据视图格式
通过echarts官方文档配置项进行修改 js代码 // 基于准备好的dom,初始化echarts实例var Qushi_box = echarts.init(document.getElementB ...
echarts自定义视图数据(dataView)
首先,先展示一下我这边的数据(数组格式生成,没有给x轴赋data),因为有些曲线在某些下标中是没有值的情况下.例如坐标2: 如果用dataView:{readOnly: false}:它将自动采用下标 ...

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

解决echarts 数据视图排版错乱问题相关推荐

最新文章

热门文章

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

解决echarts 数据视图 排版错乱问题相关推荐

最新文章

热门文章

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

解决echarts 数据视图排版错乱问题相关推荐