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>
相关推荐
做梦都在学习前端4 分钟前
发布一个monaco-editor 汉化包
前端·npm·vite
阿里云大数据AI技术9 分钟前
OpenSearch 视频 RAG 实践
数据库·人工智能·llm
石小石Orz20 分钟前
为什么推荐前端学习油猴脚本开发?
前端
珵煜ini23 分钟前
wd-button组件阻止事件冒泡的
前端
炒毛豆23 分钟前
vue3.4中的v-model的用法~
前端·vue.js
用户408128120038124 分钟前
大文件分片上传和断点续传
前端
极客悟道24 分钟前
颠覆传统虚拟化:在Docker容器中运行Windows系统的开源黑科技
前端·后端
前端康师傅26 分钟前
JavaScript 中你不知道的按位运算
前端·javascript
小桥风满袖28 分钟前
Three.js-硬要自学系列38之专项学习缓冲几何体
前端·css·three.js
Rubin9328 分钟前
埋点方案实现
前端