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

来源：懂视网责编：小采时间：2020-11-27 19:29:42

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

echarts如何优化数据视图dataView中的样式（代码示例）:本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在使用echart过程中，toolbox里有个dataView视图模式，里面的数据没有对整，影响展示效果，情形如下：

推荐度：

点击下载本文 文档为doc格式

导读echarts如何优化数据视图dataView中的样式（代码示例）:本篇文章给大家带来的内容是关于echarts如何优化数据视图dataView中的样式（代码示例），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在使用echart过程中，toolbox里有个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}
 }
 }

修改后的效果为：

问题完美解决，希望对你有帮助！

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

推荐度：

点击下载本文 文档为doc格式

标签：里面的数据 echart echarts优化数据视图dataview中的样式

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐