当前位置：首页 > news >正文

【案例】ECharts 环形图中心下移后，如何保持中间图片和文案居中

news 2025/8/19 11:20:16

在使用 ECharts 绘制环形图时，有时我们需要将环形图的中心点下移以适应整体布局。但这会带来一个问题：原本居中的图片和文字会偏离环形图的中心。本文将介绍如何解决这个问题，通过动态计算位置确保图片和文案始终保持在环形图中心。

这个图片中，因环形图上部分占用空间大，产品要求把整个图形下移,同时保证图表适配不同尺寸页面，但是中心点top 设置下移后，中间的图片设置百分比后，还得计算图片本出身高度，文字本省高度，思路是增加两个动态属性，环形图的options动态配置这两个属性。

相关代码摘录

以下是实现这一需求的核心代码：

// 计算并设置选项
getoptions(clientHeight, textHeight) {console.log('clientHeight', clientHeight, textHeight);return {grid: {containLabel: true,},graphic: {// 图形中间图片和文字elements: [{type: 'image',style: {image: pieBg,width: 81,height: 81,},left: 'center',top: clientHeight, // 使用动态计算的top值},{type: 'text',left: 'center',top: textHeight, // 使用动态计算的top值style: {text: 0 + 'min',fontSize: 16,fill: 'rgba(255, 255, 255, 1)',},},],},tooltip: {// 提示框配置...},series: [{name: '生产达成率',type: 'pie',radius: [40, '95%'],center: ['50%', '65%'], // 环形图中心下移到65%的位置roseType: 'area',startAngle: -55,label: {// 标签配置...},itemStyle: {// 样式配置...},},],};
},// 初始化图表
initChart(clientHeight, textHeight) {this.chart = echarts.init(this.$refs.chart);const option = this.getoptions(clientHeight, textHeight);option.series[0].data = this.chartData;option.graphic.elements[1].style.text = this.value + '%';this.chart.setOption(option);
},// 页面挂载时
mounted() {this.$nextTick(() => {// 计算图片和文字的top值this.clientHeight = this.$refs.chart.clientHeight * 0.65 - 40;this.textHeight = this.$refs.chart.clientHeight * 0.65 - 10;this.init(this.clientHeight, this.textHeight); // 加载首次执行window.addEventListener('resize', this.onWindowResize);});
},// 窗口大小改变时
onWindowResize() {if (this.chart) {this.chart.resize(); // 在窗口大小改变时调整图表大小// 重新计算位置并更新图表this.clientHeight = this.$refs.chart.clientHeight * 0.65 - 40;this.textHeight = this.$refs.chart.clientHeight * 0.65 - 10;this.initChart(this.clientHeight, this.textHeight);}
}

实现思路解析

1. 环形图中心下移设置

首先，我们通过设置 series 中的 center 属性将环形图中心下移：

center: ['50%', '65%'] // X轴保持50%居中，Y轴下移到65%的位置

这行代码将环形图的中心从默认的 50% 下移到了 65% 的位置，使环形图整体呈现下移效果。

2. 动态计算中心元素位置

为了让图片和文字也跟随环形图中心下移，我们需要动态计算它们的 top 值：

// 计算图片的top值this.clientHeight = this.$refs.chart.clientHeight * 0.65 - 40;// 计算文字的top值this.textHeight = this.$refs.chart.clientHeight * 0.65 - 10;

这里的计算逻辑是：

以图表容器的高度（clientHeight）为基准

乘以 65%，使元素跟随环形图中心下移

减去一定像素值（40 和 10）用于微调，补偿元素自身高度带来的视觉偏移

3. 响应式调整

为了在窗口大小变化时仍然保持居中，我们在 resize 事件中重新计算位置：

onWindowResize() {if (this.chart) {this.chart.resize();// 重新计算位置this.clientHeight = this.$refs.chart.clientHeight * 0.65 - 40;this.textHeight = this.$refs.chart.clientHeight * 0.65 - 10;this.initChart(this.clientHeight, this.textHeight);}
}

这样无论窗口如何变化，图片和文字都能始终保持在环形图的中心位置。