echarts 媒体查询不适用于 Bootstrap(轮播)
Posted
技术标签:
【中文标题】echarts 媒体查询不适用于 Bootstrap(轮播)【英文标题】:echarts Media queries not working with Bootstrap (carousel) 【发布时间】:2017-09-30 16:55:40 【问题描述】:我有一个带有 2 张幻灯片的引导轮播。两张幻灯片都使用 2x2 的引导网格在其上显示图表。他们工作正常,但是我正在尝试实现响应式媒体查询,但似乎无法使其工作。我使用baseOptions
和media
选项来定义,但图表没有加载,控制台也没有显示任何错误。
我尝试使用内联样式width
和height
即style="width: 100%;height:400px;"
定义<div>
容器,并且我还尝试在CSS 中定义width
和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).on('resize', function()
myChart1.resize();
);
引导图表元素是其他 div
中的 <div>
元素,其类为 BS container-fluid
。轮播代码可以在thisJSFiddle中找到。
【问题讨论】:
可以理解,你有没有试过在窗口达到一定宽度或高度时重新绘制图表? 是的,我做到了。真正的问题是我使用的是版本 2 的 echarts,而media
仅在版本 3 中引入。奇怪的是它没有显示任何错误。
【参考方案1】:
媒体查询是在 echarts 版本 3 中引入的,而我一直在使用版本 2,因此它无法正常工作。使用带有版本 2 的 media
并没有显示任何错误,这非常奇怪,baseOption
也没有显示任何错误,所以我只能摸不着头脑。文档还不够清楚地说明媒体查询仅在版本 3 中受支持。因此,经过数小时的代码和 GitHub 线程搜索并尝试了所有 js 版本后,我得出了这个结论。
使用第 3 版 echarts 的缺点是它缺少“树”图表类型,而且它比任何以前的版本都更加挑剔。此外,它比版本 2 慢两倍。
【讨论】:
以上是关于echarts 媒体查询不适用于 Bootstrap(轮播)的主要内容,如果未能解决你的问题,请参考以下文章