我有一个带有 2 张幻灯片的引导轮播。两张幻灯片都使用 2x2 的引导网格在其上显示图表。他们工作正常,但是我正在尝试实现响应式媒体查询,但似乎无法使其工作。我使用baseOptions
和media
选项来定义,但图表没有加载,控制台没有显示任何错误。
我试图<div>
用内联样式定义容器,并且width
我也尝试在 CSS 中定义and像这样-height
style="width: 100%;height:400px;"
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
and media
,图表根本不会加载,它也不会在控制台中显示任何错误,所以我不确定我是否正确使用它。
顺便说一句,我在脚本末尾也有这个,以便能够在调整窗口大小时调整图表大小,但后来我意识到这并不是真正的响应 -
$(window).on('resize', function(){
myChart1.resize();
});
引导图元素是<div>
其他元素中div
的 BS 类container-fluid
。轮播代码可以在这个JSFiddle 中找到。