echart饼图大小随着父div的大小变化而变化
时间: 2024-01-26 18:12:59 浏览: 24
要实现 ECharts 饼图的大小随着父 div 的大小变化而变化,可以使用 ECharts 提供的 `resize` 方法和 `window` 对象的 `resize` 事件。
具体做法如下:
1. 在 HTML 中定义一个 div 作为 ECharts 的容器,给它设定一个固定的宽度和高度,如下所示:
```html
<div id="chart-container" style="width: 600px; height: 400px;"></div>
```
2. 在 JavaScript 中初始化 ECharts 实例,并将其绑定到上面定义的 div 容器上:
```javascript
var chart = echarts.init(document.getElementById('chart-container'));
```
3. 在 ECharts 实例中定义饼图的数据和配置项:
```javascript
var option = {
// 饼图的配置项
series: [{
type: 'pie',
data: [...],
radius: '50%',
// 其他配置项...
}]
};
chart.setOption(option);
```
4. 在页面加载时,调用 `resize` 方法,使 ECharts 实例自适应容器的大小:
```javascript
chart.resize();
```
5. 监听 `window` 对象的 `resize` 事件,当窗口大小发生变化时,再次调用 `resize` 方法:
```javascript
window.addEventListener('resize', function() {
chart.resize();
});
```
这样,当父 div 的大小发生变化时,饼图的大小也会自动调整,保持和容器的比例相同。