20230922

SGGL/FineUIPro.Web/HSSE/HiddenInspection/RiskAnalysisChart.aspx

@@ -52,17 +52,27 @@
             <f:TabStrip ID="TabStrip1" CssClass="f-tabstrip-theme-simple" Height="700px" ShowBorder="true"
                 TabPosition="Top" MarginBottom="5px" EnableTabCloseMenu="false" runat="server">
                 <Tabs>
-                    <f:Tab ID="Tab2" Title="按类别" BodyPadding="5px" Layout="Fit" IconFont="Bookmark"     runat="server"
+                    <f:Tab ID="Tab2" Title="按类别" BodyPadding="5px" Layout="Fit" IconFont="Bookmark"     runat="server"  
                         TitleToolTip="按类别统计">
                         <Items>
-                            <f:ContentPanel ShowHeader="false" runat="server" ID="cpAccidentTime" Margin="0 0 0 0"  >
+                             <f:Panel ID="Panel2" IsFluid="true" runat="server" Height="350px" ShowBorder="true" EnableCollapse="false"
+                                Layout="HBox"      ShowHeader="false"  >
+                                <Items>
+                                        <f:ContentPanel ShowHeader="false" runat="server" ID="cpAccidentTime" Margin="0 0 0 0"  BoxFlex="2" >
                                 
-                                    <div id="divAccidentTime" style="  height: 700px;">
+                                                <div id="divAccidentTime" style="  height: 700px; ">
                                    
-                                    </div>
+                                                </div> 
+                                        </f:ContentPanel>
+                                            <f:ContentPanel ShowHeader="false" runat="server" ID="ContentPanel1" Margin="0 0 0 0 " BoxFlex="1"  >
                                 
+                                                <div id="divPie" style="height: 700px;">
+                                   
+                                                </div>                                 
                               
-                            </f:ContentPanel>
+                                        </f:ContentPanel> 
+                                    </Items>
+                              </f:Panel>
                         </Items>
                     </f:Tab>
                 </Tabs>
@@ -92,7 +102,7 @@
             },
             xAxis: [
                 {
-                     axisLabel: { interval: 0 },
+                    axisLabel: { interval: 0 },
                     type: 'category',
                     data: xAxis
                 }
@@ -104,7 +114,7 @@
             ],
             series: series
         };
-        debugger;
+     
         if (xAxis.length > 5) {
             option.dataZoom = [{
                 type: 'slider',
@@ -126,8 +136,78 @@
         myChart.setOption(option);
     }
 
-    rendChart(<%=legend%>,<%=xAxis%>,<%=series%>) 
     
 
+    function pie(  title, xArr, data) {
+        debugger
+        // 基于准备好的dom，初始化echarts实例
+        var myChartpie = echarts.init(document.getElementById("divPie"))
+        // 指定图表的配置项和数据
+        var option = {
+            title: [{
+                text: title,
+                bottom: '0',
+                left: 'center',
+                textStyle: {
+                    color: '#fff',
+                    fontSize: 12,
+                    fontWeight: 300
+                }
+            }],
+            tooltip: {
+                trigger: 'item',
+                formatter: '{a} <br/>{b}: {c} ({d})'
+            },
+            legend: {
+                show: true,
+               
+                left: 'top',
+                top: 'top',
+                align: 'left',
+                data: xArr,
+                
+            },
+            color: ['#1D9A78', '#8BC145', '#36AFCE', '#1D6FA9'],
+            series: [
+                {
+                    name: title,
+                    type: 'pie',
+                    center: ['50%', '50%'],
+                    radius: ['40%', '70%'],
+                    avoidLabelOverlap: false,
+                    label: {
+                        show: true,
+                        textStyle: {
+                            color: '#333'
+                        },
+                        position: 'inside',
+                        formatter: function (data) { return data.percent.toFixed(0) + ""; }
+                    },
+                    labelLine: {
+                        show: false
+                    },
+                    data: data,
+                    itemStyle: {
+                        normal: {
+                            //opacity: 0.7,
+                            borderWidth: 3,
+                            borderColor: 'rgba(218,235,234, 1)'
+                        }
+                    }
+                }
+            ]
+        }
+
+        // 使用刚指定的配置项和数据显示图表。
+        myChartpie.setOption(option)
+    } 
+
+    $(document).ready(function () {
+        setTimeout(function () { 
+            pie('', <%=xPieAxis%>, <%=seriesPie%>);
+            rendChart(<%=legend%>,<%=xAxis%>,<%=series%>);
+            
+        }, 1000);
+    });
 </script>
 </html>