echarts가 데이터 보기 dataView에서 스타일을 최적화하는 방법(코드 예)

이 문서의 내용은 echarts가 데이터 보기 dataView에서 스타일(코드 예제)을 최적화하는 방법에 대한 것입니다. 이는 특정 참조 값을 가지고 있으므로 도움이 될 수 있습니다.

echart를 사용하는 과정에서 도구 상자에 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>名称</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}         }     }

수정된 효과는 다음과 같습니다.

문제가 완벽하게 해결되었으면 좋겠습니다. 당신에게 도움이 될 것입니다!

위 내용은 echarts가 데이터 보기 dataView에서 스타일을 최적화하는 방법(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!