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 = '名称';
         series.forEach(function (item) {
         tdHeads += ''+item.name+'';
         });
         var table = ''+tdHeads+'';
         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 += '';
         }else{
             tdBodys += '';
            }
        }
        table += ''+ tdBodys +'';
        tdBodys = '';
       }
       table += '
'+series[j].data[i].value+'
'+ series[j].data[i]+'
'+axisData[i]+'
';
       return table;
      }
    },
    mark: {show:true},
    restore:{show:true},
   magicType: {type: ['line', 'bar','pie']},
   saveAsImage:{show:true}
        }
    }

修改后的效果为：

关于echarts怎么优化数据视图dataView样式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

名称栏目：echarts怎么优化数据视图dataView样式-创新互联
文章链接：http://cdxtjz.com/article/gjdgo.html