live chart 仪表盘和饼图示例

zhangyuli1

于 2024-08-23 17:05:42 发布

阅读量217

点赞数 2

分类专栏： wpf 自定义控件集合文章标签：数据库前端

本文链接：https://blog.csdn.net/zhang8593/article/details/141470283

版权

wpf 自定义控件集合专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先上图：

下面是代码：

   <!--第一个卡片-->
   <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>