ECharts作为前端数据可视化领域常用的图表库，凭借丰富的配置能力被广泛应用于后台管理系统、数据大屏、统计分析平台等项目中。其中，饼图（pie chart）是展示比例关系和数据占比的重要图表类型。
在实际开发过程中，经常会遇到饼图默认位置不符合页面布局需求的问题。例如，右侧需要预留图例区域、左侧需要展示数据说明，或者多个图表需要进行组合排列，此时就需要对ECharts饼图的位置进行调整。通过合理设置饼图中心点位置，可以轻松实现饼图向左移动、向右移动以及自定义布局。
ECharts饼图位置调整的核心配置
ECharts中的饼图位置主要通过center属性控制。
center用于设置饼图圆心的位置，默认值通常为：
center: ['50%', '50%']其中：
第一个参数表示水平方向位置；
第二个参数表示垂直方向位置。
例如：
option = {
series: [
{
type: 'pie',
center: ['40%', '50%'],
radius: '60%',
data: [
{
value: 40,
name: '分类A'
},
{
value: 30,
name: '分类B'
},
{
value: 20,
name: '分类C'
}
]
}
]
};上述配置会让饼图整体向左移动，因为圆心的水平位置由默认的50%调整到了40%。
使用center属性实现饼图向左移动
如果希望ECharts饼图明显向左偏移，只需要减少center第一个参数的百分比。
例如：
series: [
{
type: 'pie',
radius: ['40%', '70%'],
center: ['35%', '50%'],
data: [
{
name: '搜索引擎',
value: 1048
},
{
name: '直接访问',
value: 735
},
{
name: '邮件营销',
value: 580
}
]
}
]这里：
center: ['35%', '50%']表示：
水平方向距离左侧35%的位置作为圆心；
垂直方向保持页面中间位置。
相比默认的50%，饼图整体向左移动15%左右。
这种方式适用于：
饼图右侧需要放置图例；
页面存在说明文字区域；
多个组件横向排列；
数据大屏布局优化。
结合legend实现左右布局
很多后台系统中，饼图左侧展示图形，右侧展示图例。如果不调整位置，图例可能覆盖饼图区域。
推荐写法：
option = {
legend: {
orient: 'vertical',
right: '10%',
top: 'center'
},
series: [
{
type: 'pie',
radius: '55%',
center: ['35%', '50%'],
data: [
{
value: 335,
name: '产品A'
},
{
value: 310,
name: '产品B'
},
{
value: 234,
name: '产品C'
}
]
}
]
};通过：
center: ['35%', '50%']将饼图移动到左侧，同时利用：
legend.right固定图例位置，可以形成清晰的左右结构。
通过像素值精确控制饼图位置
除了百分比，center也支持像素值。
例如：
center: ['200px', '300px']表示：
圆心距离容器左侧200px；
圆心距离顶部300px。
这种方式适合固定尺寸的大屏项目。
示例：
series: [
{
type: 'pie',
center: ['220px', '50%'],
radius: 120,
data: [
{
value: 60,
name: '完成'
},
{
value: 40,
name: '未完成'
}
]
}
]如果页面布局尺寸固定，使用像素定位可以获得更加精准的视觉效果。
饼图向左移动时radius参数的影响
调整饼图位置时，还需要注意radius属性。
例如：
radius: '70%'会让饼图尺寸变大。
如果同时设置：
center: ['30%', '50%']可能导致饼图靠近边缘甚至出现部分超出容器的问题。
因此通常需要同时调整：
center: ['35%', '50%'],
radius: '55%'保持图表位置和大小之间的平衡。
对于环形图：
radius: ['40%', '65%']还可以分别控制内半径和外半径。
Vue项目中调整ECharts饼图位置
在Vue项目中使用ECharts时，通常将配置写入初始化方法。
示例：
mounted() {
const chart = this.$echarts.init(
document.getElementById('pieChart')
);
const option = {
series: [
{
type: 'pie',
center: ['38%', '50%'],
radius: '60%',
data: [
{
value: 100,
name: '成功'
},
{
value: 30,
name: '失败'
}
]
}
]
};
chart.setOption(option);
}修改：
center: ['38%', '50%']即可改变饼图水平位置。
如果需要动态调整，可以结合响应式变量：
center: [
this.piePosition + '%',
'50%'
]根据不同屏幕尺寸动态控制饼图位置。
ECharts饼图位置调整常见问题
1. 修改center后没有效果
常见原因包括：
配置没有重新调用
setOption；修改的是错误的series对象；
页面存在多个ECharts实例。
检查：
chart.setOption(option);是否执行。
同时确认：
series[0].center配置位置正确。
2. 饼图移动后被裁剪
如果饼图靠近边缘，可以调整：
grid但需要注意，饼图主要受：
center