Question

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

我尝试使用内嵌样式<div>和width height来定义style="width: 100%;height:400px;"容器，我还尝试定义width和{像CSS这样的{1}} -

height

javascript如下所示。

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

如果我在没有媒体查询的情况下使用它，它可以正常工作。像这样

<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>个元素，其中包含BS div类。轮播代码可以在this JSFiddle。

中找到

Answer 1

媒体查询是在echarts版本3中引入的，而我一直在使用版本2，因此它无法正常工作。将media与版本2一起使用并没有显示任何错误，baseOption也没有显示任何错误，所以我一直在挠头，这是非常奇怪的。文档不够明确，只能说版本3支持媒体查询。因此，在仔细搜索代码和GitHub线程数小时并尝试所有js版本后，我得出了这个结论。

使用版本3 echarts的缺点是它缺少“Tree”图表类型，并且它比任何先前版本更加挑剔。此外，它比版本2慢两倍。

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

1 个答案: