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>
相关推荐
强强学习1 小时前
HTML5 起步
前端·html·html5
念九_ysl3 小时前
前端循环全解析:JS/ES/TS 循环写法与实战示例
前端·javascript·typescript
余衫马4 小时前
CentOS7 离线安装 Postgresql 指南
数据库·postgresql
E___V___E4 小时前
MySQL数据库入门到大蛇尚硅谷宋红康老师笔记 高级篇 part 2
数据库·笔记·mysql
m0_748254885 小时前
mysql之如何获知版本
数据库·mysql
anyup_前端梦工厂5 小时前
了解几个 HTML 标签属性,实现优化页面加载性能
前端·html
前端御书房5 小时前
前端PDF转图片技术调研实战指南:从踩坑到高可用方案的深度解析
前端·javascript
2301_789169545 小时前
angular中使用animation.css实现翻转展示卡片正反两面效果
前端·css·angular.js
mikey棒棒棒5 小时前
Redis——优惠券秒杀问题(分布式id、一人多单超卖、乐悲锁、CAS、分布式锁、Redisson)
数据库·redis·lua·redisson·watchdog·cas·并发锁
风口上的猪20156 小时前
thingboard告警信息格式美化
java·服务器·前端