echarts根据父级div大小自动适应大小
时间: 2023-07-24 13:12:45 浏览: 49
要让echarts图表根据父级div大小自动适应大小,可以通过以下步骤实现:
1. 获取父级div的宽度和高度
可以使用jQuery或原生JavaScript获取父级div的宽度和高度。
2. 设置echarts容器的宽度和高度
在初始化echarts时,可以使用setOption方法的option属性设置echarts容器的宽度和高度,例如:
```javascript
var myChart = echarts.init(document.getElementById('chart'));
myChart.setOption({
...
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '邮件营销',
type: 'bar',
data: [120, 200, 150, 80, 70, 110, 130]
}],
// 设置容器宽度和高度
width: parentWidth + 'px',
height: parentHeight + 'px'
});
```
3. 监听窗口大小改变事件
如果父级div的大小可能会随着窗口大小的改变而改变,可以使用jQuery或原生JavaScript监听窗口大小改变事件,然后重新设置echarts容器的宽度和高度。例如:
```javascript
$(window).resize(function() {
var parentWidth = $('#chart').parent().width();
var parentHeight = $('#chart').parent().height();
myChart.resize({
width: parentWidth + 'px',
height: parentHeight + 'px'
});
});
```