echartsブートストラップ（カルーセル）で動作しないメディアクエリ

Question

2つのスライドを持つブートストラップカルーセルがあります。どちらのスライドも、2x2のブートストラップグリッドを使用してチャートを表示します。彼らは正常に動作していますが、私はレスポンシブなメディアクエリを実装しようとしており、動作させることはできません。定義するにはbaseOptionsとmediaオプションを使用しましたが、グラフが読み込まれず、コンソールにエラーが表示されません。

私は、インラインスタイルwidthとheightすなわちstyle="width: 100%;height:400px;"で<div>コンテナを定義しようとしたと私はまた、Javascriptを以下のように見えるSO-

.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);

のように、チャートは単純にロードされませんし、それは同様に私のコンソールにエラーが表示されませんので、I私が正しく使用しているかどうかはわかりません。ところで

、私はまた、ウィンドウのサイズが変更されたときのグラフのサイズを変更できるようにするには、スクリプトの最後でこれを持っていますが、私はこれが本当に応答しないことに気づいた -

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

ブートストラップチャート要素はの要素があり、divのクラスにはBS container-fluidのクラスがあります。カルーセルコードはthis JSFiddleにあります。

Answer 1

メディアクエリはechartsバージョン3で導入されましたが、私はバージョン2を使用していたため、動作していませんでした。バージョン2でmediaを使用しても何のエラーも表示されないことは非常に奇妙です。baseOptionはエラーを表示しないので、私は頭を傷つけていました。ドキュメンテーションは、メディアクエリがバージョン3でしかサポートされていないと言うほど明確ではありません。そこで、コードとGitHubスレッドを何時間も調べて、すべてのjsバージョンを試したところ、私はこの結論に達しました。

バージョン3のechartを使用することの欠点は、「ツリー」チャートタイプがなく、以前のバージョンよりもはるかに選択肢が多いことです。また、バージョン2の2倍の遅さです。