echarts मीडिया प्रश्न बूटस्ट्रैप (कैरोसेल)

Question

के साथ काम नहीं कर रहा है मेरे पास 2 स्लाइड के साथ बूटस्ट्रैप कैरोसेल है। दोनों स्लाइड्स उन पर चार्ट प्रदर्शित करने के लिए 2x2 के बूटस्ट्रैप ग्रिड का उपयोग करती हैं। वे ठीक काम कर रहे हैं, हालांकि मैं उत्तरदायी मीडिया प्रश्नों को लागू करने की कोशिश कर रहा हूं और इसे काम नहीं कर सकता। मैंने baseOptions और media विकल्पों को परिभाषित करने के लिए उपयोग किया लेकिन चार्ट लोड नहीं होते हैं और कंसोल कोई त्रुटि नहीं दिखाता है।

मैं इनलाइन शैली width और height अर्थात style="width: 100%;height:400px;" साथ <div> कंटेनर को परिभाषित करने की कोशिश की है और मैं भी तो है-

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

जावास्क्रिप्ट नीचे की तरह लगता है कि सीएसएस में 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}); 

यदि मैं मीडिया क्वेरी के बिना इसका उपयोग करता हूं तो यह ठीक काम करता है। इस

myChart1.setOption(option);

प्रलेखन के अनुसार baseOptions और media के साथ-साथ मीडिया क्वेरी का उपयोग करते हुए की तरह, चार्ट बस लोड नहीं करते हैं और यह मुझे सांत्वना में किसी भी त्रुटि के रूप में अच्छी तरह से प्रदर्शित नहीं करता है, तो मैं मुझे यकीन नहीं है कि मैं इसे सही तरीके से उपयोग कर रहा हूं या नहीं।

वैसे, मैं भी स्क्रिप्ट के अंत में यह है, जब खिड़की का आकार बदलने पर चार्ट का आकार बदलने के लिए सक्षम होना लेकिन तब मुझे एहसास हुआ कि यह सही मायने में उत्तरदायी नहीं है -

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

बूटस्ट्रैप चार्ट तत्व <div> बीएस container-fluid की कक्षा के साथ अन्य div के भीतर तत्व हैं। कैरोसेल कोड this JSFiddle में पाया जा सकता है।

Answer 1

मीडिया क्वेरी echarts संस्करण 3 में पेश की गई थी, जबकि मैं संस्करण 2 का उपयोग कर रहा हूं और इस प्रकार यह काम नहीं कर रहा था। यह बेहद अजीब बात है कि संस्करण 2 के साथ media का उपयोग किसी भी प्रकार की त्रुटि नहीं दिखाता है, न ही baseOption कोई त्रुटि दिखाता है, इसलिए मुझे अपने सिर को खरोंच छोड़ दिया गया था। दस्तावेज़ीकरण यह स्पष्ट करने के लिए पर्याप्त नहीं है कि मीडिया प्रश्न केवल संस्करण 3 में समर्थित हैं। इसलिए कोड और गिटहब धागे के माध्यम से घंटों के लिए scouring और अपने सभी जेएस संस्करणों को आजमाने के बाद मैं इस निष्कर्ष पर आया।

संस्करण 3 echarts का उपयोग करने का नकारात्मक पक्ष यह है कि इसमें "वृक्ष" चार्ट प्रकार गुम है और यह किसी भी पूर्व संस्करण की तुलना में बहुत अधिक पसंद है। साथ ही, यह संस्करण 2 की तुलना में दोगुनी धीमी है।