viser-vue 图例水平不居中的问题

发表于 作者 jikeyshi

viser-vue 饼图无法在容器内水平居中

核心原因：viser-vue 图表自带默认 padding（内边距），图例 / 标签会占用画布空间，导致饼图圆心偏移；另外外层容器样式、图例位置也会挤压饼图，视觉上偏左 / 偏右。

方案 1：图表配置去掉默认 padding（最常用）

viser-vue 的 <Chart> 顶层设置 padding: [0,0,0,0]，消除画布预留边距，饼图就会以画布中心渲染。

<template>
  <div class="chart-wrap">
    <Chart :data="pieData" :padding="[0,0,0,0]">
      <Pie position="percent" />
      <!-- 图例如果放在左右，会挤压饼图；不需要就直接删掉Legend -->
      <!-- <Legend /> -->
    </Chart>
  </div>
</template>

<style scoped>
.chart-wrap {
  width: 400px;
  height: 300px;
  border:1px solid #eee;
  /* 外层容器flex居中，兜底 */
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
  • padding 数组顺序：[top, right, bottom, left]
  • 如果需要保留一点边距，改成 padding:[10,10,10,10]，四边数值保持一致，否则圆心偏移。

方案 2：图例导致偏移（高频踩坑点）

<Legend> 默认在右侧 / 左侧，会抢占画布宽度，饼图被挤向另一边。 可选处理：

  1. 图例放顶部 / 底部：position="top" / position="bottom"，不占用左右宽度
<Legend position="top" />
  1. 不需要图例直接删掉 <Legend>
  2. 图例独立放到容器外面，不要放在 Chart 组件内部

方案 3：外层容器 CSS 兜底（容器本身居中）

注意：外层 flex 是让【整个 svg 画布】居中；不是画布内部饼图居中。画布内部饼图偏移，只改外层 CSS 无效！

.chart-wrap {
  width: 100%;
  height: 350px;
  display: flex;
  justify-content: center; /*水平居中*/
  align-items: center;     /*垂直居中*/
}

方案 4：饼图半径微调

如果饼图贴边，可设置 outerRadius，控制饼图占画布比例，保证圆心居中：

<Pie position="percent" :outerRadius="0.8" />

outerRadius 取值 0~1，0.8 = 占画布 80%。

排查步骤（按顺序）

  1. 删掉 <Legend> 测试，看是否立刻居中 → 图例挤压问题
  2. 给 <Chart> 添加 :padding="[0,0,0,0]" → 消除默认边距（90% 场景解决）
  3. 检查父容器有没有 padding-left / margin-left 等样式
  4. 浏览器 F12，看 svg 画布宽高，确认画布本身在容器居中

最小完整示例

<template>
  <div class="box">
    <Chart :data="data" :padding="[0,0,0,0]">
      <Pie position="percent" :outerRadius="0.75" />
      <Tooltip />
    </Chart>
  </div>
</template>

<script>
import { Chart, Pie, Tooltip } from 'viser-vue';
export default {
  components: { Chart, Pie, Tooltip },
  data() {
    return {
      data: [
        { name: 'A', value: 35 },
        { name: 'B', value: 25 },
        { name: 'C', value: 40 }
      ]
    }
  }
}
</script>

<style scoped>
.box {
  width: 400px;
  height: 300px;
  border:1px solid #ccc;
}
</style>