echart饼图占满容易

### 设置 ECharts 饼图以确保其完全填充容器并优化显示效果

为了确保 ECharts 饼图能够正确且美观地填充满容器，可以通过调整图表配置项来实现这一目标。以下是具体的解决方案：

#### 1. 调整 `grid` 和 `radius`

通过设置饼图的半径 (`radius`) 参数，可以使饼图更好地适应容器大小。通常情况下，建议将 `radius` 设定为相对值而不是绝对像素值。

option = {
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'], // 使用百分比定义内圆和外圆的比例
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            }
        }
    ]
};

此方法有助于根据不同屏幕尺寸动态调整饼图大小[^1]。

#### 2. 自动响应式设计

为了让饼图随窗口变化而自动调整大小，在初始化图表实例时需开启自适应功能，并监听浏览器窗口的变化事件以便及时更新图表布局。

window.addEventListener('resize', function () {
    myChart.resize();
});

这段代码确保当页面宽度发生变化时（例如用户改变浏览器窗口大小），饼图会相应地重新计算自身的宽高比例[^4]。

#### 3. 定制化样式与交互体验

除了基本的功能之外，还可以进一步定制化饼图的颜色方案以及标签位置等细节部分，从而提升整体视觉呈现质量。比如利用提供的配色数组来自定义各扇区的颜色；或者通过设置合适的字体大小、颜色等方式改善可读性和用户体验。

/* CSS */
.echarts-container {
    width: 100%;
    height: 100vh;
}

上述CSS规则使得包含ECharts图表的DOM元素占据整个视口的高度和宽度，进而保证内部嵌入的饼状图也能充分扩展至父级容器边界[^3]。