echarts 부트 스트랩 (컨베이어)이 작동하지 않는 미디어 쿼리

Question

2 개의 슬라이드가있는 부트 스트랩 회전식 컨베이어가 있습니다. 두 슬라이드 모두 2x2의 부트 스트랩 그리드를 사용하여 차트를 표시합니다. 그들은 잘 작동하지만 반응 형 미디어 쿼리를 구현하려고 노력 중이며 제대로 작동하지 않는 것처럼 보입니다. 정의하려면 baseOptions 및 media 옵션을 사용했지만 차트가로드되지 않고 콘솔에 오류가 표시되지 않습니다.

나는 인라인 스타일 width 및 height 즉 style="width: 100%;height:400px;"와 <div> 컨테이너를 정의하기 위해 노력하고 또한 자바 스크립트는 다음과 같은 소위

.mychart { 
     width: 100%; 
     height: 400px; 
     } 

같은 CSS에서 width 및 height을 정의하기 위해 노력했다.

<div id="chart1" style="width: 100%;height:400px;"></div> //with inline style 
<div id="chart1" class="mychart"></div> //with CSS class 

var myChart1 = echarts.init(document.getElementById('chart1')); 
var lpnArr = [101, 43, 10, 250]; 
option = { 
       title : { 
          text: 'My data Pie', 
          subtext: 'Data as of last batch', 
          x:'center' 
         }, 
      tooltip : { 
         trigger: 'item', 
         formatter: "{b} : {c} ({d}%)" 
         }, 
      legend: { 
         orient : 'vertical', 
         x : 'left', 
         data:['Processed','Unprocessed','In RIB','Errors'] 
         }, 
      color: ['#4bc14f','#ff7f50','#da70d6','#d8316f'], 
      toolbox: { 
          show : true, 
          feature : { 
               mark : {show: false}, 
               dataView : {show: false}, 
               magicType : { show: false}, 
               dataZoom : { show : false}, 
               restore : {show: true}, 
               saveAsImage : {show: true} 
              } 
          }, 
      calculable : true, 
      series : [ 
         { 
          name:'Processed', 
          type:'pie', 
          radius : ['50%', '70%'], 
          startAngle : 230, 
          center: ['35%', '50%'], 
          itemStyle : labelFormatter, //custom formatter 
          data: lpnArr //load chart with data array lpnArr 
         } 
         ] 
     } 

var mediaQuery = [ 
           { 
            option: { 
             series: [ 
              { 
               radius: ['50%', '70%'], 
               center: ['35%', '50%'] 
              } 
             ] 
            } 
           }, 
           { 
            query: { 
             minAspectRatio: 1 
            }, 
            option: { 
             series: [ 
              { 
               radius: ['50%', '70%'], 
               center: ['35%', '50%'] 
              } 
             ] 
            } 
           }, 
           { 
            query: { 
             maxAspectRatio: 1 
            }, 
            option: { 
             series: [ 
              { 
               radius: ['50%', '70%'], 
               center: ['50%', '35%'] 
              } 
             ] 
            } 
           }, 
           { 
            query: { 
             maxWidth: 500 
            }, 
            option: { 
             series: [ 
              { 
               radius: ['50%', '70%'], 
               center: ['50%', '35%'] 
              } 
             ] 
            } 
           } 
          ]; 

myChart1.setOption({baseOption : option, 
         media : mediaQuery}); 

미디어 쿼리없이 사용하면 정상적으로 작동합니다. 문서에 따라 baseOptions 및 media와 함께, 미디어 쿼리를 사용하여이

myChart1.setOption(option);

처럼, 차트는 단순히로드되지 않으며, 그것은뿐만 아니라 나에게 콘솔에 오류가 표시되지 않습니다, 그래서 내가 올바르게 사용하고 있는지 확실하지 않습니다. 그런데

, 나는 또한 창 크기를 조정할 때 차트의 크기를 조정 할 수 있도록 스크립트의 끝이있다 그러나 나는이 진정으로 반응하지 않는 것을 깨달았다 - 부트 스트랩

$(window).on('resize', function(){ 
        myChart1.resize(); 
       }); 

차트 요소는 다른 div 내에있는 <div> 요소이며 BS container-fluid 클래스입니다. 회전식 코드는 this JSFiddle에서 찾을 수 있습니다.

Answer 1

미디어 쿼리는 echarts 버전 3에 도입되었지만 버전 2는 사용하고있어 작동하지 않았습니다. 버전 2와 함께 media을 사용하면 어떤 종류의 오류도 표시되지 않으므로 baseOption은 오류를 표시하지 않으므로 머리를 긁적 인 상태로 남겨 두었습니다. 문서는 미디어 쿼리가 버전 3에서만 지원된다고 말할 정도로 명확하지 않습니다. 그래서 몇 시간 동안 코드와 GitHub 스레드를 샅샅이 뒤지고 모든 js 버전을 사용해 본 결과 나는이 결론에 도달했습니다.

버전 3 echart를 사용하는 단점은 "트리"차트 유형이 누락되어 이전 버전보다 훨씬 더 유용하다는 것입니다. 또한 버전 2보다 두 배 느립니다.