echarts如何优化数据视图dataView中的样式(代码示例)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

在使用echart过程中,toolbox里有个dataView视图模式,里面的数据没有对整,影响展示效果,情形如下:

echarts如何优化数据视图dataView中的样式(代码示例)

echarts如何优化数据视图dataView中的样式(代码示例)

改问题解决方案为,在optionTocontent回调函数中处理,具体代码如下:

toolbox:{    show: true,   feature: {      dataView: {          show: true,          title: '数据视图',          optionToContent: function (opt) {          var axisData = opt.xAxis[0].data;          var series = opt.series;          var tdHeads = '<td  style="padding:0 10px">名称</td>';          series.forEach(function (item) {          tdHeads += '<td style="padding: 0 10px">'+item.name+'</td>';          });          var table = '<table border="1" style="margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center"><tbody><tr>'+tdHeads+'</tr>';          var tdBodys = '';          for (var i = 0, l = axisData.length; i < l; i++) {          for (var j = 0; j < series.length; j++) {          if(typeof(series[j].data[i]) == 'object'){          tdBodys += '<td>'+series[j].data[i].value+'</td>';          }else{              tdBodys += '<td>'+ series[j].data[i]+'</td>';             }         }         table += '<tr><td style="padding: 0 10px">'+axisData[i]+'</td>'+ tdBodys +'</tr>';         tdBodys = '';        }        table += '</tbody></table>';        return table;       }     },     mark: {show:true},     restore:{show:true},    magicType: {type: ['line', 'bar','pie']},    saveAsImage:{show:true}         }     }

修改后的效果为:

echarts如何优化数据视图dataView中的样式(代码示例)

问题完美解决,希望对你有帮助!

本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » echarts如何优化数据视图dataView中的样式(代码示例)

发表评论

提供最优质的资源集合

立即查看 了解详情