echarts 媒体查询不适用于 Bootstrap(轮播)

Posted

技术标签:

【中文标题】echarts 媒体查询不适用于 Bootstrap(轮播)【英文标题】:echarts Media queries not working with Bootstrap (carousel) 【发布时间】:2017-09-30 16:55:40 【问题描述】:

我有一个带有 2 张幻灯片的引导轮播。两张幻灯片都使用 2x2 的引导网格在其上显示图表。他们工作正常,但是我正在尝试实现响应式媒体查询,但似乎无法使其工作。我使用baseOptionsmedia 选项来定义,但图表没有加载,控制台也没有显示任何错误。

我尝试使用内联样式widthheightstyle="width: 100%;height:400px;" 定义<div> 容器,并且我还尝试在CSS 中定义widthheight 像这样-

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

使用媒体查询,根据文档以及baseOptionsmedia,图表根本不会加载,它也不会在控制台中显示任何错误,所以我不确定是否我是否正确使用它。

顺便说一句,我在脚本末尾也有这个,以便能够在调整窗口大小时调整图表大小,但后来我意识到这并不是真正的响应 -

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

引导图表元素是其他 div 中的 &lt;div&gt; 元素,其类为 BS container-fluid。轮播代码可以在thisJSFiddle中找到。

【问题讨论】:

可以理解,你有没有试过在窗口达到一定宽度或高度时重新绘制图表? 是的,我做到了。真正的问题是我使用的是版本 2 的 echarts,而 media 仅在版本 3 中引入。奇怪的是它没有显示任何错误。 【参考方案1】:

媒体查询是在 echarts 版本 3 中引入的,而我一直在使用版本 2,因此它无法正常工作。使用带有版本 2 的 media 并没有显示任何错误,这非常奇怪,baseOption 也没有显示任何错误,所以我只能摸不着头脑。文档还不够清楚地说明媒体查询仅在版本 3 中受支持。因此,经过数小时的代码和 GitHub 线程搜索并尝试了所有 js 版本后,我得出了这个结论。

使用第 3 版 echarts 的缺点是它缺少“树”图表类型,而且它比任何以前的版本都更加挑剔。此外,它比版本 2 慢两倍。

【讨论】:

以上是关于echarts 媒体查询不适用于 Bootstrap(轮播)的主要内容,如果未能解决你的问题,请参考以下文章

媒体查询不适用于 Android

媒体查询不适用于 Wordpress

为啥媒体查询不适用于移动设备?

媒体查询不适用于移动设备

媒体查询不适用于任何 iphone

CSS 媒体查询最近不适用于 iPad