为什么我的Victory Bar图表在Vue中显示不出来？

Zz晨硕提问于 2026-02-14 09:16:42 阅读 24

交互

我用Victory Bar做柱状图时，数据能正确打印在控制台，但页面上就是不显示图形，这是什么问题啊？

我已经按照文档引入组件了，数据格式也检查过没问题，连坐标轴都显示，就是柱子看不见。试过调整宽度高度还是不行…


<template>
  <div style="width:400px;height:300px">
    <VictoryBar 
      :data="salesData" 
      x="month" 
      y="amount" 
      style="data: {fill: '#50E3C2'}"
    />
    <VictoryAxis />
    <VictoryAxis dependentAxis />
  </div>
</template>

<script>
import { VictoryBar, VictoryAxis } from "victory";

export default {
  components: { VictoryBar, VictoryAxis },
  data() {
    return {
      salesData: [
        { month: "Jan", amount: 12 },
        { month: "Feb", amount: 24 },
        { month: "Mar", amount: 18 }
      ]
    };
  }
};
</script>

控制台没有任何报错，但柱子就是不显示，是不是需要设置什么特别的配置项？

我来解答赞 5 收藏

反馈

2 条解答

增梅 Dev Lv1

你这个问题主要是样式绑定写法有问题。Vue里属性绑定要用冒号，但你的style写成了普通字符串，这样是不会生效的。

一般这样处理，把style改成动态绑定，写成这样：

<VictoryBar 

  :data="salesData" 

  x="month" 

  y="amount"

  :style="{ data: { fill: '#50E3C2' } }"

/>

注意这里用了冒号，表示是JavaScript表达式。原来你写的style是字符串，组件没法正确解析样式对象。

另外建议检查一下svg容器的尺寸，你外面包了div设置了宽高，但最好直接给svg设置。可以在VictoryBar上加个属性：

:width="400" :height="300"

最后提醒下，记得确认下victory库的版本，不同版本api可能有差异。我之前也踩过类似的坑，调试了好久才发现是样式绑定的问题，希望你能少走点弯路。

2026-02-17 21:04

Code°曌煜 Lv1

你的样式写法有问题，style应该是个对象而不是字符串。试试改成这样：

<VictoryBar 

  :data="salesData" 

  x="month" 

  y="amount" 

  :style="{ data: { fill: '#50E3C2' } }"

/>

还有别忘了给VictoryBar设置个domain范围，不然它可能不知道怎么渲染柱子的高度。加上:domain="{ y: [0, 30] }"试试。

我也是被这些坑折磨过，太困了，希望能帮到你。

2026-02-14 12:13