图表显示换成echart.blazor

wispro.sp.api/appsettings.json

@@ -11,8 +11,8 @@
     "DefaultConnect": "Data Source=(local);Initial Catalog=spDB;User ID=sa;Password=Lqftiu807005"
   },
 
-  "UpdateScheduleSetting": "00 01 09 * * ? *",
-  "InvalidDataScheduleSetting": "00 10 15 * * ? *",
+  "UpdateScheduleSetting": "00 01 09 1-8 * ? *",
+  "InvalidDataScheduleSetting": "00 10 15 1-8 * ? *",
 
   "ValidAudience": "StaffPerformance",
   "ValidIssuer": "http://localhost:39476",

wispro.sp.share/ChartData.cs

@@ -30,11 +30,11 @@ namespace wispro.sp.share
 
         public string BTitle { get; set; }
 
-        protected static List<string> GetColumns(List<ChartData> chartDatas)
+        public List<string> GetYear()
         {
             List<string> retColumns = new List<string>();
 
-            foreach (var cData in chartDatas)
+            foreach (var cData in Datas)
             {
                 if (!retColumns.Contains(cData.year))
                 {
@@ -47,10 +47,24 @@ namespace wispro.sp.share
             return retColumns;
         }
 
+        public List<string> GetSeries()
+        {
+            List<string> retColumns = new List<string>();
+            foreach (var cData in Datas)
+            {
+                if (!retColumns.Contains(cData.type))
+                {
+                    retColumns.Add(cData.type);
+                }
+            }
+
+            return retColumns;
+        }
+
         public DataTable GetTableData()
         {
             DataTable retTable = new DataTable();
-            List<string> Columns = GetColumns(Datas);
+            List<string> Columns = GetYear();
             retTable.Columns.Add(ATitle);
 
             foreach (string col in Columns)

wispro.sp.web/Pages/Report/AppealTrend.razor

@@ -38,7 +38,7 @@
             else
             {
             <div>
-                <AntDesign.Charts.Line Data="Datas.Datas" Config="config" @ref="@chart" />
+                @*<AntDesign.Charts.Line Data="Datas.Datas" Config="config" @ref="@chart" />*@
 
             <center>
 

wispro.sp.web/Pages/Report/AppealTrend.razor.cs

@@ -1,5 +1,5 @@
 using AntDesign;
-using AntDesign.Charts;
+
 using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
@@ -46,69 +46,12 @@ namespace wispro.sp.web.Pages.Report
             BTitle = "申诉月份"
         };
 
-        LineConfig config = new LineConfig
-        {
-            Title = new AntDesign.Charts.Title
-            {
-                Visible = true,
-                Text = "带数据点的折线图"
-            },
-            ForceFit = true,
-
-            Padding = "auto",
-            XField = "year",
-            YField = "value",
-            SeriesField = "type",
-            
-            Point = new LineViewConfigPoint
-            {
-                Visible = true
-            },
-            Label = new Label
-            {
-                Visible = true,
-                Type = "point"
-            },
-            Legend = new Legend
-            {
-                Visible = false,
-                Position = "bottom",
-            },
-           
-            XAxis = new ValueCatTimeAxis
-            {
-                Type="time",
-                //Visible= true,
-                //Label = new BaseAxisLabel()
-                //{
-                //    AutoRotate = true
-                //},
-                //Title = new BaseAxisTitle()
-                //{
-                //    Text = "绩效月份",
-                //    AutoRotate = true
-                //}
-            },
-            YAxis = new ValueAxis
-            {
-                Label = new BaseAxisLabel()
-                {
-                    AutoRotate=true
-                },
-                Title = new BaseAxisTitle()
-                {
-                    Visible=true,
-                    Text = "申诉数量"
-                }
-            }
-        };
-
-
+        
         [Inject] ReportService reportService { get; set; }
 
         [Inject] MessageService msgService { get; set; }
 
-        private AntDesign.Charts.IChartComponent chart;
+        
 
         private void OnTimeRangeChange(DateRangeChangedEventArgs args)
         {
@@ -138,10 +81,7 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config.Title.Text = Datas.Title;
-                config.XField = Datas.ATitle;
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config);
+                
                 StateHasChanged();
             }
             _noIconLoading = false;
@@ -153,10 +93,10 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config.Title.Text = Datas.Title;
+                //config.Title.Text = Datas.Title;
                 
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config);
+                //await chart.ChangeData(Datas.Datas);
+                //await chart.UpdateChart(config);
                 StateHasChanged();
             }
 

wispro.sp.web/Pages/Report/PieChart.razor

@@ -1,4 +1,7 @@
 @page  "/Report/SingleChart"
+@using Blazor.ECharts.Options
+@using Blazor.ECharts.Options.Enum
+@using P = Blazor.ECharts.Options.Series.Pie
 
 <PageContainer>
     <Breadcrumb>
@@ -24,7 +27,7 @@
             </SpaceItem>
             <SpaceItem>申诉开始时间</SpaceItem>
             <SpaceItem>
-                <RangePicker TValue="DateTime?[]" DefaultValue="new DateTime?[] { start, end }" OnChange="OnTimeRangeChange"/>
+                <RangePicker TValue="DateTime?[]" DefaultValue="new DateTime?[] { start, end }" OnChange="OnTimeRangeChange" />
             </SpaceItem>
             <SpaceItem><Button Icon="search" Loading="_noIconLoading" OnClick="OnButtonClick">开始统计</Button></SpaceItem>
         </Space>
@@ -37,33 +40,35 @@
             }
             else
             {
-            <div>
-                <Pie Data="Datas.Datas" Config="config4" @ref="@chart" />
-                <center>
-                    <table width="80%" border="1">
-                        <thead>
-                        <th>序号</th>
-                        <th>@Datas.ATitle</th>
-                        <th>数量</th>
-                        </thead>
-                        <tbody>
-                            @{
-                                int iIndex = 1;
-                                foreach (var cData in Datas.Datas)
-                                {
-                                    <tr>
-                                        <td style="text-align: center;">@iIndex</td>
-                                        <td>@cData.type</td>
-                                        <td style="text-align: center;">@cData.value</td>
-                                    </tr>
-                                    iIndex++;
+                <div>
+                    <Blazor.ECharts.Components.EPie Option="@Option1"  @ref="pieChart"/>
+
+                    @*<Pie Data="Datas.Datas" Config="config4" @ref="@chart" />*@
+                    <center>
+                        <table width="80%" border="1">
+                            <thead>
+                            <th>序号</th>
+                            <th>@Datas.ATitle</th>
+                            <th>数量</th>
+                            </thead>
+                            <tbody>
+                                @{
+                                    int iIndex = 1;
+                                    foreach (var cData in Datas.Datas)
+                                    {
+                                        <tr>
+                                            <td style="text-align: center;">@iIndex</td>
+                                            <td>@cData.type</td>
+                                            <td style="text-align: center;">@cData.value</td>
+                                        </tr>
+                                        iIndex++;
+                                    }
                                 }
-                            }
-                        </tbody>
-                        
-                    </table>
-                </center>
-            </div>
+                            </tbody>
+
+                        </table>
+                    </center>
+                </div>
             }
         </div>
     </ChildContent>

wispro.sp.web/Pages/Report/PieChart.razor.cs

@@ -1,12 +1,14 @@
 using AntDesign;
-using AntDesign.Charts;
+
+using Blazor.ECharts.Options;
+using Blazor.ECharts.Options.Enum;
 using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
-using System.Linq;
 using System.Text.Json;
 using System.Threading.Tasks;
 using wispro.sp.web.Services;
+using P = Blazor.ECharts.Options.Series.Pie;
 
 namespace wispro.sp.web.Pages.Report
 {
@@ -15,6 +17,7 @@ namespace wispro.sp.web.Pages.Report
         private int iType = 1;
         private DateTime? start = new DateTime(DateTime.Now.Year, DateTime.Now.Month, 1);
         private DateTime? end = DateTime.Now;
+        Blazor.ECharts.Components.EPie pieChart;
 
         internal class TJType
         {
@@ -29,45 +32,9 @@ namespace wispro.sp.web.Pages.Report
             new TJType { value = 2, Name = "部门申诉统计" },
             //new TJType { value = 3, Name = "申诉人每月申诉统计" },
         };
-        
-        private AntDesign.Charts.IChartComponent chart;
-        private PieConfig config4 = new PieConfig
-        {
-            ForceFit = true,
-            Title = new AntDesign.Charts.Title
-            {
-                Visible = true,
-                Text = "初始化标题",
-                AlignTo = "middle",
-                Style= new TextStyle()
-                {
-                    FontSize=20, 
-                    Stroke="#2a3b4c",
-                    Fill = "#AABBDD",
-                    Opacity= 10
-                }
-            },
-            Description = new Description
-            {
-                Visible = false,
-                Text = "When the type of the pie chart label is set to spider, the labels are divided into two groups, and they are displayed in alignment by pulling lines on both sides of the chart. Generally speaking, the labels of the spider layout are less likely to block each other."
-            },
-            Radius = 0.8,
-            InnerRadius =0.5,
-            AngleField = "value",
-            ColorField = "type",            
-            Label = new PieLabelConfig
-            {
-                Visible = true,
-                Type = "spider",//"inner",//"outer"//,
-                //Formatter= "() => $'{(percent * 100).toFixed(0)}%'",
-            },
-            Legend= new Legend
-            {
-                Visible=false,
-                Position= "bottom",
-            }
-        };
+
+        private EChartsOption<P.Pie> Option1;
+
 
         share.ChartDatas Datas=new share.ChartDatas() { 
             Title ="初始化标题",
@@ -97,16 +64,61 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config4.Title.Text = Datas.Title;
-                config4.XField = Datas.ATitle;
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config4);
+                Option1 = GetPieOption(Datas);
+                pieChart.Refresh();
                 StateHasChanged();
             }
 
             await base.OnInitializedAsync();
         }
 
+        private EChartsOption<P.Pie> GetPieOption(share.ChartDatas datas)
+        {
+            List<object> seriesData = new List<object>();
+
+            foreach(var data in datas.Datas)
+            {
+                seriesData.Add(new { Name = data.type, Value = data.value });
+            }
+
+            return Option1 = new()
+            {
+                Title= new Blazor.ECharts.Options.Title()
+                {
+                    Text = datas.Title ,
+                    Left = "center"
+                },
+                Tooltip = new()
+                {
+                    Trigger = TooltipTrigger.Item,
+                    Formatter = "{a} <br/>{b}: {c} ({d}%)"
+                },
+                Legend = new()
+                {
+                    Show = false,
+                    Orient = Orient.Vertical,
+                    Left = 10,
+                    Data = datas.GetSeries()
+                },
+                Series = new()
+                {
+                    new P.Pie()
+                    {
+                        Name = datas.Title,
+                        Radius = new[] { "50%", "70%" },
+                        AvoidLabelOverlap = false,
+                        //Label = new()
+                        //{
+                        //    Show = true,
+                        //    Position = LabelPosition.Inside,
+                        //},
+                        //LabelLine = new() { Show = true },
+                        Data = seriesData
+                    }
+                }
+            };
+        }
+
         private void OnTimeRangeChange(DateRangeChangedEventArgs args)
         {
             msgService.Info($"Selected Time: {JsonSerializer.Serialize(args.Dates)}");
@@ -132,10 +144,8 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config4.Title.Text = Datas.Title;
-                config4.XField = Datas.ATitle;
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config4);
+                Option1 = GetPieOption(Datas);
+                pieChart.Refresh();
                 StateHasChanged();
             }
             _noIconLoading = false;

wispro.sp.web/Pages/Report/StaffStaticsReport.razor

@@ -34,7 +34,7 @@
             else
             {
                 <div>
-                    <AntDesign.Charts.Line Data="Datas.Datas" Config="config" @ref="@chart" />
+                    @*<AntDesign.Charts.Line Data="Datas.Datas" Config="config" @ref="@chart" />*@
 
                     <center>
 

wispro.sp.web/Pages/Report/StaffStaticsReport.razor.cs

@@ -1,5 +1,5 @@
 using AntDesign;
-using AntDesign.Charts;
+
 using Microsoft.AspNetCore.Components;
 using System;
 using System.Collections.Generic;
@@ -49,70 +49,11 @@ namespace wispro.sp.web.Pages.Report
             BTitle = "申诉月份"
         };
 
-        LineConfig config = new LineConfig
-        {
-            Title = new AntDesign.Charts.Title
-            {
-                Visible = true,
-                Text = "带数据点的折线图"
-            },
-            ForceFit = true,
-
-            Padding = "auto",
-            XField = "year",
-            YField = "value",
-            SeriesField = "type",
-
-            Point = new LineViewConfigPoint
-            {
-                Visible = true
-            },
-            Label = new Label
-            {
-                Visible = true,
-                Type = "point"
-            },
-            Legend = new Legend
-            {
-                Visible = false,
-                Position = "bottom",
-            },
-
-            XAxis = new ValueCatTimeAxis
-            {
-                Type = "time",
-                //Visible= true,
-                //Label = new BaseAxisLabel()
-                //{
-                //    AutoRotate = true
-                //},
-                //Title = new BaseAxisTitle()
-                //{
-                //    Text = "绩效月份",
-                //    AutoRotate = true
-                //}
-            },
-            YAxis = new ValueAxis
-            {
-                Label = new BaseAxisLabel()
-                {
-                    AutoRotate = true
-                },
-                Title = new BaseAxisTitle()
-                {
-                    Visible = true,
-                    Text = "申诉数量"
-                }
-            }
-        };
-
-
+        
         [Inject] ReportService reportService { get; set; }
 
         [Inject] MessageService msgService { get; set; }
 
-        private AntDesign.Charts.IChartComponent chart;
-
         private void OnTimeRangeChange(DateRangeChangedEventArgs args)
         {
             msgService.Info($"Selected Time: {JsonSerializer.Serialize(args.Dates)}");
@@ -141,10 +82,10 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config.Title.Text = Datas.Title;
-                config.XField = Datas.ATitle;
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config);
+                //config.Title.Text = Datas.Title;
+                //config.XField = Datas.ATitle;
+                //await chart.ChangeData(Datas.Datas);
+                //await chart.UpdateChart(config);
                 StateHasChanged();
             }
             _noIconLoading = false;
@@ -156,10 +97,10 @@ namespace wispro.sp.web.Pages.Report
 
             if (Datas != null)
             {
-                config.Title.Text = Datas.Title;
+                //config.Title.Text = Datas.Title;
 
-                await chart.ChangeData(Datas.Datas);
-                await chart.UpdateChart(config);
+                //await chart.ChangeData(Datas.Datas);
+                //await chart.UpdateChart(config);
                 StateHasChanged();
             }
 

wispro.sp.web/Program.cs

@@ -45,6 +45,7 @@ namespace wispro.sp.web
             builder.Services.AddScoped<ReportService, ReportService>();
 
             builder.Services.AddBlazorContextMenu();
+            builder.Services.AddECharts();
 
             await builder.Build().RunAsync();
         }

wispro.sp.web/_Imports.razor

@@ -1,5 +1,4 @@
 @using AntDesign
-@using AntDesign.Charts
 @using AntDesign.ProLayout
 @using System.Net.Http
 @using System.Net.Http.Json

wispro.sp.web/wispro.sp.web.csproj

@@ -35,9 +35,9 @@
 
   <ItemGroup>
     <PackageReference Include="AntDesign" Version="0.10.3.1" />
-    <PackageReference Include="AntDesign.Charts" Version="0.2.2" />
     <PackageReference Include="AntDesign.ProLayout" Version="0.1.10" />
     <PackageReference Include="Blazor.ContextMenu" Version="1.10.1" />
+    <PackageReference Include="Blazor.ECharts" Version="0.7.5" />
     <PackageReference Include="Blazored.LocalStorage" Version="4.1.5" />
     <PackageReference Include="DynamicExpresso.Core" Version="2.9.3" />
     <PackageReference Include="Microsoft.AspNetCore.Authorization" Version="6.0.0" />

wispro.sp.web/wwwroot/index.html

@@ -2,16 +2,23 @@
 <html lang="en">
 
 <head>
-  <meta charset="UTF-8" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
-  <title>小美集团绩效系统</title>
-  <link rel="icon" href="favicon.ico" type="image/x-icon" />
-  <base href="/" />
-  <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
-  <link href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" rel="stylesheet" />
-  <link href="./css/site.css" rel="stylesheet" />
-  <link href="wispro.sp.web.styles.css" rel="stylesheet" />
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
+    <title>小美集团绩效系统</title>
+    <link rel="icon" href="favicon.ico" type="image/x-icon" />
+    <base href="/" />
+    <link href="_content/AntDesign/css/ant-design-blazor.css" rel="stylesheet" />
+    <link href="_content/AntDesign.ProLayout/css/ant-design-pro-layout-blazor.css" rel="stylesheet" />
+    <link href="./css/site.css" rel="stylesheet" />
+    <link href="wispro.sp.web.styles.css" rel="stylesheet" />
+    <script src="https://d3js.org/d3.v5.min.js"></script>
+    <script src="https://unpkg.com/@antv/g2plot@1.1.28/dist/g2plot.js"></script>
+    <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
+    <script src="https://unpkg.com/d3-graphviz@3.1.0/build/d3-graphviz.js"></script>
+    <script src="https://lib.baomitu.com/echarts/5.3.0/echarts.min.js"></script>
+    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=QKXcNR9CGYOaAvlDYlDgVCE5FmNYO3Z8"></script>
+    <script type="text/javascript" src="https://lib.baomitu.com/echarts/5.3.0/extension/bmap.min.js"></script>
 </head>
 
 <body>
@@ -222,13 +229,12 @@
     </div>
 
     <script src="_content/AntDesign/js/ant-design-blazor.js"></script>
-    <script src="https://unpkg.com/@antv/g2plot@1.1.28/dist/g2plot.js"></script>
-    <script src="_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
+    <script type="module" src="_content/Blazor.ECharts/core.js"></script>
     <script src="_framework/blazor.webassembly.js" autostart="false"></script>
     <!--<script src="script/helper.js"></script>-->
-    <script src="https://d3js.org/d3.v5.min.js"></script>
-    <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
-    <script src="https://unpkg.com/d3-graphviz@3.1.0/build/d3-graphviz.js"></script>
+    
+    
+    
 
     <script type="module">
         import { BrotliDecode } from './decode.js';