live chart 仪表盘和饼图 示例

先上图:

下面是代码:

cs 复制代码
   <!--第一个卡片-->
   <GroupBox Header="各生产线人数">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="45"/>
               <RowDefinition/>
               <RowDefinition Height="auto"/>
           </Grid.RowDefinitions>

           <lvc:PieChart Grid.Row="1" InnerRadius="35" Width="115"
                     StartingRotationAngle="0">
               <lvc:PieChart.Series>
                   <lvc:PieSeries Values="12" Fill="#FFCA0A" Title="生产线1" 
                              LabelPosition="OutsideSlice"
                              DataLabels="True" Foreground="#999" FontWeight="Thin"/>

                   <lvc:PieSeries Values="43" Fill="#5665F4" Title="生产线2" LabelPosition="OutsideSlice"
  DataLabels="True" Foreground="#999" FontWeight="Thin"/>

                   <lvc:PieSeries Values="31" Fill="#00BDBD" Title="生产线3" LabelPosition="OutsideSlice"
  DataLabels="True" Foreground="#999" FontWeight="Thin"/>

                   <lvc:PieSeries Values="14" Fill="#FF7473" Title="生产线4" LabelPosition="OutsideSlice"
  DataLabels="True" Foreground="#999" FontWeight="Thin"/>
               </lvc:PieChart.Series>
           </lvc:PieChart>


           <UniformGrid Grid.Row="2" Margin="15,10" TextBlock.FontSize="10">
               <StackPanel Orientation="Horizontal" Height="20">
                   <Ellipse Width="8" Height="8" Fill="#5665F4"/>
                   <TextBlock Text="生产线1" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
                   <TextBlock Text="110 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal" Height="20">
                   <Ellipse Width="8" Height="8" Fill="#00BDBD"/>
                   <TextBlock Text="生产线2" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
                   <TextBlock Text="78 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal" Height="20">
                   <Ellipse Width="8" Height="8" Fill="#FF7473"/>
                   <TextBlock Text="生产线3" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
                   <TextBlock Text="35 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal" Height="20">
                   <Ellipse Width="8" Height="8" Fill="#FFCA0A"/>
                   <TextBlock Text="生产线4" Foreground="#999" VerticalAlignment="Center" Margin="3,0"/>
                   <TextBlock Text="31 人" VerticalAlignment="Center" Width="32" TextAlignment="Right"/>
               </StackPanel>
           </UniformGrid>
       </Grid>
   </GroupBox>

   <!--第二个卡片-->
   <GroupBox Header="质检情况" Grid.Column="1">
       <Grid>
           <Grid.RowDefinitions>
               <RowDefinition Height="45"/>
               <RowDefinition/>
               <RowDefinition Height="auto"/>
           </Grid.RowDefinitions>

           <lvc:AngularGauge Value="34" FromValue="0" ToValue="100" Wedge="270"
                         TicksForeground="White" Foreground="#999" 
                         FontSize="12" FontWeight="Normal"
                         SectionsInnerRadius=".85"
                         LabelsStep="20" TicksStep="5"
                         Margin="30" LabelsEffect="{x:Null}"
                         Grid.Row="1" Name="ag">
               <lvc:AngularGauge.Sections>
                   <lvc:AngularSection FromValue="0" 
                                   ToValue="{Binding ElementName=ag,Path=Value}" 
                                   Fill="#647FF5"/>
                   <lvc:AngularSection FromValue="{Binding ElementName=ag,Path=Value}" 
                                   ToValue="100" Fill="#ECEEF5"/>
               </lvc:AngularGauge.Sections>
           </lvc:AngularGauge>

           <UniformGrid Grid.Row="2" Margin="15,0">
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="已质检" Foreground="#8A8BBF" FontSize="11"/>
                   <TextBlock Text="80%" Margin="10,0" FontWeight="Bold"/>
               </StackPanel>
               <StackPanel Orientation="Horizontal">
                   <TextBlock Text="质检通过率" Foreground="#8A8BBF" FontSize="11"/>
                   <TextBlock Text="94%" Margin="10,0" FontWeight="Bold"/>
               </StackPanel>
           </UniformGrid>
       </Grid>
   </GroupBox>
相关推荐
漂流瓶jz28 分钟前
解锁Babel核心功能:从转义语法到插件开发
前端·javascript·typescript
DCTANT1 小时前
【报错记录】OpenGauss/磐维数据库连接报:org.postgresql.util.PSQLException: 致命错误: 账户被锁定
数据库·postgresql
周小码1 小时前
shadcn-table:构建高性能服务端表格的终极解决方案 | 2025最新实践
前端·react.js
keep__go1 小时前
postgresql9.2.4 跨版本升级14.6
linux·运维·数据库·postgresql
大怪v1 小时前
老乡,别走!Javascript隐藏功能你知道吗?
前端·javascript·代码规范
Doris_LMS1 小时前
Git的强软硬回退(三)
运维·服务器·数据库·git·idea
webYin2 小时前
vue2 打包生成的js文件过大优化
前端·vue.js·webpack
gnip2 小时前
结合Worker通知应用更新
前端·javascript
williamdsy2 小时前
【postgresql】JPA LIKE 查询触发 PostgreSQL `text ~~ bytea` 报错的排查与最佳实践
数据库·postgresql
叶玳言2 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植