echarts Медиа-запросы не работают с Bootstrap (карусель)

Question

У меня есть загрузочная карусель с 2 слайдами. Оба слайда используют сетки начальной загрузки 2х2 для отображения на них графиков. Они работают нормально, однако я пытаюсь реализовать адаптивные медиа-запросы и не могу заставить его работать. я использовал baseOptions а также media опции для определения, но диаграммы не загружаются, и консоль не показывает никаких ошибок.

Я попытался определить <div> контейнер со встроенным стилем width а также height т.е. style="width: 100%;height:400px;" и я также попытался определить width а также height в CSS вроде так

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

JavaScript выглядит так, как показано ниже.

<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> элементы внутри других div с классом BS container-fluid, Код карусели можно найти в этом JSFiddle.

Answer 1

Медиа-запрос был введен в echarts версии 3, тогда как я использовал версию 2, и поэтому он не работал. Это очень странно, что с помощью media с версией 2 не показывает никаких ошибок, как и baseOption показать любую ошибку, поэтому я остался царапать мою голову. Документация не достаточно ясна, чтобы сказать, что медиазапросы поддерживаются только в версии 3. Поэтому, после того, как часами изучал код и потоки GitHub и пробовал все их версии js, я пришел к такому выводу.

Недостатком использования echarts версии 3 является то, что в нем отсутствует тип диаграммы "Дерево", и он намного более требователен, чем в любой предыдущей версии. Кроме того, это в два раза медленнее, чем версия 2.