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>
相关推荐
Code哈哈笑1 分钟前
【图书管理系统】深度讲解:图书列表展示的后端实现、高内聚低耦合的应用、前端代码讲解
java·前端·数据库·spring boot·后端
jjkkzzzz24 分钟前
Linux下的c/c++开发之操作mysql数据库
linux·数据库·mysql·c/c++
callJJ25 分钟前
【金仓数据库征文】金仓数据库KingbaseES: 技术优势与实践指南(包含安装)
数据库·数据库平替用金仓·金仓数据库2025征文·金仓数据库
无名之逆25 分钟前
Hyperlane: Unleash the Power of Rust for High-Performance Web Services
java·开发语言·前端·后端·http·rust·web
数据潜水员34 分钟前
`待办事项css样式
前端·css·css3
_处女座程序员的日常44 分钟前
css媒体查询及css变量
前端·css·媒体
GanGuaGua3 小时前
CSS:盒子模型
开发语言·前端·css·html
UFIT5 小时前
数据库操作
数据库·sql·oracle
xin-cyy7 小时前
MySQL的索引和事务
数据库·mysql
消失在人海中8 小时前
把Excel数据文件导入到Oracle数据库
数据库·oracle·excel