echarts 媒体查询不适用于 Bootstrap（轮播）

Question

我有一个带 2 张幻灯片的 bootstrap 旋转木马。两张幻灯片都使用 bootstrap 2x2 网格来显示图表。他们工作正常，但我正在尝试实施响应式媒体查询，但似乎无法正常工作。我使用 baseOptions 和 media 选项来定义，但图表没有加载，控制台也没有显示任何错误。

我尝试用内联样式 width 和 height 定义 <div> 容器，即 style="width: 100%;height:400px;" 我也尝试定义 width和 CSS 中的 height 就像这样-

.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 调整大小时调整图表的大小，但后来我意识到这不是真正的响应 -

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

bootstrap 个图表元素是其他 div 中的 <div> 个元素，class 为 BS container-fluid。轮播代码可以在 this JSFiddle 中找到。

Answer 1

media query是echarts version 3引入的，而我一直在用version 2，所以没用。非常奇怪的是，在版本 2 中使用 media 没有显示任何类型的错误，baseOption 也没有显示任何错误，所以我一直在挠头。文档不够清楚，不能说媒体查询仅在版本 3 中受支持。因此，在对代码和 GitHub 线程进行了数小时的搜索并尝试了所有 js 版本后，我得出了这个结论。

使用第 3 版 echarts 的缺点是它缺少 "Tree" 图表类型，而且它比任何以前的版本都更加挑剔。而且，它比版本 2 慢两倍。

echarts 媒体查询不适用于 Bootstrap（轮播）

echarts Media queries not working with Bootstrap (carousel)

javascript

css

media-queries

twitter-bootstrap

echarts