如何无需复杂CSS/JS复刻MudBlazor官网迷你柱状图？

你可以直接利用MudBlazor自带的布局和基础组件快速实现这种迷你柱状图，完全不用额外编写复杂CSS或JavaScript，下面是两种简单方案：

方案一：基于MudProgressLinear实现 #

利用垂直方向的进度条组件作为柱子，配合水平排列的栈布局实现对齐：

<MudStack Direction="Direction.Row" Spacing="1" AlignItems="AlignItems.End" Height="40px">
    @foreach (var value in new int[] { 60, 80, 40, 90, 70 })
    {
        <MudProgressLinear Value="@value" Vertical="true" Height="100%" Width="8px" Color="Color.Primary" BorderRadius="2px" />
    }
</MudStack>

关键说明： #

• MudStack 负责水平排列所有柱子，AlignItems="AlignItems.End" 确保所有柱子底部对齐
• MudProgressLinear 设置为垂直方向（Vertical="true"），通过Value控制柱子高度占比，Width定义柱子宽度，BorderRadius实现圆角效果
• 直接复用MudBlazor的主题颜色（Color="Color.Primary"），和官网风格保持一致

方案二：基于MudPaper实现 #

用基础容器组件作为柱子，通过百分比高度控制数值对应关系：

<MudStack Direction="Direction.Row" Spacing="1" AlignItems="AlignItems.End" Height="40px">
    @foreach (var value in new int[] { 60, 80, 40, 90, 70 })
    {
        <MudPaper Height="@($"{value}%")" Width="8px" Color="Color.Primary" Elevation="0" BorderRadius="2px" Hoverable="true" HoverColor="Color.PrimaryDark" />
    }
</MudStack>

关键说明： #

• MudPaper 作为柱子容器，通过Height绑定百分比值直接控制高度
• 可开启Hoverable属性并设置HoverColor，快速实现鼠标悬停变色效果，无需自定义CSS
• Elevation="0" 移除阴影，保持极简风格

你可以根据需求调整Height（整体高度）、Spacing（柱子间距）、Width（柱子宽度）、Color等属性，完全贴合官网的迷你柱状图样式。

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