Vue3组合式API下如何让Highcharts JS饼图固定左对齐？

问题核心是用百分比设置center时，饼图位置会随屏幕宽度变化，改用固定像素值替代百分比就能解决这个问题，以下是具体实现方案：

关键修改点 #

把series中的center水平参数从百分比改为固定像素，垂直参数可保留百分比以维持垂直方向的相对位置。这样无论容器宽度如何变化，饼图的水平位置始终固定。

修改后的配置示例 #

const option = {
  series: [{
    center: ['80px', '90%'], // 水平用固定像素，垂直保持百分比
    size: '150%',
    innerSize: '65%',
    data: [
      { name: 'Valid', y: 10, color: '#13CE66' },
      { name: 'Failed Verification', y: 5, color: '#FF4949' }
    ],
    showInLegend: true
  }],
  // 可选：调整图表边距，避免内容被容器截断
  grid: {
    left: 0,
    right: 'auto',
    top: 'auto',
    bottom: 'auto'
  }
};

Vue3组合式API完整示例 #

import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const chartRef = ref(null);
    let myChart = null;

    onMounted(() => {
      myChart = echarts.init(chartRef.value);
      const option = {
        series: [{
          center: ['80px', '90%'],
          size: '150%',
          innerSize: '65%',
          data: [
            { name: 'Valid', y: 10, color: '#13CE66' },
            { name: 'Failed Verification', y: 5, color: '#FF4949' }
          ],
          showInLegend: true
        }],
        grid: { left: 0 }
      };
      myChart.setOption(option);

      // 监听窗口大小变化，确保图表正常重绘
      window.addEventListener('resize', () => myChart?.resize());
    });

    return { chartRef };
  }
};

补充说明 #

• 可根据实际需求调整center中的固定像素值（比如改成60px），让饼图贴合左侧的距离更合适。
• 给图表容器添加基础CSS样式，保证定位稳定：

.chart-container {
  position: relative;
  width: 100%;
  height: 400px; /* 根据需求设置高度 */
}

内容的提问来源于stack exchange，提问作者Ilyas