大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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 = '名称';
         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样式就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。


当前标题:echarts怎么优化数据视图dataView样式-创新互联
链接分享:http://dzwzjz.com/article/gjdgo.html
在线咨询
服务热线
服务热线:028-86922220
TOP