本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！echarts如何优化数据视图dataView中的样式（代码示例）
收藏 本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
在使用echart过程中，toolbox里有个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} } }
修改后的效果为：
问题完美解决，希望对你有帮助！
更多 推荐文章
- 04-17中国首个东盟电子商务平台“美丽湾”启动
- 04-16电商下乡，京东、苏宁、阿里农村遭遇战打响？
- 04-16买房还是炒股，2015年买房无法拒绝的5大理由
- 04-161季度多家房企利润跌幅超50% 去库存促销战打响
