Comment echarts optimise le style dans la vue de données dataView (exemple de code)

Le contenu de cet article explique comment echarts optimise le style (exemple de code) dans la vue de données dataView. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Pendant le processus d'utilisation d'echart, il existe un mode d'affichage dataView dans la boîte à outils et les données qu'elle contient ne sont pas alignées, ce qui affecte l'effet d'affichage. La situation est la suivante :

La solution au problème est de le gérer dans la fonction de rappel optionTocontent . Le code spécifique est le suivant :

toolbox:{
   show: true,
  feature: {
     dataView: {
         show: true,
         title: '数据视图',
         optionToContent: function (opt) {
         var axisData = opt.xAxis[0].data;
         var series = opt.series;
         var tdHeads = '<td>名称</td>';
         series.forEach(function (item) {
         tdHeads += '<td>'+item.name+'</td>';
         });
         var table = '

'+tdHeads+'';          var tdBodys = '';          for (var i = 0, l = axisData.length; i '+series[j].data[i].value+'';          }else{              tdBodys += '';             }         }         table += ''+ tdBodys +'';         tdBodys = '';        }        table += '

'+ series[j].data[i]+'

'+axisData[i]+'

';        return table;       }     },     mark: {show:true},     restore:{show:true},    magicType: {type: ['line', 'bar','pie']},    saveAsImage:{show:true}         }     }

L'effet modifié est :

Le problème est parfaitement résolu, je. j'espère que cela vous sera utile!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!