├── Demo.WASM ├── README.md ├── Pages │ ├── List │ │ ├── TableList │ │ │ ├── TableList.razor.less │ │ │ └── TableList.razor │ │ ├── Search │ │ │ ├── Applications │ │ │ │ ├── Components │ │ │ │ │ ├── TagSelect │ │ │ │ │ │ ├── TagSelectOption.razor │ │ │ │ │ │ ├── TagSelect.razor.less │ │ │ │ │ │ ├── TagSelect.razor │ │ │ │ │ │ ├── TagSelectOption.razor.cs │ │ │ │ │ │ └── TagSelect.razor.cs │ │ │ │ │ └── StandardFormRow │ │ │ │ │ │ ├── StandardFormRow.razor │ │ │ │ │ │ ├── StandardFormRow.razor.cs │ │ │ │ │ │ └── StandardFormRow.razor.less │ │ │ │ ├── Applications.razor.cs │ │ │ │ ├── utils │ │ │ │ │ └── utils.less │ │ │ │ └── Applications.razor.less │ │ │ ├── Articles │ │ │ │ ├── Articles.razor.less │ │ │ │ └── Articles.razor.cs │ │ │ ├── SearchList.razor │ │ │ ├── Projects │ │ │ │ └── Projects.razor.cs │ │ │ └── SearchList.razor.cs │ │ ├── CardList │ │ │ ├── CardList.razor.cs │ │ │ ├── utils │ │ │ │ └── utils.less │ │ │ └── CardList.razor.less │ │ └── BasicList │ │ │ ├── utils │ │ │ └── utils.less │ │ │ └── BasicList.razor.cs │ ├── Dashboard │ │ ├── Analysis │ │ │ ├── Components │ │ │ │ ├── Charts │ │ │ │ │ ├── Pie │ │ │ │ │ │ ├── Pie.razor │ │ │ │ │ │ └── Pie.razor.less │ │ │ │ │ ├── Gauge │ │ │ │ │ │ └── Gauge.razor │ │ │ │ │ ├── TagCloud │ │ │ │ │ │ ├── TagCloud.razor │ │ │ │ │ │ └── TagCloud.razor.less │ │ │ │ │ ├── WaterWave │ │ │ │ │ │ ├── WaterWave.razor │ │ │ │ │ │ └── WaterWave.razor.less │ │ │ │ │ ├── MiniArea │ │ │ │ │ │ ├── MiniArea.razor.cs │ │ │ │ │ │ └── MiniArea.razor │ │ │ │ │ ├── TimelineChart │ │ │ │ │ │ ├── TimelineChart.razor │ │ │ │ │ │ └── TimelineChart.razor.less │ │ │ │ │ ├── Bar │ │ │ │ │ │ └── Bar.razor │ │ │ │ │ ├── Field │ │ │ │ │ │ ├── Field.razor │ │ │ │ │ │ ├── Field.razor.cs │ │ │ │ │ │ └── Field.razor.less │ │ │ │ │ ├── index.less │ │ │ │ │ ├── ChartCard │ │ │ │ │ │ ├── ChartCard.razor.cs │ │ │ │ │ │ ├── ChartCard.razor │ │ │ │ │ │ └── ChartCard.razor.less │ │ │ │ │ ├── MiniProgress │ │ │ │ │ │ ├── MiniProgress.razor.less │ │ │ │ │ │ └── MiniProgress.razor │ │ │ │ │ └── MiniBar │ │ │ │ │ │ └── MiniBar.razor │ │ │ │ ├── NumberInfo │ │ │ │ │ ├── NumberInfo.razor │ │ │ │ │ └── NumberInfo.razor.less │ │ │ │ ├── PageLoading │ │ │ │ │ └── PageLoading.razor │ │ │ │ ├── SaleItem.cs │ │ │ │ ├── Trend │ │ │ │ │ ├── Trend.razor.cs │ │ │ │ │ ├── Trend.razor │ │ │ │ │ └── Trend.razor.less │ │ │ │ └── SalesCard.razor.cs │ │ │ └── Index.razor │ │ ├── Workplace │ │ │ ├── Components │ │ │ │ ├── Radar │ │ │ │ │ ├── AutoHeight.razor │ │ │ │ │ ├── Radar.razor.less │ │ │ │ │ └── Radar.razor │ │ │ │ └── EditableLinkGroup │ │ │ │ │ ├── EditableLinkGroup.razor │ │ │ │ │ ├── EditableLinkGroup.razor.less │ │ │ │ │ └── EditableLinkGroup.razor.cs │ │ │ └── Index.razor.cs │ │ └── Monitor │ │ │ ├── Components │ │ │ ├── Charts │ │ │ │ ├── TagCloud │ │ │ │ │ ├── TagCloud.razor │ │ │ │ │ └── TagCloud.razor.cs │ │ │ │ ├── WaterWave │ │ │ │ │ ├── WaterWave.razor │ │ │ │ │ └── WaterWave.razor.cs │ │ │ │ ├── Pie │ │ │ │ │ ├── Pie.razor │ │ │ │ │ └── Pie.razor.cs │ │ │ │ ├── Gauge │ │ │ │ │ ├── Gauge.razor │ │ │ │ │ └── Gauge.razor.cs │ │ │ │ └── Map │ │ │ │ │ ├── Map.razor │ │ │ │ │ └── MiniArea.razor │ │ │ └── ActiveChart │ │ │ │ ├── ActiveChart.razor.less │ │ │ │ └── ActiveChart.razor │ │ │ └── Index.razor.less │ ├── User │ │ ├── RegisterResult │ │ │ ├── RegisterResult.razor │ │ │ └── RegisterResult.razor.less │ │ ├── Register │ │ │ ├── Register.razor.cs │ │ │ ├── Register.razor.less │ │ │ └── Register.razor │ │ └── Login │ │ │ ├── Login.razor.cs │ │ │ └── Login.razor.less │ ├── Profile │ │ ├── Basic │ │ │ ├── Basic.razor.less │ │ │ ├── Basic.razor.cs │ │ │ └── Basic.razor │ │ └── Advanced │ │ │ ├── Advanced.razor.cs │ │ │ └── Advanced.razor.less │ ├── Form │ │ ├── AdvancedForm │ │ │ ├── AdvancedForm.razor.cs │ │ │ └── AdvancedForm.razor.less │ │ ├── BasicForm │ │ │ ├── BasicForm.razor.cs │ │ │ └── BasicForm.razor.less │ │ └── StepForm │ │ │ ├── Components │ │ │ ├── Step3 │ │ │ │ ├── Step3.razor.cs │ │ │ │ ├── Step3.razor │ │ │ │ └── Step3.razor.less │ │ │ ├── Step1 │ │ │ │ ├── Step1.razor.cs │ │ │ │ ├── Step1.razor.less │ │ │ │ └── Step1.razor │ │ │ └── Step2 │ │ │ │ ├── Step2.razor.cs │ │ │ │ ├── Step2.razor │ │ │ │ └── Step2.razor.less │ │ │ ├── StepForm.razor.cs │ │ │ ├── StepForm.razor │ │ │ └── StepForm.razor.less │ ├── Line │ │ ├── Line9.razor │ │ └── Line10.razor │ ├── Bar │ │ └── Bar2.razor │ └── Radar │ │ └── Radar1.razor ├── wwwroot │ ├── favicon.ico │ ├── appsettings.json │ ├── data │ │ ├── current_user.json │ │ ├── advanced.json │ │ ├── basic.json │ │ ├── notice.json │ │ ├── activities.json │ │ └── notices.json │ └── pro_icon.svg ├── Models │ ├── ChartDataItem.cs │ ├── ActivityGroup.cs │ ├── ActivityUser.cs │ ├── OfflineDataItem.cs │ ├── ActivityProject.cs │ ├── BasicProfileDataType.cs │ ├── OfflineChartDataItem.cs │ ├── RadarDataItem.cs │ ├── NoticeItem.cs │ ├── AdvancedProfileData.cs │ ├── SearchDataItem.cs │ ├── BasicGood.cs │ ├── BasicProgress.cs │ ├── AdvancedOperation.cs │ ├── ActivitiesType.cs │ ├── ListFormModel.cs │ ├── NoticeType.cs │ ├── LoginParamsType.cs │ ├── ChartData.cs │ ├── CurrentUser.cs │ ├── ListItemDataType.cs │ └── FormModel.cs ├── App.razor ├── _Imports.razor ├── Properties │ └── launchSettings.json ├── gulpfile.js ├── Services │ ├── UserService.cs │ ├── AccountService.cs │ ├── ProfileService.cs │ ├── ChartService.cs │ └── ProjectService.cs ├── Layouts │ ├── BasicLayout.razor │ ├── UserLayout.razor │ └── UserLayout.razor.less ├── Utils │ └── LongToDateTimeConverter.cs ├── package.json ├── styles │ └── global.less ├── Program.cs ├── Components │ └── GlobalHeader │ │ └── RightContent.razor ├── Extensions │ └── DateTimeExtension.cs └── Demo.WASM.csproj ├── ChangeLog.md ├── Rakor.Blazor.ECharts ├── Component │ ├── ECLine.razor │ ├── ECPie.razor │ ├── EMap.razor │ ├── ECBar.razor │ ├── ECRadar.razor │ ├── ECandlestick.razor │ └── Base │ │ ├── Bar.cs │ │ ├── Map.cs │ │ ├── Pie.cs │ │ ├── Radar.cs │ │ ├── Line.cs │ │ └── Candlestick.cs ├── Option │ ├── Polar.cs │ ├── SplitArea.cs │ ├── DataSet.cs │ ├── RadiusAxis.cs │ ├── Series │ │ ├── Encode.cs │ │ ├── Emphasis.cs │ │ ├── Pie │ │ │ ├── LabelLine.cs │ │ │ └── Pie.cs │ │ ├── SeriesData.cs │ │ ├── Radar │ │ │ └── Radar.cs │ │ ├── Candlestick │ │ │ └── Candlestick.cs │ │ ├── Line │ │ │ └── MarkArea.cs │ │ ├── Bar │ │ │ └── Bar.cs │ │ ├── Map │ │ │ └── Map.cs │ │ ├── ItemStyle.cs │ │ ├── MarkPoint.cs │ │ └── MarkLine.cs │ ├── LineStyle.cs │ ├── SplitLine.cs │ ├── AngleAxis.cs │ ├── HandleStyle.cs │ ├── Brush.cs │ ├── SeriesBase.cs │ ├── AreaStyle.cs │ ├── TooltipAxisPointer.cs │ ├── Color.cs │ ├── Tooltip.cs │ └── Radar.cs ├── _Imports.razor ├── CusEnumConverter.cs ├── Properties │ └── launchSettings.json └── Rakor.Blazor.ECharts.csproj ├── Rakor.Blazor.ECharts.Demo ├── App.razor ├── wwwroot │ ├── favicon.ico │ ├── images │ │ └── chart-icon.png │ └── css │ │ └── base.css ├── .config │ └── dotnet-tools.json ├── appsettings.json ├── appsettings.Development.json ├── Dockerfile ├── Shared │ └── MainLayout.razor ├── _Imports.razor ├── MenuModel.cs ├── Program.cs ├── Pages │ ├── Error.razor │ ├── _Host.cshtml │ ├── Line │ │ ├── Line9.razor │ │ └── Line10.razor │ ├── Candlestick │ │ └── StockData.cs │ ├── Bar │ │ └── Bar2.razor │ └── Radar │ │ └── Radar1.razor ├── Properties │ └── launchSettings.json ├── Demo.csproj └── Startup.cs ├── .gitattributes ├── .github └── workflows │ └── dotnetcore.yml ├── LICENSE └── README.md /Demo.WASM/README.md: -------------------------------------------------------------------------------- 1 | # Demo.WASM -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/TableList/TableList.razor.less: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Pie/Pie.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Gauge/Gauge.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/NumberInfo/NumberInfo.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/TagCloud/TagCloud.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/WaterWave/WaterWave.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/PageLoading/PageLoading.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/MiniArea/MiniArea.razor.cs: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/TimelineChart/TimelineChart.razor: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /ChangeLog.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | ## [0.0.1] - 2019-12-27 3 | 4 | ### 添加 5 | - 部分公共配置项 6 | - 折线图基本功能 7 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Bar/Bar.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis.Bar -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/Radar/AutoHeight.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Workplace -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caopengfei/BlazorECharts/HEAD/Demo.WASM/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/TagCloud/TagCloud.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/ECLine.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Line 2 | 3 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/ECPie.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Pie 2 | 3 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/EMap.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Map 2 | 3 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/ECBar.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Bar 2 | 3 |
4 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/ECRadar.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Radar 2 | 3 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/App.razor: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caopengfei/BlazorECharts/HEAD/Rakor.Blazor.ECharts.Demo/App.razor -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/ECandlestick.razor: -------------------------------------------------------------------------------- 1 | @inherits Base.Candlestick 2 | 3 |
-------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/WaterWave/WaterWave.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor 2 | 3 |
-------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Pie/Pie.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor 2 | 3 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caopengfei/BlazorECharts/HEAD/Rakor.Blazor.ECharts.Demo/wwwroot/favicon.ico -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/TableList/TableList.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.List 2 | @page "/list/table-list" 3 | 4 |

5 | TODO: Next Version 6 |

-------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | *.razor linguist-language=C# 2 | *.js linguist-language=C# 3 | *.css linguist-language=C# 4 | *.html linguist-language=C# 5 | *.cs linguist-language=C# -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/wwwroot/images/chart-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/caopengfei/BlazorECharts/HEAD/Rakor.Blazor.ECharts.Demo/wwwroot/images/chart-icon.png -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/TagCloud/TagCloud.razor.less: -------------------------------------------------------------------------------- 1 | .tagCloud { 2 | overflow: hidden; 3 | canvas { 4 | transform-origin: 0 0; 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/RegisterResult/RegisterResult.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.User 2 | @page "/user/register-result" 3 | 4 |

RegisterResult

5 | 6 | @code { 7 | 8 | } 9 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Bar.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Bar : ComponentBase 4 | { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Map.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Map : ComponentBase 4 | { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Pie.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Pie : ComponentBase 4 | { 5 | 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Gauge/Gauge.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor 2 | @inherits AntDomComponentBase 3 | 4 |
5 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Radar.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Radar : ComponentBase 4 | { 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Line.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Line: ComponentBase 4 | { 5 | 6 | } 7 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/ChartDataItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ChartDataItem 4 | { 5 | public string X { get; set; } 6 | public int Y { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/ActivityGroup.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ActivityGroup 4 | { 5 | public string Name { get; set; } 6 | public string Link { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/ActivityUser.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ActivityUser 4 | { 5 | public string Name { get; set; } 6 | public string Avatar { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/OfflineDataItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class OfflineDataItem 4 | { 5 | public string Name { get; set; } 6 | public float Cvr { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/TimelineChart/TimelineChart.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .timelineChart { 4 | background: @component-background; 5 | } 6 | -------------------------------------------------------------------------------- /Demo.WASM/Models/ActivityProject.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ActivityProject 4 | { 5 | public string Name { get; set; } 6 | public string Link { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Profile/Basic/Basic.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .title { 4 | margin-bottom: 16px; 5 | color: @heading-color; 6 | font-weight: 500; 7 | font-size: 16px; 8 | } 9 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Component/Base/Candlestick.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Component.Base 2 | { 3 | public class Candlestick : ComponentBase//Option.Series.Candlestick.Candlestick 4 | { 5 | } 6 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Map/Map.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor 2 | @inherits AntDomComponentBase 3 | 4 |
5 | 6 | @code 7 | { 8 | 9 | } 10 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Polar.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | public class Polar 6 | { 7 | public List Center { set; get; } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/TagSelect/TagSelectOption.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.List 2 | @inherits AntDomComponentBase 3 | 4 | @ChildContent -------------------------------------------------------------------------------- /Demo.WASM/Models/BasicProfileDataType.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class BasicProfileDataType 4 | { 5 | public BasicGood[] BasicGoods { get; set; } 6 | public BasicProgress[] BasicProgress { get; set; } 7 | } 8 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/OfflineChartDataItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class OfflineChartDataItem 4 | { 5 | public long X { get; set; } 6 | public int Y1 { get; set; } 7 | public int Y2 { get; set; } 8 | } 9 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/RadarDataItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class RadarDataItem 4 | { 5 | public string Name { get; set; } 6 | public string Label { get; set; } 7 | public int Value { get; set; } 8 | } 9 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/.config/dotnet-tools.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 1, 3 | "isRoot": true, 4 | "tools": { 5 | "dotnet-ef": { 6 | "version": "3.1.0", 7 | "commands": [ 8 | "dotnet-ef" 9 | ] 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/AdvancedForm/AdvancedForm.razor.cs: -------------------------------------------------------------------------------- 1 | using Demo.WASM.Models; 2 | 3 | namespace Demo.WASM.Pages.Form 4 | { 5 | public partial class AdvancedForm 6 | { 7 | private readonly AdvancedFormModel _model = new AdvancedFormModel(); 8 | } 9 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Field/Field.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis 2 | @inherits AntDomComponentBase 3 | 4 |
5 | @Label 6 | @Value 7 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "Logging": { 3 | "LogLevel": { 4 | "Default": "Information", 5 | "Microsoft": "Warning", 6 | "Microsoft.Hosting.Lifetime": "Information" 7 | } 8 | }, 9 | "AllowedHosts": "*" 10 | } 11 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/appsettings.Development.json: -------------------------------------------------------------------------------- 1 | { 2 | "DetailedErrors": true, 3 | "Logging": { 4 | "LogLevel": { 5 | "Default": "Information", 6 | "Microsoft": "Warning", 7 | "Microsoft.Hosting.Lifetime": "Information" 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/SplitArea.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | namespace Rakor.Blazor.ECharts.Option 3 | { 4 | public class SplitArea 5 | { 6 | /// 7 | /// 是否显示分隔线。 8 | /// 9 | public bool? Show { set; get; } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Demo.WASM/Models/NoticeItem.cs: -------------------------------------------------------------------------------- 1 | using AntDesign.Pro.Layout; 2 | 3 | namespace Demo.WASM.Models 4 | { 5 | public class NoticeItem : NoticeIconData 6 | { 7 | public string Id { get; set; } 8 | public string Type { get; set; } 9 | public string Status { get; set; } 10 | } 11 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/DataSet.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | 6 | namespace Rakor.Blazor.ECharts.Option 7 | { 8 | public class DataSet 9 | { 10 | public dynamic Source { get; set; } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.JSInterop 7 | 8 | @using Rakor.Blazor.ECharts.Component 9 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/BasicForm/BasicForm.razor.cs: -------------------------------------------------------------------------------- 1 | using Demo.WASM.Models; 2 | 3 | namespace Demo.WASM.Pages.Form 4 | { 5 | public partial class BasicForm 6 | { 7 | private readonly BasicFormModel _model = new BasicFormModel(); 8 | 9 | private void HandleSubmit() 10 | { 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step3/Step3.razor.cs: -------------------------------------------------------------------------------- 1 | using Demo.WASM.Models; 2 | 3 | namespace Demo.WASM.Pages.Form 4 | { 5 | public partial class Step3 6 | { 7 | private readonly StepFormModel _model = new StepFormModel(); 8 | 9 | public void OnFinish() 10 | { 11 | } 12 | } 13 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/RadiusAxis.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option 2 | { 3 | /// 4 | /// 极坐标系的径向轴。 5 | /// 6 | public class RadiusAxis 7 | { 8 | /// 9 | /// 坐标轴刻度最小值。 10 | /// 11 | public object Min { set; get; } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Demo.WASM/Models/AdvancedProfileData.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class AdvancedProfileData 4 | { 5 | public AdvancedOperation[] AdvancedOperation1 { get; set; } 6 | public AdvancedOperation[] AdvancedOperation2 { get; set; } 7 | public AdvancedOperation[] AdvancedOperation3 { get; set; } 8 | } 9 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/SearchDataItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class SearchDataItem 4 | { 5 | public int Index { get; set; } 6 | public string Keywod { get; set; } 7 | public int Count { get; set; } 8 | public int Range { get; set; } 9 | public int Status { get; set; } 10 | } 11 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Encode.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Collections.Generic; 3 | using System.Linq; 4 | using System.Threading.Tasks; 5 | 6 | namespace Rakor.Blazor.ECharts.Option.Series 7 | { 8 | public class Encode 9 | { 10 | public string X { get; set; } 11 | public string Y { get; set; } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Dockerfile: -------------------------------------------------------------------------------- 1 | ############################################################ 2 | # Dockerfile to build Rakor.Blazor.ECharts Demo images 3 | ############################################################ 4 | FROM mcr.microsoft.com/dotnet/core/aspnet:3.1-alpine 5 | MAINTAINER Rakor.Cao 6 | COPY . /demo 7 | WORKDIR /demo 8 | EXPOSE 88 9 | CMD ["dotnet", "Demo.dll"] -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Pie/Pie.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Monitor 4 | { 5 | public partial class Pie 6 | { 7 | [Parameter] 8 | public bool? Animate { get; set; } 9 | 10 | [Parameter] 11 | public int? LineWidth { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Field/Field.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Analysis 4 | { 5 | public partial class Field 6 | { 7 | [Parameter] 8 | public string Label { get; set; } 9 | 10 | [Parameter] 11 | public string Value { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/SaleItem.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Pages.Dashboard.Analysis 2 | { 3 | public partial class SalesCard 4 | { 5 | public class SaleItem 6 | { 7 | public int Id { get; set; } 8 | public string Title { get; set; } 9 | public string Total { get; set; } 10 | } 11 | } 12 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Trend/Trend.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Analysis 4 | { 5 | public partial class Trend 6 | { 7 | [Parameter] 8 | public RenderFragment ChildContent { get; set; } 9 | 10 | [Parameter] 11 | public string Flag { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/TagCloud/TagCloud.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Monitor 4 | { 5 | public partial class TagCloud 6 | { 7 | [Parameter] 8 | public object[] Data { get; set; } 9 | 10 | [Parameter] 11 | public int? Height { get; set; } 12 | } 13 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Emphasis.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option.Series 2 | { 3 | public class Emphasis 4 | { 5 | /// 6 | /// 7 | /// 8 | public bool? Show { set; get; } 9 | 10 | public TextStyle TextStyle { set; get; } 11 | public ItemStyle ItemStyle { set; get; } 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Demo.WASM/Models/BasicGood.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class BasicGood 4 | { 5 | public string Id { get; set; } 6 | public string Name { get; set; } 7 | public string Barcode { get; set; } 8 | public string Price { get; set; } 9 | public string Num { get; set; } 10 | public string Amount { get; set; } 11 | } 12 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Pie/LabelLine.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option.Series.Pie 2 | { 3 | /// 4 | /// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。 5 | /// 6 | public class LabelLine 7 | { 8 | /// 9 | /// 10 | /// 11 | public bool? Show { set; get; } 12 | 13 | 14 | } 15 | } -------------------------------------------------------------------------------- /Demo.WASM/App.razor: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

Sorry, there's nothing at this address.

8 | 9 | 10 | -------------------------------------------------------------------------------- /Demo.WASM/Models/BasicProgress.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class BasicProgress 4 | { 5 | public string Key { get; set; } 6 | public string Time { get; set; } 7 | public string Rate { get; set; } 8 | public string Status { get; set; } 9 | public string Operator { get; set; } 10 | public string Cost { get; set; } 11 | } 12 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/EditableLinkGroup/EditableLinkGroup.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Workplace 2 | 3 |
4 | @foreach (var link in Links) 5 | { 6 | @link.Title 7 | } 8 | 9 | 12 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/SeriesData.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option.Series 2 | { 3 | public class SeriesData 4 | { 5 | public string Name { set; get; } 6 | public object Value { set; get; } 7 | public Tooltip Tooltip { set; get; } 8 | public ItemStyle ItemStyle { set; get; } 9 | public Label Label { set; get; } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /Demo.WASM/Models/AdvancedOperation.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class AdvancedOperation 4 | { 5 | public string Key { get; set; } 6 | public string Type { get; set; } 7 | public string Name { get; set; } 8 | public string Status { get; set; } 9 | public string UpdatedAt { get; set; } 10 | public string Memo { get; set; } 11 | } 12 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Trend/Trend.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis 2 | @inherits AntDomComponentBase 3 | 4 |
5 | @ChildContent 6 | 7 | @if(Flag == "up"){ 8 | 9 | } else { 10 | 11 | } 12 | 13 |
-------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Shared/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 |
5 |
6 | 7 |
8 |
9 | @Body 10 |
11 |
12 |
-------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Field/Field.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .field { 4 | margin: 0; 5 | overflow: hidden; 6 | white-space: nowrap; 7 | text-overflow: ellipsis; 8 | .label, 9 | .number { 10 | font-size: @font-size-base; 11 | line-height: 22px; 12 | } 13 | .number { 14 | margin-left: 8px; 15 | color: @heading-color; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/StandardFormRow/StandardFormRow.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.List 2 | @inherits AntDomComponentBase 3 | 4 |
5 | @if (!string.IsNullOrEmpty(Title)) 6 | { 7 |
8 | @Title 9 |
10 | } 11 |
12 | @ChildContent 13 |
14 |
15 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/index.less: -------------------------------------------------------------------------------- 1 | .miniChart { 2 | position: relative; 3 | width: 100%; 4 | .chartContent { 5 | position: absolute; 6 | bottom: -28px; 7 | width: 100%; 8 | > div { 9 | margin: 0 -5px; 10 | overflow: hidden; 11 | } 12 | } 13 | .chartLoading { 14 | position: absolute; 15 | top: 16px; 16 | left: 50%; 17 | margin-left: -7px; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/EditableLinkGroup/EditableLinkGroup.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .linkGroup { 4 | padding: 20px 0 8px 24px; 5 | font-size: 0; 6 | & > a { 7 | display: inline-block; 8 | width: 25%; 9 | margin-bottom: 13px; 10 | color: @text-color; 11 | font-size: @font-size-base; 12 | &:hover { 13 | color: @primary-color; 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Demo.WASM/Models/ActivitiesType.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | namespace Demo.WASM.Models 4 | { 5 | public class ActivitiesType 6 | { 7 | public string Id { get; set; } 8 | public DateTime UpdatedAt { get; set; } 9 | public ActivityUser User { get; set; } 10 | public ActivityGroup Group { get; set; } 11 | public ActivityProject Project { get; set; } 12 | public string Template { get; set; } 13 | } 14 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/WaterWave/WaterWave.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Monitor 4 | { 5 | public partial class WaterWave 6 | { 7 | [Parameter] 8 | public string Title { get; set; } 9 | 10 | [Parameter] 11 | public int Percent { get; set; } 12 | 13 | [Parameter] 14 | public int? Height { get; set; } 15 | } 16 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using Microsoft.AspNetCore.Authorization 3 | @using Microsoft.AspNetCore.Components.Authorization 4 | @using Microsoft.AspNetCore.Components.Forms 5 | @using Microsoft.AspNetCore.Components.Routing 6 | @using Microsoft.AspNetCore.Components.Web 7 | @using Microsoft.JSInterop 8 | @using Demo 9 | @using Demo.Pages 10 | @using Demo.Shared 11 | @using Element 12 | @using Rakor.Blazor.ECharts.Component -------------------------------------------------------------------------------- /Demo.WASM/Models/ListFormModel.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ListFormModel 4 | { 5 | public string Owner { get; set; } = "wzj"; 6 | 7 | public string ActiveUser { get; set; } 8 | 9 | public string Satisfaction { get; set; } 10 | } 11 | 12 | public class BasicListFormModel 13 | { 14 | public string Status { get; set; } = "all"; 15 | public string SearchKeyword { get; set; } 16 | } 17 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Index.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .mapChart { 4 | height: 452px; 5 | padding-top: 24px; 6 | img { 7 | display: inline-block; 8 | max-width: 100%; 9 | max-height: 437px; 10 | } 11 | } 12 | 13 | .pieCard :global(.pie-stat) { 14 | font-size: 24px !important; 15 | } 16 | 17 | @media screen and (max-width: @screen-lg) { 18 | .mapChart { 19 | height: auto; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/LineStyle.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | public class LineStyle : AreaStyle 6 | { 7 | 8 | /// 9 | /// 线宽。 10 | /// 11 | public double? Width { set; get; } 12 | 13 | /// 14 | /// 线的类型。 15 | /// 16 | public LineStyleType? Type { set; get; } 17 | 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step1/Step1.razor.cs: -------------------------------------------------------------------------------- 1 | using Demo.WASM.Models; 2 | using Microsoft.AspNetCore.Components; 3 | 4 | namespace Demo.WASM.Pages.Form 5 | { 6 | public partial class Step1 7 | { 8 | private readonly StepFormModel _model = new StepFormModel(); 9 | 10 | [CascadingParameter] public StepForm StepForm { get; set; } 11 | 12 | public void OnValidateForm() 13 | { 14 | StepForm.Next(); 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /Demo.WASM/Models/NoticeType.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class NoticeType 4 | { 5 | public string Id { get; set; } 6 | public string Title { get; set; } 7 | public string Logo { get; set; } 8 | public string Description { get; set; } 9 | public string UpdatedAt { get; set; } 10 | public string Member { get; set; } 11 | public string Href { get; set; } 12 | public string MemberLink { get; set; } 13 | } 14 | } -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "ProSettings": { 3 | "NavTheme": "dark", 4 | "Layout": "side", 5 | "ContentWidth": "Fluid", 6 | "FixedHeader": false, 7 | "FixSiderbar": true, 8 | "Title": "Ant Design Pro", 9 | "PrimaryColor": "daybreak", 10 | "ColorWeak": false, 11 | "SplitMenus": false, 12 | "HeaderRender": true, 13 | "FooterRender": true, 14 | "MenuRender": true, 15 | "MenuHeaderRender": true, 16 | "HeaderHeight": 48 17 | } 18 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/EditableLinkGroup/EditableLinkGroup.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Workplace 4 | { 5 | public class EditableLink 6 | { 7 | public string Title { get; set; } 8 | public string Href { get; set; } 9 | public string Id { get; set; } 10 | } 11 | 12 | public partial class EditableLinkGroup 13 | { 14 | [Parameter] public EditableLink[] Links { get; set; } 15 | } 16 | } -------------------------------------------------------------------------------- /Demo.WASM/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using AntDesign 2 | @using AntDesign.Charts 3 | @using AntDesign.Pro.Layout 4 | @using System.Net.Http 5 | @using System.Net.Http.Json 6 | @using Microsoft.AspNetCore.Components.Forms 7 | @using Microsoft.AspNetCore.Components.Routing 8 | @using Microsoft.AspNetCore.Components.Web 9 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 10 | @using Microsoft.JSInterop 11 | @using Demo.WASM 12 | @using Demo.WASM.Models 13 | @using Demo.WASM.Services 14 | @using Rakor.Blazor.ECharts.Component 15 | -------------------------------------------------------------------------------- /Demo.WASM/Models/LoginParamsType.cs: -------------------------------------------------------------------------------- 1 | using System.ComponentModel.DataAnnotations; 2 | 3 | namespace Demo.WASM.Models 4 | { 5 | public class LoginParamsType 6 | { 7 | [Required] public string UserName { get; set; } 8 | 9 | [Required] public string Password { get; set; } 10 | 11 | public string Mobile { get; set; } 12 | 13 | public string Captcha { get; set; } 14 | 15 | public string LoginType { get; set; } 16 | 17 | public bool AutoLogin { get; set; } 18 | } 19 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/MenuModel.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Demo 4 | { 5 | public class MenuModel 6 | { 7 | public string Title { get; set; } 8 | public string Name { get; set; } 9 | public string Label { get; set; } 10 | public bool Flex { get; set; } = true; 11 | public string Route { get; set; } 12 | public List Children { get; set; } = new List(); 13 | public string Icon { get; set; } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/RegisterResult/RegisterResult.razor.less: -------------------------------------------------------------------------------- 1 | .registerResult { 2 | width: 800px; 3 | min-height: 400px; 4 | margin: auto; 5 | padding: 80px; 6 | background: none; 7 | :global { 8 | .anticon { 9 | font-size: 64px; 10 | } 11 | } 12 | .title { 13 | margin-top: 32px; 14 | font-size: 20px; 15 | line-height: 28px; 16 | } 17 | .actions { 18 | margin-top: 40px; 19 | a + a { 20 | margin-left: 8px; 21 | } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Radar/Radar.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series.Radar 4 | { 5 | public class Radar : SeriesBase 6 | { 7 | public Radar() : base("radar") { } 8 | 9 | public List Data { set; get; } 10 | 11 | public LineStyle LineStyle { set; get; } 12 | 13 | public object Symbol { set; get; } 14 | 15 | public ItemStyle ItemStyle { set; get; } 16 | 17 | public AreaStyle AreaStyle { set; get; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/StepForm.razor.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Pages.Form 2 | { 3 | public partial class StepForm 4 | { 5 | private int _current; 6 | 7 | public void Next() 8 | { 9 | // todo: Not re-rendered 10 | _current += 1; 11 | StateHasChanged(); 12 | } 13 | 14 | public void Prev() 15 | { 16 | // todo: Not re-rendered 17 | if (_current <= 0) return; 18 | _current -= 1; 19 | StateHasChanged(); 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/CusEnumConverter.cs: -------------------------------------------------------------------------------- 1 | using Newtonsoft.Json; 2 | using Newtonsoft.Json.Converters; 3 | 4 | namespace Rakor.Blazor.ECharts 5 | { 6 | public class CustomEnumConverter : StringEnumConverter 7 | { 8 | public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) 9 | { 10 | if (value == null) 11 | { 12 | writer.WriteNull(); 13 | return; 14 | } 15 | writer.WriteValue(value.ToString().ToLower(1)); 16 | } 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Candlestick/Candlestick.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series.Candlestick 4 | { 5 | public class Candlestick : SeriesBase 6 | { 7 | public Candlestick() : base("candlestick") { } 8 | 9 | public ItemStyle ItemStyle { set; get; } 10 | 11 | public Tooltip Tooltip { set; get; } 12 | 13 | public MarkLine MarkLine { set; get; } 14 | 15 | public MarkPoint MarkPoint { set; get; } 16 | 17 | public object Data { set; get; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step2/Step2.razor.cs: -------------------------------------------------------------------------------- 1 | using Demo.WASM.Models; 2 | using Microsoft.AspNetCore.Components; 3 | 4 | namespace Demo.WASM.Pages.Form 5 | { 6 | public partial class Step2 7 | { 8 | private readonly StepFormModel _model = new StepFormModel(); 9 | 10 | [CascadingParameter] public StepForm StepForm { get; set; } 11 | 12 | public void OnValidateForm() 13 | { 14 | StepForm.Next(); 15 | } 16 | 17 | public void Preview() 18 | { 19 | StepForm.Prev(); 20 | } 21 | } 22 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Line/MarkArea.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series.Line 4 | { 5 | public class MarkArea 6 | { 7 | /// 8 | /// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 9 | /// 10 | public bool? Silent { set; get; } 11 | 12 | public List> Data { set; get; } 13 | } 14 | public class MarkAreaData 15 | { 16 | /// 17 | /// 文档中没有，示例中有？？？ 18 | /// 19 | public string XAxis { set; get; } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/current_user.json: -------------------------------------------------------------------------------- 1 | {"name":"Serati Ma","avatar":"https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png","userid":"00000001","email":"antdesign@alipay.com","signature":"海纳百川，有容乃大","title":"交互专家","group":"蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED","tags":[{"key":"0","label":"很有想法的"},{"key":"1","label":"专注设计"},{"key":"2","label":"辣~"},{"key":"3","label":"大长腿"},{"key":"4","label":"川妹子"},{"key":"5","label":"海纳百川"}],"notifyCount":12,"unreadCount":11,"country":"China","geographic":{"province":{"label":"浙江省","key":"330000"},"city":{"label":"杭州市","key":"330100"}},"address":"西湖区工专路 77 号","phone":"0752-268888888"} -------------------------------------------------------------------------------- /Demo.WASM/Pages/Profile/Basic/Basic.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Threading.Tasks; 2 | using Demo.WASM.Models; 3 | using Demo.WASM.Services; 4 | using Microsoft.AspNetCore.Components; 5 | 6 | namespace Demo.WASM.Pages.Profile 7 | { 8 | public partial class Basic 9 | { 10 | private BasicProfileDataType _data = new BasicProfileDataType(); 11 | 12 | [Inject] protected IProfileService ProfileService { get; set; } 13 | 14 | protected override async Task OnInitializedAsync() 15 | { 16 | await base.OnInitializedAsync(); 17 | _data = await ProfileService.GetBasicAsync(); 18 | } 19 | } 20 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/SplitLine.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option 2 | { 3 | /// 4 | /// 坐标轴在 grid 区域中的分隔线。 5 | /// 6 | public class SplitLine 7 | { 8 | /// 9 | /// 是否显示分隔线。默认数值轴显示，类目轴不显示。 10 | /// 11 | public bool? Show { set; get; } 12 | 13 | /// 14 | /// 坐标轴分隔线的显示间隔，在类目轴中有效。默认同 axisLabel.interval 一样。 15 | /// 16 | public object Interval { set; get; } 17 | 18 | /// 19 | /// 20 | /// 21 | public LineStyle LineStyle { set; get; } 22 | } 23 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/AngleAxis.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | /// 6 | /// 极坐标系的角度轴。 7 | /// 8 | public class AngleAxis 9 | { 10 | /// 11 | /// 坐标轴类型。 12 | /// 13 | public AxisType? Type { set; get; } 14 | 15 | /// 16 | /// 起始刻度的角度，默认为 90 度，即圆心的正上方。0 度为圆心的正右方。 17 | /// 点击此处查看详细设置 18 | /// 19 | public int? StartAngle { set; get; } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Gauge/Gauge.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Monitor 4 | { 5 | public partial class Gauge 6 | { 7 | [Parameter] 8 | public string Title { get; set; } 9 | 10 | [Parameter] 11 | public string Color { get; set; } 12 | 13 | [Parameter] 14 | public int? Height { get; set; } 15 | 16 | [Parameter] 17 | public int? BgColor { get; set; } 18 | 19 | [Parameter] 20 | public int Percent { get; set; } 21 | 22 | [Parameter] 23 | public bool? ForceFit { get; set; } 24 | } 25 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Articles/Articles.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | a.listItemMetaTitle { 4 | color: @heading-color; 5 | } 6 | .listItemExtra { 7 | width: 272px; 8 | height: 1px; 9 | } 10 | .selfTrigger { 11 | margin-left: 12px; 12 | } 13 | 14 | @media screen and (max-width: @screen-xs) { 15 | .selfTrigger { 16 | display: block; 17 | margin-left: 0; 18 | } 19 | } 20 | @media screen and (max-width: @screen-md) { 21 | .selfTrigger { 22 | display: block; 23 | margin-left: 0; 24 | } 25 | } 26 | @media screen and (max-width: @screen-lg) { 27 | .listItemExtra { 28 | width: 0; 29 | height: 1px; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/pro_icon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /.github/workflows/dotnetcore.yml: -------------------------------------------------------------------------------- 1 | name: .NET Core 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | steps: 11 | - uses: actions/checkout@v1 12 | - name: Setup .NET Core 13 | uses: actions/setup-dotnet@v1 14 | with: 15 | dotnet-version: 5.0.100 16 | - name: Build with dotnet 17 | run: dotnet build --configuration Release 18 | - name: Publish nuget 19 | run: | 20 | for f in ./Rakor.Blazor.ECharts/bin/Release/*.nupkg 21 | do 22 | curl -vX PUT -u "lishewen:${{ secrets.GITHUB_TOKEN }}" -F package=@$f https://nuget.pkg.github.com/lishewen/ 23 | done 24 | shell: bash 25 | -------------------------------------------------------------------------------- /Demo.WASM/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:53775/", 7 | "sslPort": 44358 8 | } 9 | }, 10 | "profiles": { 11 | "AntDesign.Pro": { 12 | "commandName": "Project", 13 | "launchBrowser": true, 14 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 15 | "environmentVariables": { 16 | "ASPNETCORE_ENVIRONMENT": "Development" 17 | }, 18 | "applicationUrl": "https://localhost:5001;http://localhost:5000" 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/WaterWave/WaterWave.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .waterWave { 4 | position: relative; 5 | display: inline-block; 6 | transform-origin: left; 7 | .text { 8 | position: absolute; 9 | top: 32px; 10 | left: 0; 11 | width: 100%; 12 | text-align: center; 13 | span { 14 | color: @text-color-secondary; 15 | font-size: 14px; 16 | line-height: 22px; 17 | } 18 | h4 { 19 | color: @heading-color; 20 | font-size: 24px; 21 | line-height: 32px; 22 | } 23 | } 24 | .waterWaveCanvasWrapper { 25 | transform: scale(0.5); 26 | transform-origin: 0 0; 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /Demo.WASM/gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require('gulp'), 2 | cleanCss = require('gulp-clean-css'), 3 | less = require('gulp-less'), 4 | rename = require('gulp-rename'), 5 | concatCss = require("gulp-concat-css"), 6 | npmImport = require("less-plugin-npm-import"); 7 | 8 | gulp.task('less', function () { 9 | return gulp 10 | .src([ 11 | '**/*.less', 12 | '!node_modules/**' 13 | ]) 14 | .pipe(less({ 15 | javascriptEnabled: true, 16 | plugins: [new npmImport({ prefix: '~' })] 17 | })) 18 | .pipe(concatCss('site.css')) 19 | .pipe(cleanCss({ compatibility: '*' })) 20 | .pipe(gulp.dest('wwwroot/css')); 21 | }); 22 | 23 | gulp.task('default', gulp.parallel('less'), function () { }) -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Program.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Hosting; 2 | using Microsoft.Extensions.Hosting; 3 | using System.Text; 4 | 5 | namespace Demo 6 | { 7 | public class Program 8 | { 9 | public static void Main(string[] args) 10 | { 11 | Encoding.RegisterProvider(CodePagesEncodingProvider.Instance); 12 | CreateHostBuilder(args).Build().Run(); 13 | } 14 | 15 | public static IHostBuilder CreateHostBuilder(string[] args) => 16 | Host.CreateDefaultBuilder(args) 17 | .ConfigureWebHostDefaults(webBuilder => 18 | { 19 | webBuilder.UseStartup(); 20 | }); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Demo.WASM/Models/ChartData.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class ChartData 4 | { 5 | public ChartDataItem[] VisitData { get; set; } 6 | public ChartDataItem[] VisitData2 { get; set; } 7 | public ChartDataItem[] SalesData { get; set; } 8 | public SearchDataItem[] SearchData { get; set; } 9 | public OfflineDataItem[] OfflineData { get; set; } 10 | public OfflineChartDataItem[] OfflineChartData { get; set; } 11 | public ChartDataItem[] SalesTypeData { get; set; } 12 | public ChartDataItem[] SalesTypeDataOnline { get; set; } 13 | public ChartDataItem[] SalesTypeDataOffline { get; set; } 14 | public RadarDataItem[] RadarData { get; set; } 15 | } 16 | } -------------------------------------------------------------------------------- /Demo.WASM/Services/UserService.cs: -------------------------------------------------------------------------------- 1 | using System.Net.Http; 2 | using System.Net.Http.Json; 3 | using System.Threading.Tasks; 4 | using Demo.WASM.Models; 5 | 6 | namespace Demo.WASM.Services 7 | { 8 | public interface IUserService 9 | { 10 | Task GetCurrentUserAsync(); 11 | } 12 | 13 | public class UserService : IUserService 14 | { 15 | private readonly HttpClient _httpClient; 16 | 17 | public UserService(HttpClient httpClient) 18 | { 19 | _httpClient = httpClient; 20 | } 21 | 22 | public async Task GetCurrentUserAsync() 23 | { 24 | return await _httpClient.GetFromJsonAsync("data/current_user.json"); 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Trend/Trend.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .trendItem { 4 | display: inline-block; 5 | font-size: @font-size-base; 6 | line-height: 22px; 7 | 8 | .up, 9 | .down { 10 | position: relative; 11 | top: 1px; 12 | margin-left: 4px; 13 | span { 14 | font-size: 12px; 15 | transform: scale(0.83); 16 | } 17 | } 18 | .up { 19 | color: @red-6; 20 | } 21 | .down { 22 | top: -1px; 23 | color: @green-6; 24 | } 25 | 26 | &.trendItemGrey .up, 27 | &.trendItemGrey .down { 28 | color: @text-color; 29 | } 30 | 31 | &.reverseColor .up { 32 | color: @green-6; 33 | } 34 | &.reverseColor .down { 35 | color: @red-6; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/Register/Register.razor.cs: -------------------------------------------------------------------------------- 1 | using System.ComponentModel.DataAnnotations; 2 | 3 | namespace Demo.WASM.Pages.User 4 | { 5 | public class RegisterModel 6 | { 7 | [Required] 8 | public string UserName { get; set; } 9 | 10 | [Required] 11 | public string Password { get; set; } 12 | 13 | [Required] 14 | public string ConfirmPassword { get; set; } 15 | 16 | [Required] 17 | public string Phone { get; set; } 18 | 19 | [Required] 20 | public string Captcha { get; set; } 21 | } 22 | 23 | public partial class Register 24 | { 25 | private readonly RegisterModel _user = new RegisterModel(); 26 | 27 | public void Reg() 28 | { 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Error.razor: -------------------------------------------------------------------------------- 1 | @page "/error" 2 | 3 | 4 |

Error.

5 |

An error occurred while processing your request.

6 | 7 |

Development Mode

8 |

9 | Swapping to Development environment will display more detailed information about the error that occurred. 10 |

11 |

12 | The Development environment shouldn't be enabled for deployed applications. 13 | It can result in displaying sensitive information from exceptions to end users. 14 | For local debugging, enable the Development environment by setting the ASPNETCORE_ENVIRONMENT environment variable to Development 15 | and restarting the app. 16 |

-------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/TagSelect/TagSelect.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .tagSelect { 4 | position: relative; 5 | max-height: 32px; 6 | margin-left: -8px; 7 | overflow: hidden; 8 | line-height: 32px; 9 | transition: all 0.3s; 10 | user-select: none; 11 | //:global { 12 | .ant-tag { 13 | margin-right: 24px; 14 | padding: 0 8px; 15 | font-size: @font-size-base; 16 | } 17 | //} 18 | &.expanded { 19 | max-height: 200px; 20 | transition: all 0.3s; 21 | } 22 | .trigger { 23 | position: absolute; 24 | top: 0; 25 | right: 0; 26 | 27 | span.anticon { 28 | font-size: 12px; 29 | } 30 | } 31 | &.hasExpandTag { 32 | padding-right: 50px; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:6395/", 7 | "sslPort": 44304 8 | } 9 | }, 10 | "profiles": { 11 | "IIS Express": { 12 | "commandName": "IISExpress", 13 | "launchBrowser": true, 14 | "environmentVariables": { 15 | "ASPNETCORE_ENVIRONMENT": "Development" 16 | } 17 | }, 18 | "Blazor.ECharts": { 19 | "commandName": "Project", 20 | "launchBrowser": true, 21 | "environmentVariables": { 22 | "ASPNETCORE_ENVIRONMENT": "Development" 23 | }, 24 | "applicationUrl": "https://localhost:5001;http://localhost:5000" 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/ChartCard/ChartCard.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.Dashboard.Analysis 4 | { 5 | public partial class ChartCard 6 | { 7 | [Parameter] 8 | public string Avatar { get; set; } 9 | 10 | [Parameter] 11 | public string Title { get; set; } 12 | 13 | [Parameter] 14 | public RenderFragment Action { get; set; } 15 | 16 | [Parameter] 17 | public string Total { get; set; } 18 | 19 | [Parameter] 20 | public RenderFragment ChildContent { get; set; } 21 | 22 | [Parameter] 23 | public RenderFragment Footer { get; set; } 24 | 25 | [Parameter] 26 | public string ContentHeight { get; set; } 27 | } 28 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/Charts/Map/MiniArea.razor: -------------------------------------------------------------------------------- 1 | @using Demo.WASM.Models 2 | @namespace Demo.WASM.Pages.Dashboard.Monitor 3 | 4 | 5 | 6 | @code 7 | { 8 | private IChartComponent _chart; 9 | 10 | private readonly AreaConfig _chartConfig = new AreaConfig 11 | { 12 | XField = "x", 13 | YField = "y", 14 | Height = 84, 15 | Padding = new[] { 8, 8, 8, 8 }, 16 | ForceFit = true, 17 | XAxis = new ValueCatTimeAxis 18 | { 19 | Visible = false 20 | }, 21 | YAxis = new ValueAxis 22 | { 23 | Visible = false 24 | } 25 | }; 26 | 27 | [Parameter] 28 | public ChartDataItem[] Data { get; set; } 29 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "iisSettings": { 3 | "windowsAuthentication": false, 4 | "anonymousAuthentication": true, 5 | "iisExpress": { 6 | "applicationUrl": "http://localhost:9527", 7 | "sslPort": 0 8 | } 9 | }, 10 | "DetailedErrors": true, 11 | "profiles": { 12 | "IIS Express": { 13 | "commandName": "IISExpress", 14 | "launchBrowser": true, 15 | "environmentVariables": { 16 | "ASPNETCORE_ENVIRONMENT": "Development" 17 | } 18 | }, 19 | "Blazor.ECharts.Demo": { 20 | "commandName": "Project", 21 | "launchBrowser": true, 22 | "environmentVariables": { 23 | "ASPNETCORE_ENVIRONMENT": "Development" 24 | }, 25 | "applicationUrl": "http://localhost:88" 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/advanced.json: -------------------------------------------------------------------------------- 1 | {"advancedOperation1":[{"key":"op1","type":"订购关系生效","name":"曲丽丽","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"-"},{"key":"op2","type":"财务复审","name":"付小小","status":"reject","updatedAt":"2017-10-03 19:23:12","memo":"不通过原因"},{"key":"op3","type":"部门初审","name":"周毛毛","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"-"},{"key":"op4","type":"提交订单","name":"林东东","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"很棒"},{"key":"op5","type":"创建订单","name":"汗牙牙","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"-"}],"advancedOperation2":[{"key":"op1","type":"订购关系生效","name":"曲丽丽","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"-"}],"advancedOperation3":[{"key":"op1","type":"创建订单","name":"汗牙牙","status":"agree","updatedAt":"2017-10-03 19:23:12","memo":"-"}]} -------------------------------------------------------------------------------- /Demo.WASM/Layouts/BasicLayout.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM 2 | @inherits LayoutComponentBase 3 | 4 | 7 | 8 | 9 | 10 | 11 | @Body 12 | 13 | 14 | 15 | 16 | @code 17 | { 18 | private MenuDataItem[] _menuData = {}; 19 | 20 | [Inject] public HttpClient HttpClient { get; set; } 21 | 22 | protected override async Task OnInitializedAsync() 23 | { 24 | await base.OnInitializedAsync(); 25 | _menuData = await HttpClient.GetFromJsonAsync("data/menu.json"); 26 | } 27 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/HandleStyle.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | public class HandleStyle:AreaStyle 6 | { 7 | /// 8 | /// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 9 | /// 点击此处查看详细设置 10 | /// 11 | public object BorderColor { set; get; } 12 | 13 | /// 14 | /// 描边线宽。为 0 时无描边。 15 | /// 16 | public int? BorderWidth { set; get; } 17 | 18 | /// 19 | /// 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。 20 | /// 21 | public LineStyleType? BorderType { set; get; } 22 | 23 | 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/TagSelect/TagSelect.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.List 2 | @inherits AntDomComponentBase 3 | 4 |
5 | @if (!HideCheckAll) 6 | { 7 | @SelectAllText 8 | } 9 | 10 | 11 | @ChildContent 12 | 13 | 14 | @if (Expandable) 15 | { 16 | 17 | @if (_expand) 18 | { 19 | @CollapseText 20 | } 21 | else 22 | { 23 | @ExpandText 24 | } 25 | 26 | } 27 |
-------------------------------------------------------------------------------- /Demo.WASM/Services/AccountService.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | 5 | namespace Demo.WASM.Services 6 | { 7 | public interface IAccountService 8 | { 9 | Task LoginAsync(LoginParamsType model); 10 | Task GetCaptchaAsync(string modile); 11 | } 12 | 13 | public class AccountService : IAccountService 14 | { 15 | private readonly Random _random = new Random(); 16 | 17 | public Task LoginAsync(LoginParamsType model) 18 | { 19 | // todo: login logic 20 | return Task.CompletedTask; 21 | } 22 | 23 | public Task GetCaptchaAsync(string modile) 24 | { 25 | var captcha = _random.Next(0, 9999).ToString().PadLeft(4, '0'); 26 | return Task.FromResult(captcha); 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Brush.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option 2 | { 3 | public class Brush 4 | { 5 | /// 6 | /// 指定哪些 xAxisIndex 可以被刷选。 7 | /// 点击此处查看详细设置 8 | /// 9 | public object XAxisIndex { set; get; } 10 | 11 | /// 12 | /// 不同系列间，选中的项可以联动。 13 | /// 点击此处查看详细设置 14 | /// 15 | public object BrushLink { set; get; } 16 | 17 | /// 18 | /// 定义 在选中范围外 的视觉元素。 19 | /// 点击此处查看详细设置 20 | /// 21 | public object OutOfBrush { set; get; } 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/SearchList.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.List 2 | @inherits LayoutComponentBase 3 | @layout Demo.WASM.BasicLayout 4 | 5 | 10 | 11 | 12 | Home 13 | List 14 | Search 15 | 16 | 17 | 18 |
19 | 23 |
24 | 25 | 26 | @Body 27 | 28 | -------------------------------------------------------------------------------- /Demo.WASM/Utils/LongToDateTimeConverter.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Buffers.Text; 3 | using System.Text.Json; 4 | using System.Text.Json.Serialization; 5 | 6 | namespace Demo.WASM.Utils 7 | { 8 | public class LongToDateTimeConverter : JsonConverter 9 | { 10 | public override DateTime Read(ref Utf8JsonReader reader, Type typeToConvert, JsonSerializerOptions options) 11 | { 12 | if (Utf8Parser.TryParse(reader.ValueSpan, out long value, out _)) 13 | return DateTime.UnixEpoch.AddMilliseconds(value); 14 | 15 | throw new FormatException(); 16 | } 17 | 18 | public override void Write(Utf8JsonWriter writer, DateTime value, JsonSerializerOptions options) 19 | { 20 | writer.WriteStringValue( 21 | JsonEncodedText.Encode(((long) (value - DateTime.UnixEpoch).TotalMilliseconds).ToString())); 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/MiniProgress/MiniProgress.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .miniProgress { 4 | position: relative; 5 | width: 100%; 6 | padding: 5px 0; 7 | .progressWrap { 8 | position: relative; 9 | background-color: @background-color-base; 10 | } 11 | .progress { 12 | width: 0; 13 | height: 100%; 14 | background-color: @primary-color; 15 | border-radius: 1px 0 0 1px; 16 | transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s; 17 | } 18 | .target { 19 | position: absolute; 20 | top: 0; 21 | bottom: 0; 22 | z-index: 9; 23 | width: 20px; 24 | span { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 2px; 29 | height: 4px; 30 | border-radius: 100px; 31 | } 32 | span:last-child { 33 | top: auto; 34 | bottom: 0; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Profile/Advanced/Advanced.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using AntDesign.Pro.Layout; 4 | using Demo.WASM.Models; 5 | using Demo.WASM.Services; 6 | using Microsoft.AspNetCore.Components; 7 | 8 | namespace Demo.WASM.Pages.Profile 9 | { 10 | public partial class Advanced 11 | { 12 | private readonly IList _tabList = new List 13 | { 14 | new TabPaneItem {Key = "detail", Tab = "详情"}, 15 | new TabPaneItem {Key = "rules", Tab = "规则"} 16 | }; 17 | 18 | private AdvancedProfileData _data = new AdvancedProfileData(); 19 | 20 | [Inject] protected IProfileService ProfileService { get; set; } 21 | 22 | protected override async Task OnInitializedAsync() 23 | { 24 | await base.OnInitializedAsync(); 25 | _data = await ProfileService.GetAdvancedAsync(); 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Projects/Projects.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | using Demo.WASM.Services; 5 | using Microsoft.AspNetCore.Components; 6 | using AntDesign; 7 | 8 | namespace Demo.WASM.Pages.List 9 | { 10 | public partial class Projects 11 | { 12 | private readonly ListGridType _listGridType = new ListGridType 13 | { 14 | Gutter = 24, 15 | Column = 4 16 | }; 17 | 18 | private readonly ListFormModel _model = new ListFormModel(); 19 | 20 | private IList _fakeList = new List(); 21 | 22 | [Inject] public IProjectService ProjectService { get; set; } 23 | 24 | protected override async Task OnInitializedAsync() 25 | { 26 | await base.OnInitializedAsync(); 27 | _fakeList = await ProjectService.GetFakeListAsync(8); 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /Demo.WASM/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Demo.WASM", 3 | "version": "1.0.0", 4 | "description": "An out-of-box UI solution for enterprise applications as a Blazor boilerplate.", 5 | "scripts": { 6 | "start": "dotnet watch -p ./Demo.WASM run", 7 | "build": "dotnet publish -o dist", 8 | "gulp:pro": "gulp --gulpfile ./gulpfile.js", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "dependencies": { 12 | "antd": "^4.6.0" 13 | }, 14 | "devDependencies": { 15 | "gulp": "^4.0.2", 16 | "gulp-clean-css": "^4.2.0", 17 | "gulp-concat-css": "^3.1.0", 18 | "gulp-less": "^4.0.1", 19 | "gulp-rename": "^2.0.0", 20 | "gulp-sourcemaps": "^2.6.5", 21 | "gulp-uglify": "^3.0.2", 22 | "less-plugin-npm-import": "^2.1.0", 23 | "husky": "^4.2.3", 24 | "vinyl-buffer": "^1.0.1", 25 | "vinyl-source-stream": "^2.0.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/basic.json: -------------------------------------------------------------------------------- 1 | {"basicGoods":[{"id":"1234561","name":"矿泉水 550ml","barcode":"12421432143214321","price":"2.00","num":"1","amount":"2.00"},{"id":"1234562","name":"凉茶 300ml","barcode":"12421432143214322","price":"3.00","num":"2","amount":"6.00"},{"id":"1234563","name":"好吃的薯片","barcode":"12421432143214323","price":"7.00","num":"4","amount":"28.00"},{"id":"1234564","name":"特别好吃的蛋卷","barcode":"12421432143214324","price":"8.50","num":"3","amount":"25.50"}],"basicProgress":[{"key":"1","time":"2017-10-01 14:10","rate":"联系客户","status":"processing","operator":"取货员 ID1234","cost":"5mins"},{"key":"2","time":"2017-10-01 14:05","rate":"取货员出发","status":"success","operator":"取货员 ID1234","cost":"1h"},{"key":"3","time":"2017-10-01 13:05","rate":"取货员接单","status":"success","operator":"取货员 ID1234","cost":"5mins"},{"key":"4","time":"2017-10-01 13:00","rate":"申请审批通过","status":"success","operator":"系统","cost":"1h"},{"key":"5","time":"2017-10-01 12:00","rate":"发起退货申请","status":"success","operator":"用户","cost":"5mins"}]} -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/MiniBar/MiniBar.razor: -------------------------------------------------------------------------------- 1 | @using Demo.WASM.Services 2 | @namespace Demo.WASM.Pages.Dashboard.Analysis 3 | @inject IChartService ChartService 4 | 5 | 6 | @code 7 | { 8 | private IChartComponent _chart; 9 | private ColumnConfig _chartConfig = new ColumnConfig 10 | { 11 | XField = "x", 12 | YField = "y", 13 | Height = 45, 14 | Padding = new[] { 8, 8, 8, 8 }, 15 | ForceFit = true, 16 | XAxis = new CatAxis 17 | { 18 | Visible = false 19 | }, 20 | YAxis = new ValueAxis 21 | { 22 | Visible = false 23 | } 24 | }; 25 | 26 | protected override async Task OnInitializedAsync() 27 | { 28 | await base.OnInitializedAsync(); 29 | var data = await ChartService.GetVisitDataAsync(); 30 | await _chart.ChangeData(data); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/CardList/CardList.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | using Demo.WASM.Services; 5 | using Microsoft.AspNetCore.Components; 6 | using AntDesign; 7 | 8 | namespace Demo.WASM.Pages.List 9 | { 10 | public partial class CardList 11 | { 12 | private readonly ListGridType _listGridType = new ListGridType 13 | { 14 | Gutter = 24, 15 | Column = 4 16 | }; 17 | 18 | private ListItemDataType[] _data = { }; 19 | 20 | [Inject] protected IProjectService ProjectService { get; set; } 21 | 22 | protected override async Task OnInitializedAsync() 23 | { 24 | await base.OnInitializedAsync(); 25 | var list = new List {new ListItemDataType()}; 26 | var data = await ProjectService.GetFakeListAsync(8); 27 | list.AddRange(data); 28 | _data = list.ToArray(); 29 | } 30 | } 31 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/ChartCard/ChartCard.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis 2 | @inherits AntDomComponentBase 3 | 4 | 5 |
6 |
7 |
@Avatar
8 |
9 |
10 | @Title 11 | 12 |
13 |
14 | @Total 15 |
16 |
17 |
18 |
19 |
@ChildContent
20 |
21 |
22 | @Footer 23 |
24 |
25 | 26 | 27 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step3/Step3.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Form 2 | 3 | 8 | 9 | 12 | 13 | 14 | 15 |
16 | 17 | @_model.PayAccount 18 | @_model.ReceiverAccount 19 | @_model.ReceiverName 20 | 21 | 22 | 23 | 24 |
25 | 26 | -------------------------------------------------------------------------------- /Demo.WASM/styles/global.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | html, 4 | body, 5 | #root, 6 | app { 7 | height: 100%; 8 | } 9 | 10 | .colorWeak { 11 | filter: invert(80%); 12 | } 13 | 14 | .ant-layout { 15 | min-height: 100vh; 16 | } 17 | 18 | canvas { 19 | display: block; 20 | } 21 | 22 | body { 23 | text-rendering: optimizeLegibility; 24 | -webkit-font-smoothing: antialiased; 25 | -moz-osx-font-smoothing: grayscale; 26 | } 27 | 28 | ul, 29 | ol { 30 | list-style: none; 31 | } 32 | 33 | @media (max-width: @screen-xs) { 34 | .ant-table { 35 | width: 100%; 36 | overflow-x: auto; 37 | 38 | &-thead > tr, 39 | &-tbody > tr { 40 | > th, 41 | > td { 42 | white-space: pre; 43 | 44 | > span { 45 | display: block; 46 | } 47 | } 48 | } 49 | } 50 | } 51 | 52 | // 兼容IE11 53 | @media screen and(-ms-high-contrast: active), (-ms-high-contrast: none) { 54 | body .ant-design-pro > .ant-layout { 55 | min-height: 100vh; 56 | } 57 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/MiniArea/MiniArea.razor: -------------------------------------------------------------------------------- 1 | @using Demo.WASM.Services 2 | @namespace Demo.WASM.Pages.Dashboard.Analysis 3 | @inject IChartService ChartService 4 | 5 | 6 | 7 | @code 8 | { 9 | private IChartComponent _visitChart; 10 | 11 | private readonly AreaConfig _visitChartConfig = new AreaConfig 12 | { 13 | XField = "x", 14 | YField = "y", 15 | Height = 45, 16 | Padding = new[] { 8, 8, 8, 8 }, 17 | ForceFit = true, 18 | XAxis = new ValueCatTimeAxis 19 | { 20 | Visible = false 21 | }, 22 | YAxis = new ValueAxis 23 | { 24 | Visible = false 25 | } 26 | }; 27 | 28 | protected override async Task OnInitializedAsync() 29 | { 30 | await base.OnInitializedAsync(); 31 | var data = await ChartService.GetVisitDataAsync(); 32 | await _visitChart.ChangeData(data); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/Register/Register.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main__b__1 { 4 | width: 368px; 5 | margin: 0 auto; 6 | 7 | h3 { 8 | margin-bottom: 20px; 9 | font-size: 16px; 10 | } 11 | 12 | .password { 13 | margin-bottom: 24px; 14 | :global { 15 | .ant-form-item-explain { 16 | display: none; 17 | } 18 | } 19 | } 20 | 21 | .getCaptcha { 22 | display: block; 23 | width: 100%; 24 | } 25 | 26 | .submit { 27 | width: 50%; 28 | } 29 | 30 | .login { 31 | float: right; 32 | line-height: @btn-height-lg; 33 | } 34 | } 35 | 36 | .success, 37 | .warning, 38 | .error { 39 | transition: color 0.3s; 40 | } 41 | 42 | .success { 43 | color: @success-color; 44 | } 45 | 46 | .warning { 47 | color: @warning-color; 48 | } 49 | 50 | .error { 51 | color: @error-color; 52 | } 53 | 54 | .progress-pass > .progress { 55 | :global { 56 | .ant-progress-bg { 57 | background-color: @warning-color; 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /Demo.WASM/Services/ProfileService.cs: -------------------------------------------------------------------------------- 1 | using System.Net.Http; 2 | using System.Net.Http.Json; 3 | using System.Threading.Tasks; 4 | using Demo.WASM.Models; 5 | 6 | namespace Demo.WASM.Services 7 | { 8 | public interface IProfileService 9 | { 10 | Task GetBasicAsync(); 11 | Task GetAdvancedAsync(); 12 | } 13 | 14 | public class ProfileService : IProfileService 15 | { 16 | private readonly HttpClient _httpClient; 17 | 18 | public ProfileService(HttpClient httpClient) 19 | { 20 | _httpClient = httpClient; 21 | } 22 | 23 | public async Task GetBasicAsync() 24 | { 25 | return await _httpClient.GetFromJsonAsync("data/basic.json"); 26 | } 27 | 28 | public async Task GetAdvancedAsync() 29 | { 30 | return await _httpClient.GetFromJsonAsync("data/advanced.json"); 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Applications.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | using Demo.WASM.Services; 5 | using Microsoft.AspNetCore.Components; 6 | using AntDesign; 7 | 8 | namespace Demo.WASM.Pages.List 9 | { 10 | public partial class Applications 11 | { 12 | private readonly ListGridType _listGridType = new ListGridType 13 | { 14 | Gutter = 24, 15 | Column = 4 16 | }; 17 | 18 | private readonly ListFormModel _model = new ListFormModel(); 19 | private IList _selectCategories = new List(); 20 | 21 | private IList _fakeList = new List(); 22 | 23 | 24 | [Inject] public IProjectService ProjectService { get; set; } 25 | 26 | protected override async Task OnInitializedAsync() 27 | { 28 | await base.OnInitializedAsync(); 29 | _fakeList = await ProjectService.GetFakeListAsync(8); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/StandardFormRow/StandardFormRow.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.List 4 | { 5 | public partial class StandardFormRow 6 | { 7 | [Parameter] public string Title { get; set; } 8 | 9 | [Parameter] public bool Last { get; set; } 10 | 11 | [Parameter] public bool Block { get; set; } 12 | 13 | [Parameter] public bool Grid { get; set; } 14 | 15 | [Parameter] public RenderFragment ChildContent { get; set; } 16 | 17 | protected override void OnInitialized() 18 | { 19 | base.OnInitialized(); 20 | SetClassMap(); 21 | } 22 | 23 | protected void SetClassMap() 24 | { 25 | ClassMapper 26 | .Clear() 27 | .Add("standardFormRow") 28 | .If("standardFormRowBlock", () => Block) 29 | .If("standardFormRowLast", () => Last) 30 | .If("standardFormRowGrid", () => Grid); 31 | } 32 | } 33 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/TagSelect/TagSelectOption.razor.cs: -------------------------------------------------------------------------------- 1 | using Microsoft.AspNetCore.Components; 2 | 3 | namespace Demo.WASM.Pages.List 4 | { 5 | public partial class TagSelectOption 6 | { 7 | [Parameter] public string Value { get; set; } 8 | 9 | [Parameter] public bool Checked { get; set; } 10 | 11 | [Parameter] public RenderFragment ChildContent { get; set; } 12 | 13 | [CascadingParameter] public TagSelect Parent { get; set; } 14 | 15 | protected override void OnInitialized() 16 | { 17 | base.OnInitialized(); 18 | Parent.AddOption(this); 19 | } 20 | 21 | protected void HandleCheckedChange(bool isChecked) 22 | { 23 | Checked = isChecked; 24 | if (isChecked) 25 | Parent.SelectItem(Value); 26 | else 27 | Parent.UnSelectItem(Value); 28 | } 29 | 30 | public void Check(bool isChecked) 31 | { 32 | Checked = isChecked; 33 | } 34 | } 35 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/ActiveChart/ActiveChart.razor.less: -------------------------------------------------------------------------------- 1 | .activeChart { 2 | position: relative; 3 | } 4 | .activeChartGrid { 5 | p { 6 | position: absolute; 7 | top: 80px; 8 | } 9 | p:last-child { 10 | top: 115px; 11 | } 12 | } 13 | .activeChartLegend { 14 | position: relative; 15 | height: 20px; 16 | margin-top: 8px; 17 | font-size: 0; 18 | line-height: 20px; 19 | span { 20 | display: inline-block; 21 | width: 33.33%; 22 | font-size: 12px; 23 | text-align: center; 24 | } 25 | span:first-child { 26 | text-align: left; 27 | } 28 | span:last-child { 29 | text-align: right; 30 | } 31 | } 32 | .dashedLine { 33 | position: relative; 34 | top: -70px; 35 | left: -3px; 36 | height: 1px; 37 | 38 | .line { 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | width: 100%; 43 | height: 100%; 44 | background-image: linear-gradient(to right, transparent 50%, #e9e9e9 50%); 45 | background-size: 6px; 46 | } 47 | } 48 | 49 | .dashedLine:last-child { 50 | top: -36px; 51 | } 52 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/BasicList/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/CardList/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/utils/utils.less: -------------------------------------------------------------------------------- 1 | .textOverflow() { 2 | overflow: hidden; 3 | white-space: nowrap; 4 | text-overflow: ellipsis; 5 | word-break: break-all; 6 | } 7 | 8 | .textOverflowMulti(@line: 3, @bg: #fff) { 9 | position: relative; 10 | max-height: @line * 1.5em; 11 | margin-right: -1em; 12 | padding-right: 1em; 13 | overflow: hidden; 14 | line-height: 1.5em; 15 | text-align: justify; 16 | &::before { 17 | position: absolute; 18 | right: 14px; 19 | bottom: 0; 20 | padding: 0 1px; 21 | background: @bg; 22 | content: '...'; 23 | } 24 | &::after { 25 | position: absolute; 26 | right: 14px; 27 | width: 1em; 28 | height: 1em; 29 | margin-top: 0.2em; 30 | background: white; 31 | content: ''; 32 | } 33 | } 34 | 35 | // mixins for clearfix 36 | // ------------------------ 37 | .clearfix() { 38 | zoom: 1; 39 | &::before, 40 | &::after { 41 | display: table; 42 | content: ' '; 43 | } 44 | &::after { 45 | clear: both; 46 | height: 0; 47 | font-size: 0; 48 | visibility: hidden; 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/SeriesBase.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option 2 | { 3 | public class SeriesBase 4 | { 5 | public SeriesBase(string type, string id=null,string name = null) 6 | { 7 | Type = type; 8 | Id = id; 9 | Name = name; 10 | } 11 | 12 | /// 13 | /// 组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。 14 | /// 15 | public string Id { set; get; } 16 | 17 | /// 18 | /// 数据类型 19 | /// 20 | public string Type { set; get; } = "line"; 21 | 22 | /// 23 | /// 系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。 24 | /// 25 | public string Name { set; get; } 26 | 27 | /// 28 | /// 初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。 29 | /// 点击此处查看详细设置 30 | /// 31 | public object AnimationDelay { set; get; } 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 WTM 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/SearchList.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using AntDesign.Pro.Layout; 3 | using Microsoft.AspNetCore.Components; 4 | 5 | namespace Demo.WASM.Pages.List 6 | { 7 | public partial class SearchList 8 | { 9 | private readonly IList _tabList = new List 10 | { 11 | new TabPaneItem {Key = "articles", Tab = "文章"}, 12 | new TabPaneItem {Key = "projects", Tab = "项目"}, 13 | new TabPaneItem {Key = "applications", Tab = "应用"} 14 | }; 15 | 16 | [Inject] protected NavigationManager NavigationManager { get; set; } 17 | 18 | private string GetTabKey() 19 | { 20 | var url = NavigationManager.Uri.TrimEnd('/'); 21 | var key = url.Substring(url.LastIndexOf('/') + 1); 22 | return key; 23 | } 24 | 25 | private void HandleTabChange(string key) 26 | { 27 | var url = NavigationManager.Uri.TrimEnd('/'); 28 | url = url.Substring(0, url.LastIndexOf('/')); 29 | NavigationManager.NavigateTo($"{url}/{key}"); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/MiniProgress/MiniProgress.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis 2 | @inherits AntDomComponentBase 3 | 4 |
5 | 6 |
7 | 8 | 9 |
10 | 11 |
12 |
17 |
18 |
19 | 20 | @code 21 | { 22 | [Parameter] 23 | public int? Target { get; set; } 24 | 25 | [Parameter] 26 | public string TargetLabel { get; set; } 27 | 28 | [Parameter] 29 | public string Color { get; set; } 30 | 31 | [Parameter] 32 | public int? StrokeWidth { get; set; } 33 | 34 | [Parameter] 35 | public int? Percent { get; set; } 36 | } 37 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/Radar/Radar.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .radar { 4 | .legend { 5 | margin-top: 16px; 6 | .legendItem { 7 | position: relative; 8 | color: @text-color-secondary; 9 | line-height: 22px; 10 | text-align: center; 11 | cursor: pointer; 12 | p { 13 | margin: 0; 14 | } 15 | h6 { 16 | margin-top: 4px; 17 | margin-bottom: 0; 18 | padding-left: 16px; 19 | color: @heading-color; 20 | font-size: 24px; 21 | line-height: 32px; 22 | } 23 | &::after { 24 | position: absolute; 25 | top: 8px; 26 | right: 0; 27 | width: 1px; 28 | height: 40px; 29 | background-color: @border-color-split; 30 | content: ''; 31 | } 32 | } 33 | > :last-child .legendItem::after { 34 | display: none; 35 | } 36 | .dot { 37 | position: relative; 38 | top: -1px; 39 | display: inline-block; 40 | width: 6px; 41 | height: 6px; 42 | margin-right: 6px; 43 | border-radius: 6px; 44 | } 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Applications.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .filterCardList { 4 | //:global { 5 | .ant-card-meta-content { 6 | margin-top: 0; 7 | } 8 | // disabled white space 9 | .ant-card-meta-avatar { 10 | font-size: 0; 11 | } 12 | 13 | .ant-list .ant-list-item-content-single { 14 | max-width: 100%; 15 | } 16 | //} 17 | .cardInfo { 18 | margin-top: 16px; 19 | margin-left: 40px; 20 | zoom: 1; 21 | &::before, 22 | &::after { 23 | display: table; 24 | content: ' '; 25 | } 26 | &::after { 27 | clear: both; 28 | height: 0; 29 | font-size: 0; 30 | visibility: hidden; 31 | } 32 | & > div { 33 | position: relative; 34 | float: left; 35 | width: 50%; 36 | text-align: left; 37 | p { 38 | margin: 0; 39 | font-size: 24px; 40 | line-height: 32px; 41 | } 42 | p:first-child { 43 | margin-bottom: 4px; 44 | color: @text-color-secondary; 45 | font-size: 12px; 46 | line-height: 20px; 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/BasicList/BasicList.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | using Demo.WASM.Services; 5 | using Microsoft.AspNetCore.Components; 6 | using AntDesign; 7 | 8 | namespace Demo.WASM.Pages.List 9 | { 10 | public partial class BasicList 11 | { 12 | private readonly BasicListFormModel _model = new BasicListFormModel(); 13 | 14 | private readonly IDictionary _pStatus = new Dictionary 15 | { 16 | {"active", ProgressStatus.Active}, 17 | {"exception", ProgressStatus.Exception}, 18 | {"normal", ProgressStatus.Normal}, 19 | {"success", ProgressStatus.Success} 20 | }; 21 | 22 | private ListItemDataType[] _data = { }; 23 | 24 | [Inject] protected IProjectService ProjectService { get; set; } 25 | 26 | private void ShowModal() 27 | { 28 | } 29 | 30 | protected override async Task OnInitializedAsync() 31 | { 32 | await base.OnInitializedAsync(); 33 | _data = await ProjectService.GetFakeListAsync(5); 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/Login/Login.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Threading.Tasks; 2 | using Demo.WASM.Models; 3 | using Demo.WASM.Services; 4 | using Microsoft.AspNetCore.Components; 5 | using AntDesign; 6 | 7 | namespace Demo.WASM.Pages.User 8 | { 9 | public partial class Login 10 | { 11 | private readonly LoginParamsType _model = new LoginParamsType(); 12 | 13 | [Inject] public NavigationManager NavigationManager { get; set; } 14 | 15 | [Inject] public IAccountService AccountService { get; set; } 16 | 17 | [Inject] public MessageService Message { get; set; } 18 | 19 | public void HandleSubmit() 20 | { 21 | if (_model.UserName == "admin" && _model.Password == "ant.design") 22 | { 23 | NavigationManager.NavigateTo("/"); 24 | return; 25 | } 26 | 27 | if (_model.UserName == "user" && _model.Password == "ant.design") NavigationManager.NavigateTo("/"); 28 | } 29 | 30 | public async Task GetCaptcha() 31 | { 32 | var captcha = await AccountService.GetCaptchaAsync(_model.Mobile); 33 | await Message.Success($"获取验证码成功！验证码为：{captcha}"); 34 | } 35 | } 36 | } -------------------------------------------------------------------------------- /Demo.WASM/Layouts/UserLayout.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM 2 | @using OneOf 3 | @inherits LayoutComponentBase 4 | 5 |
6 |
7 | 8 |
9 |
10 |
11 |
12 | 13 | 14 | Ant Design 15 | 16 |
17 |
Ant Design 是西湖区最具影响力的 Web 设计规范
18 |
19 | @Body 20 |
21 | 22 | 23 | Copyright 2019 蚂蚁金服体验技术部出品 24 | 25 | 26 |
27 | 28 | @code 29 | { 30 | private readonly LinkItem[] _links = 31 | { 32 | new LinkItem{ Key = "", BlankTarget = true, Title = "Ant Design Pro"}, 33 | new LinkItem{ Key = "", BlankTarget = true, Title = OneOf.FromT1(@)}, 34 | new LinkItem{ Key = "", BlankTarget = true, Title = "Ant Design"}, 35 | }; 36 | } 37 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Index.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Threading.Tasks; 2 | using Demo.WASM.Models; 3 | using Demo.WASM.Services; 4 | using Microsoft.AspNetCore.Components; 5 | 6 | namespace Demo.WASM.Pages.Dashboard.Workplace 7 | { 8 | public partial class Index 9 | { 10 | private readonly EditableLink[] _links = 11 | { 12 | new EditableLink {Title = "操作一", Href = ""}, 13 | new EditableLink {Title = "操作二", Href = ""}, 14 | new EditableLink {Title = "操作三", Href = ""}, 15 | new EditableLink {Title = "操作四", Href = ""}, 16 | new EditableLink {Title = "操作五", Href = ""}, 17 | new EditableLink {Title = "操作六", Href = ""} 18 | }; 19 | 20 | private ActivitiesType[] _activities = { }; 21 | private NoticeType[] _projectNotice = { }; 22 | 23 | [Inject] public IProjectService ProjectService { get; set; } 24 | 25 | protected override async Task OnInitializedAsync() 26 | { 27 | await base.OnInitializedAsync(); 28 | _projectNotice = await ProjectService.GetProjectNoticeAsync(); 29 | _activities = await ProjectService.GetActivitiesAsync(); 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step2/Step2.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Form 2 | 3 |
8 | 12 | 13 | @_model.PayAccount 14 | @_model.ReceiverAccount 15 | @_model.ReceiverName 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Profile/Advanced/Advanced.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .main__b__3 { 4 | //:global { 5 | .ant-descriptions-row > td { 6 | padding-bottom: 8px; 7 | } 8 | .ant-page-header-heading-extra { 9 | flex-direction: column; 10 | } 11 | //} 12 | } 13 | 14 | .headerList { 15 | margin-bottom: 4px; 16 | //:global { 17 | .ant-descriptions-row > td { 18 | padding-bottom: 8px; 19 | } 20 | //} 21 | 22 | .stepDescription { 23 | position: relative; 24 | left: 38px; 25 | padding-top: 8px; 26 | font-size: 14px; 27 | text-align: left; 28 | 29 | > div { 30 | margin-top: 8px; 31 | margin-bottom: 4px; 32 | } 33 | } 34 | } 35 | 36 | .pageHeader { 37 | //:global { 38 | .ant-page-header-heading-extra > * + * { 39 | margin-left: 8px; 40 | } 41 | //} 42 | .moreInfo { 43 | display: flex; 44 | justify-content: space-between; 45 | width: 200px; 46 | } 47 | } 48 | 49 | @media screen and (max-width: @screen-sm) { 50 | .stepDescription { 51 | left: 8px; 52 | } 53 | .pageHeader { 54 | //:global { 55 | .ant-pro-page-header-wrap-row { 56 | flex-direction: column; 57 | } 58 | //} 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Articles/Articles.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using System.Threading.Tasks; 3 | using Demo.WASM.Models; 4 | using Demo.WASM.Services; 5 | using Microsoft.AspNetCore.Components; 6 | 7 | namespace Demo.WASM.Pages.List 8 | { 9 | public partial class Articles 10 | { 11 | private readonly string[] _defaultOwners = {"wzj", "wjh"}; 12 | private readonly ListFormModel _model = new ListFormModel(); 13 | 14 | private readonly Owner[] _owners = 15 | { 16 | new Owner {Id = "wzj", Name = "我自己"}, 17 | new Owner {Id = "wjh", Name = "吴家豪"}, 18 | new Owner {Id = "zxx", Name = "周星星"}, 19 | new Owner {Id = "zly", Name = "赵丽颖"}, 20 | new Owner {Id = "ym", Name = "姚明"} 21 | }; 22 | 23 | private IList _fakeList = new List(); 24 | 25 | [Inject] public IProjectService ProjectService { get; set; } 26 | 27 | private void SetOwner() 28 | { 29 | } 30 | 31 | protected override async Task OnInitializedAsync() 32 | { 33 | await base.OnInitializedAsync(); 34 | _fakeList = await ProjectService.GetFakeListAsync(8); 35 | } 36 | } 37 | } -------------------------------------------------------------------------------- /Demo.WASM/Program.cs: -------------------------------------------------------------------------------- 1 | using AntDesign.Pro.Layout; 2 | using Demo.WASM.Services; 3 | using System; 4 | using System.Net.Http; 5 | using System.Threading.Tasks; 6 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 7 | using Microsoft.Extensions.DependencyInjection; 8 | 9 | namespace Demo.WASM 10 | { 11 | public class Program 12 | { 13 | public static async Task Main(string[] args) 14 | { 15 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 16 | builder.RootComponents.Add("app"); 17 | 18 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 19 | builder.Services.AddAntDesign(); 20 | builder.Services.Configure(builder.Configuration.GetSection("ProSettings")); 21 | builder.Services.AddScoped(); 22 | builder.Services.AddScoped(); 23 | builder.Services.AddScoped(); 24 | builder.Services.AddScoped(); 25 | builder.Services.AddScoped(); 26 | 27 | await builder.Build().RunAsync(); 28 | } 29 | } 30 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/StepForm.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Form 2 | @page "/form/step-form" 3 | 4 | 5 | 6 | 7 | Home 8 | Form 9 | Step Form 10 | 11 | 12 | 13 | 将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | @switch (_current) 24 | { 25 | case 0: 26 | 27 | break; 28 | case 1: 29 | 30 | break; 31 | case 2: 32 | 33 | break; 34 | } 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/Login/Login.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | /*此处为了解决样式冲突, 在pro样式的基础上包了一层main, 原始样式从.login开始*/ 4 | .main__b__0 { 5 | width: 368px; 6 | margin: 0 auto; 7 | @media screen and (max-width: @screen-sm) { 8 | width: 95%; 9 | } 10 | 11 | .login { 12 | :global { 13 | .ant-tabs .ant-tabs-bar { 14 | margin-bottom: 24px; 15 | text-align: center; 16 | border-bottom: 0; 17 | } 18 | } 19 | 20 | .getCaptcha { 21 | display: block; 22 | width: 100%; 23 | } 24 | 25 | .icon { 26 | color: @primary-color; 27 | } 28 | 29 | .other { 30 | margin-top: 24px; 31 | line-height: 22px; 32 | text-align: left; 33 | 34 | .icon { 35 | margin-left: 16px; 36 | color: @text-color-secondary; 37 | font-size: 24px; 38 | vertical-align: middle; 39 | cursor: pointer; 40 | transition: color 0.3s; 41 | 42 | &:hover { 43 | color: @primary-color; 44 | } 45 | } 46 | 47 | .register { 48 | float: right; 49 | } 50 | } 51 | 52 | .prefixIcon { 53 | color: @disabled-color; 54 | font-size: @font-size-base; 55 | } 56 | 57 | .submit { 58 | width: 100%; 59 | margin-top: 24px; 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Bar/Bar.cs: -------------------------------------------------------------------------------- 1 | namespace Rakor.Blazor.ECharts.Option.Series.Bar 2 | { 3 | /// 4 | /// 柱状图 5 | /// 6 | public class Bar : SeriesBase 7 | { 8 | public Bar() : base("bar") { } 9 | 10 | /// 11 | /// 是否平滑曲线显示。 12 | /// 如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。 13 | /// 如果需要修改平滑算法，请参考 smoothMonotone。 14 | /// 15 | public object Smooth { set; get; } 16 | 17 | /// 18 | /// 同一系列的柱间距离，默认为类目间距的20%，可设固定值.在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。 19 | /// 20 | public object BarCategoryGap { set; get; } 21 | 22 | public object LineStyle { set; get; } 23 | 24 | /// 25 | /// 使用的 x 轴的 index，在单个图表实例中存在多个 x 轴的时候有用。 26 | /// 27 | public int? XAxisIndex { set; get; } 28 | 29 | /// 30 | /// 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。 31 | /// 32 | public int? YAxisIndex { set; get; } 33 | 34 | public string BarWidth { get; set; } 35 | 36 | public object Data { set; get; } 37 | 38 | public Encode Encode { get; set; } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /Demo.WASM/Models/CurrentUser.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.WASM.Models 2 | { 3 | public class TagType 4 | { 5 | public string Key { get; set; } 6 | public string Label { get; set; } 7 | } 8 | 9 | public class GeographicType 10 | { 11 | public TagType Province { get; set; } 12 | public TagType City { get; set; } 13 | } 14 | 15 | public class CurrentUser 16 | { 17 | public string Name { get; set; } 18 | public string Avatar { get; set; } 19 | public string Userid { get; set; } 20 | public NoticeType[] Notice { get; set; } = { }; 21 | public string Email { get; set; } 22 | public string Signature { get; set; } 23 | public string Title { get; set; } 24 | public string Group { get; set; } 25 | public TagType[] Tags { get; set; } = { }; 26 | public int NotifyCount { get; set; } 27 | public int UnreadCount { get; set; } 28 | public string Country { get; set; } 29 | public GeographicType Geographic { get; set; } 30 | public string Address { get; set; } 31 | public string Phone { get; set; } 32 | } 33 | 34 | public class UserLiteItem 35 | { 36 | public string Avater { get; set; } 37 | public string Title { get; set; } 38 | public string Description { get; set; } 39 | } 40 | } -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/notice.json: -------------------------------------------------------------------------------- 1 | [{"id":"xxx1","title":"Alipay","logo":"https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png","description":"那是一种内在的东西，他们到达不了，也无法触及的","updatedAt":"2020-08-26T10:21:19.719Z","member":"科学搬砖组","href":"","memberLink":""},{"id":"xxx2","title":"Angular","logo":"https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png","description":"希望是一个好东西，也许是最好的，好东西是不会消亡的","updatedAt":"2017-07-24T00:00:00.000Z","member":"全组都是吴彦祖","href":"","memberLink":""},{"id":"xxx3","title":"Ant Design","logo":"https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png","description":"城镇中有那么多的酒馆，她却偏偏走进了我的酒馆","updatedAt":"2020-08-26T10:21:19.719Z","member":"中二少女团","href":"","memberLink":""},{"id":"xxx4","title":"Ant Design Pro","logo":"https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png","description":"那时候我只会想自己想要什么，从不想自己拥有什么","updatedAt":"2017-07-23T00:00:00.000Z","member":"程序员日常","href":"","memberLink":""},{"id":"xxx5","title":"Bootstrap","logo":"https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png","description":"凛冬将至","updatedAt":"2017-07-23T00:00:00.000Z","member":"高逼格设计天团","href":"","memberLink":""},{"id":"xxx6","title":"React","logo":"https://gw.alipayobjects.com/zos/rmsportal/kZzEzemZyKLKFsojXItE.png","description":"生命就像一盒巧克力，结果往往出人意料","updatedAt":"2017-07-23T00:00:00.000Z","member":"骗你来学计算机","href":"","memberLink":""}] -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/BasicForm/BasicForm.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .card { 4 | margin-bottom: 24px; 5 | 6 | :global { 7 | .ant-legacy-form-item .ant-legacy-form-item-control-wrapper { 8 | width: 100%; 9 | } 10 | } 11 | } 12 | 13 | .errorIcon { 14 | margin-right: 24px; 15 | color: @error-color; 16 | cursor: pointer; 17 | 18 | span.anticon { 19 | margin-right: 4px; 20 | } 21 | } 22 | 23 | .errorPopover { 24 | :global { 25 | .ant-popover-inner-content { 26 | min-width: 256px; 27 | max-height: 290px; 28 | padding: 0; 29 | overflow: auto; 30 | } 31 | } 32 | } 33 | 34 | .errorListItem { 35 | padding: 8px 16px; 36 | list-style: none; 37 | border-bottom: 1px solid @border-color-split; 38 | cursor: pointer; 39 | transition: all 0.3s; 40 | &:hover { 41 | background: @item-active-bg; 42 | } 43 | &:last-child { 44 | border: 0; 45 | } 46 | .errorIcon { 47 | float: left; 48 | margin-top: 4px; 49 | margin-right: 12px; 50 | padding-bottom: 22px; 51 | color: @error-color; 52 | } 53 | .errorField { 54 | margin-top: 2px; 55 | color: @text-color-secondary; 56 | font-size: 12px; 57 | } 58 | } 59 | 60 | .editable { 61 | td { 62 | padding-top: 13px !important; 63 | padding-bottom: 12.5px !important; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/AdvancedForm/AdvancedForm.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .card { 4 | margin-bottom: 24px; 5 | 6 | :global { 7 | .ant-legacy-form-item .ant-legacy-form-item-control-wrapper { 8 | width: 100%; 9 | } 10 | } 11 | } 12 | 13 | .errorIcon { 14 | margin-right: 24px; 15 | color: @error-color; 16 | cursor: pointer; 17 | 18 | span.anticon { 19 | margin-right: 4px; 20 | } 21 | } 22 | 23 | .errorPopover { 24 | :global { 25 | .ant-popover-inner-content { 26 | min-width: 256px; 27 | max-height: 290px; 28 | padding: 0; 29 | overflow: auto; 30 | } 31 | } 32 | } 33 | 34 | .errorListItem { 35 | padding: 8px 16px; 36 | list-style: none; 37 | border-bottom: 1px solid @border-color-split; 38 | cursor: pointer; 39 | transition: all 0.3s; 40 | &:hover { 41 | background: @item-active-bg; 42 | } 43 | &:last-child { 44 | border: 0; 45 | } 46 | .errorIcon { 47 | float: left; 48 | margin-top: 4px; 49 | margin-right: 12px; 50 | padding-bottom: 22px; 51 | color: @error-color; 52 | } 53 | .errorField { 54 | margin-top: 2px; 55 | color: @text-color-secondary; 56 | font-size: 12px; 57 | } 58 | } 59 | 60 | .editable { 61 | td { 62 | padding-top: 13px !important; 63 | padding-bottom: 12.5px !important; 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Demo.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net5.0 5 | zh-Hans 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | Never 30 | 31 | 32 | 33 | 34 | 35 | Always 36 | 37 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step3/Step3.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .stepForm { 4 | max-width: 500px; 5 | margin: 40px auto 0; 6 | } 7 | 8 | .stepFormText { 9 | margin-bottom: 24px; 10 | :global { 11 | .ant-form-item-label, 12 | .ant-form-item-control { 13 | line-height: 22px; 14 | } 15 | } 16 | } 17 | 18 | .result { 19 | max-width: 560px; 20 | margin: 0 auto; 21 | padding: 24px 0 8px; 22 | } 23 | 24 | .desc { 25 | padding: 0 56px; 26 | color: @text-color-secondary; 27 | h3 { 28 | margin: 0 0 12px 0; 29 | color: @text-color-secondary; 30 | font-size: 16px; 31 | line-height: 32px; 32 | } 33 | h4 { 34 | margin: 0 0 4px 0; 35 | color: @text-color-secondary; 36 | font-size: 14px; 37 | line-height: 22px; 38 | } 39 | p { 40 | margin-top: 0; 41 | margin-bottom: 12px; 42 | line-height: 22px; 43 | } 44 | } 45 | 46 | @media screen and (max-width: @screen-md) { 47 | .desc { 48 | padding: 0; 49 | } 50 | } 51 | 52 | .information { 53 | line-height: 22px; 54 | :global { 55 | .ant-row:not(:last-child) { 56 | margin-bottom: 24px; 57 | } 58 | } 59 | .label { 60 | padding-right: 8px; 61 | color: @heading-color; 62 | text-align: right; 63 | @media screen and (max-width: @screen-sm) { 64 | text-align: left; 65 | } 66 | } 67 | } 68 | 69 | .uppercase { 70 | font-size: 12px; 71 | } 72 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/AreaStyle.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | public class AreaStyle 6 | { 7 | /// 8 | /// 线的颜色 9 | /// 10 | /// 点击此处查看详细设置 11 | public object Color { set; get; } 12 | 13 | /// 14 | /// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 15 | /// 16 | public int? ShadowBlur { set; get; } 17 | 18 | /// 19 | /// 阴影颜色。支持的格式同color。 20 | /// 21 | public object ShadowColor { set; get; } 22 | 23 | /// 24 | /// 阴影水平方向上的偏移距离。 25 | /// 26 | public int? ShadowOffsetX { set; get; } 27 | 28 | /// 29 | /// 阴影垂直方向上的偏移距离。 30 | /// 31 | public int? ShadowOffsetY { set; get; } 32 | 33 | /// 34 | /// 图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。 35 | /// 36 | public double? Opacity { set; get; } 37 | 38 | /// 39 | /// 图形区域的起始位置。 40 | /// 默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，则可以通过这个配置项进行设置。 41 | /// 42 | public Origin? Origin { set; get; } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Map/Map.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series.Map 4 | { 5 | public class Map : SeriesBase 6 | { 7 | public Map() : base("map") { } 8 | 9 | public string MapType { set; get; } 10 | public Label Label { set; get; } 11 | 12 | public List Data { set; get; } 13 | 14 | /// 15 | /// 自定义地区的名称映射 16 | /// 点击此处查看详细设置 17 | /// 18 | public object NameMap { set; get; } 19 | 20 | /// 21 | /// 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启 22 | /// 23 | public object Roam { set; get; } 24 | 25 | /// 26 | /// 当前视角的缩放比例。 27 | /// 28 | public double? Zoom { set; get; } 29 | 30 | /// 31 | /// layoutCenter 和 layoutSize 提供了除了 left/right/top/bottom/width/height 之外的布局手段。 32 | /// 点击此处查看详细设置 33 | /// 34 | public object[] LayoutCenter { set; get; } 35 | 36 | /// 37 | /// 地图的大小，见 layoutCenter。支持相对于屏幕宽高的百分比或者绝对的像素大小。 38 | /// 39 | public object LayoutSize { set; get; } 40 | } 41 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Rakor.Blazor.ECharts.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net5.0 5 | 6 | Library 7 | 8 | 0.5.0 9 | true 10 | rakor 11 | true 12 | Blazor版本的ECharts图表组件 13 | 演示地址：http://101.132.118.176:8123/line/line1 14 | 开源地址：https://github.com/caopengfei/BlazorECharts 15 | 使用方式见Demo项目 16 | Rakor.Blazor.ECharts 17 | Rakor.Blazor.ECharts 18 | https://github.com/lishewen/BlazorECharts 19 | https://github.com/lishewen/BlazorECharts 20 | github 21 | https://github.com/lishewen/BlazorECharts 22 | Blazor,.net core,ECharts 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | PreserveNewest 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/wwwroot/css/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | } 4 | 5 | body app { 6 | display: flex; 7 | height: 100vh; 8 | } 9 | 10 | .blaz-layout-west .el-card { 11 | border: none; 12 | border-radius: 0; 13 | min-width:265px; 14 | } 15 | 16 | .blaz-layout-west .el-card__header { 17 | color: rgba(255,255,255,.7); 18 | border: none; 19 | } 20 | 21 | .blaz-layout-west .el-card__body .el-menu { 22 | border: none; 23 | } 24 | 25 | .blaz-layout-center .navbar { 26 | display: flex; 27 | height: 50px; 28 | overflow: hidden; 29 | position: relative; 30 | box-shadow: 0 1px 4px rgba(0,21,41,.08); 31 | padding-left: 30px; 32 | padding-right: 30px; 33 | } 34 | 35 | .blaz-layout-center .navbar .fill { 36 | flex: 1; 37 | } 38 | 39 | .blaz-layout-center .navbar .tools, .blaz-layout-center .navbar .tools .el-breadcrumb { 40 | line-height: 50px; 41 | } 42 | 43 | .container { 44 | display: flex; 45 | flex-direction: row; 46 | flex-wrap: wrap; 47 | justify-content: flex-start; 48 | padding-left: 20px; 49 | padding-bottom: 20px; 50 | padding-right: 0px; 51 | padding-top: 0px; 52 | height: 95%; 53 | width: 95%; 54 | } 55 | .chart-normal { 56 | border-radius: 4px; 57 | height: 300px; 58 | width:400px; 59 | margin-top:20px; 60 | } 61 | .chart-fill { 62 | width: 100%; 63 | height: 90%; 64 | margin-top: 20px; 65 | margin-right: 20px; 66 | } 67 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/_Host.cshtml: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @namespace Demo.Pages 3 | @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | ECharts 示例 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /Demo.WASM/Models/ListItemDataType.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | using System.Text.Json.Serialization; 3 | using Demo.WASM.Utils; 4 | 5 | namespace Demo.WASM.Models 6 | { 7 | public class Member 8 | { 9 | public string Avatar { get; set; } 10 | public string Name { get; set; } 11 | public string Id { get; set; } 12 | } 13 | 14 | public class ListItemDataType 15 | { 16 | public string Id { get; set; } 17 | public string Owner { get; set; } 18 | public string Title { get; set; } 19 | public string Avatar { get; set; } 20 | public string Cover { get; set; } 21 | public string Status { get; set; } 22 | public int Percent { get; set; } 23 | public string Logo { get; set; } 24 | public string Href { get; set; } 25 | public string Body { get; set; } 26 | public string SubDescription { get; set; } 27 | public string Description { get; set; } 28 | public int ActiveUser { get; set; } 29 | public int NewUser { get; set; } 30 | public int Star { get; set; } 31 | public int Like { get; set; } 32 | public int Message { get; set; } 33 | public string Content { get; set; } 34 | public Member[] Members { get; set; } 35 | 36 | [JsonConverter(typeof(LongToDateTimeConverter))] 37 | public DateTime UpdatedAt { get; set; } 38 | 39 | [JsonConverter(typeof(LongToDateTimeConverter))] 40 | public DateTime CreatedAt { get; set; } 41 | } 42 | } -------------------------------------------------------------------------------- /Demo.WASM/Services/ChartService.cs: -------------------------------------------------------------------------------- 1 | using System.Net.Http; 2 | using System.Net.Http.Json; 3 | using System.Threading.Tasks; 4 | using Demo.WASM.Models; 5 | 6 | namespace Demo.WASM.Services 7 | { 8 | public interface IChartService 9 | { 10 | Task GetVisitDataAsync(); 11 | Task GetVisitData2Async(); 12 | Task GetSalesDataAsync(); 13 | Task GetRadarDataAsync(); 14 | } 15 | 16 | public class ChartService : IChartService 17 | { 18 | private readonly HttpClient _httpClient; 19 | 20 | public ChartService(HttpClient httpClient) 21 | { 22 | _httpClient = httpClient; 23 | } 24 | 25 | public async Task GetVisitDataAsync() 26 | { 27 | return (await GetChartDataAsync()).VisitData; 28 | } 29 | 30 | public async Task GetVisitData2Async() 31 | { 32 | return (await GetChartDataAsync()).VisitData2; 33 | } 34 | 35 | public async Task GetSalesDataAsync() 36 | { 37 | return (await GetChartDataAsync()).SalesData; 38 | } 39 | 40 | public async Task GetRadarDataAsync() 41 | { 42 | return (await GetChartDataAsync()).RadarData; 43 | } 44 | 45 | private async Task GetChartDataAsync() 46 | { 47 | return await _httpClient.GetFromJsonAsync("data/fake_chart_data.json"); 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step1/Step1.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .stepForm { 4 | max-width: 500px; 5 | margin: 40px auto 0; 6 | } 7 | 8 | .stepFormText { 9 | margin-bottom: 24px; 10 | :global { 11 | .ant-form-item-label, 12 | .ant-form-item-control { 13 | line-height: 22px; 14 | } 15 | } 16 | } 17 | 18 | .result { 19 | max-width: 560px; 20 | margin: 0 auto; 21 | padding: 24px 0 8px; 22 | } 23 | 24 | .desc { 25 | padding: 0 56px; 26 | color: @text-color-secondary; 27 | h3 { 28 | margin: 0 0 12px 0; 29 | color: @text-color-secondary; 30 | font-size: 16px; 31 | line-height: 32px; 32 | } 33 | h4 { 34 | margin: 0 0 4px 0; 35 | color: @text-color-secondary; 36 | font-size: 14px; 37 | line-height: 22px; 38 | } 39 | p { 40 | margin-top: 0; 41 | margin-bottom: 12px; 42 | line-height: 22px; 43 | } 44 | } 45 | 46 | @media screen and (max-width: @screen-md) { 47 | .desc { 48 | padding: 0; 49 | } 50 | } 51 | 52 | .information { 53 | line-height: 22px; 54 | :global { 55 | .ant-row:not(:last-child) { 56 | margin-bottom: 24px; 57 | } 58 | } 59 | .label { 60 | padding-right: 8px; 61 | color: @heading-color; 62 | text-align: right; 63 | @media screen and (max-width: @screen-sm) { 64 | text-align: left; 65 | } 66 | } 67 | } 68 | 69 | .money { 70 | font-weight: 500; 71 | font-size: 20px; 72 | font-family: 'Helvetica Neue', sans-serif; 73 | line-height: 14px; 74 | } 75 | 76 | .uppercase { 77 | font-size: 12px; 78 | } 79 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step2/Step2.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .stepForm { 4 | max-width: 500px; 5 | margin: 40px auto 0; 6 | } 7 | 8 | .stepFormText { 9 | margin-bottom: 24px; 10 | :global { 11 | .ant-form-item-label, 12 | .ant-form-item-control { 13 | line-height: 22px; 14 | } 15 | } 16 | } 17 | 18 | .result { 19 | max-width: 560px; 20 | margin: 0 auto; 21 | padding: 24px 0 8px; 22 | } 23 | 24 | .desc { 25 | padding: 0 56px; 26 | color: @text-color-secondary; 27 | h3 { 28 | margin: 0 0 12px 0; 29 | color: @text-color-secondary; 30 | font-size: 16px; 31 | line-height: 32px; 32 | } 33 | h4 { 34 | margin: 0 0 4px 0; 35 | color: @text-color-secondary; 36 | font-size: 14px; 37 | line-height: 22px; 38 | } 39 | p { 40 | margin-top: 0; 41 | margin-bottom: 12px; 42 | line-height: 22px; 43 | } 44 | } 45 | 46 | @media screen and (max-width: @screen-md) { 47 | .desc { 48 | padding: 0; 49 | } 50 | } 51 | 52 | .information { 53 | line-height: 22px; 54 | :global { 55 | .ant-row:not(:last-child) { 56 | margin-bottom: 24px; 57 | } 58 | } 59 | .label { 60 | padding-right: 8px; 61 | color: @heading-color; 62 | text-align: right; 63 | @media screen and (max-width: @screen-sm) { 64 | text-align: left; 65 | } 66 | } 67 | } 68 | 69 | .money { 70 | font-weight: 500; 71 | font-size: 20px; 72 | font-family: 'Helvetica Neue', sans-serif; 73 | line-height: 14px; 74 | } 75 | 76 | .uppercase { 77 | font-size: 12px; 78 | } 79 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Line/Line9.razor: -------------------------------------------------------------------------------- 1 | @page "/line/line9" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Line 5 | 6 |
7 | 8 |
9 | 10 | @code{ 11 | private EChartsOption Option1; 12 | 13 | protected override void OnInitialized() 14 | { 15 | base.OnInitialized(); 16 | 17 | List> data = new List>(); 18 | double theta = 0; 19 | for (int i = 0; i <= 100; i++) 20 | { 21 | theta = Math.Round(i / 100d * 360,4); 22 | data.Add(new[] { Math.Round(5 * (1 + Math.Sin(theta / 180 * Math.PI)), 4), theta }); 23 | } 24 | 25 | Option1 = new EChartsOption() 26 | { 27 | Title = new Title() { Text = "极坐标双数值轴" }, 28 | Tooltip = new Tooltip() { Trigger = TooltipTrigger.Axis,AxisPointer=new TooltipAxisPointer() { Type=AxisPointerType.Cross} }, 29 | Legend = new Legend() { Data = new[] { "line" } }, 30 | Polar=new Polar(), 31 | RadiusAxis=new RadiusAxis(), 32 | AngleAxis=new AngleAxis() {Type=AxisType.Value,StartAngle=0 }, 33 | Series=new List() 34 | { 35 | new Line() 36 | { 37 | CoordinateSystem=CoordinateSystem.Polar, 38 | Name="line", 39 | Data=data 40 | } 41 | } 42 | }; 43 | } 44 | } -------------------------------------------------------------------------------- /Demo.WASM/Layouts/UserLayout.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .container__b__0 { 4 | display: flex; 5 | flex-direction: column; 6 | height: 100vh; 7 | overflow: auto; 8 | background: @layout-body-background; 9 | 10 | .lang { 11 | width: 100%; 12 | height: 40px; 13 | line-height: 44px; 14 | text-align: right; 15 | :global(.ant-dropdown-trigger) { 16 | margin-right: 24px; 17 | } 18 | } 19 | 20 | .content { 21 | flex: 1; 22 | padding: 32px 0; 23 | } 24 | 25 | .top { 26 | text-align: center; 27 | } 28 | 29 | .header { 30 | height: 44px; 31 | line-height: 44px; 32 | a { 33 | text-decoration: none; 34 | } 35 | } 36 | 37 | .logo { 38 | height: 44px; 39 | margin-right: 16px; 40 | vertical-align: top; 41 | } 42 | 43 | .title { 44 | position: relative; 45 | top: 2px; 46 | color: @heading-color; 47 | font-weight: 600; 48 | font-size: 33px; 49 | font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif; 50 | } 51 | 52 | .desc { 53 | margin-top: 12px; 54 | margin-bottom: 40px; 55 | color: @text-color-secondary; 56 | font-size: @font-size-base; 57 | } 58 | } 59 | 60 | @media (min-width: @screen-md-min) { 61 | .container__b__0 { 62 | background-image: url('https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg'); 63 | background-repeat: no-repeat; 64 | background-position: center 110px; 65 | background-size: 100%; 66 | 67 | .content { 68 | padding: 32px 0 24px; 69 | } 70 | } 71 | } -------------------------------------------------------------------------------- /Demo.WASM/Services/ProjectService.cs: -------------------------------------------------------------------------------- 1 | using System.Linq; 2 | using System.Net.Http; 3 | using System.Net.Http.Json; 4 | using System.Threading.Tasks; 5 | using Demo.WASM.Models; 6 | 7 | namespace Demo.WASM.Services 8 | { 9 | public interface IProjectService 10 | { 11 | Task GetProjectNoticeAsync(); 12 | Task GetActivitiesAsync(); 13 | Task GetFakeListAsync(int count = 0); 14 | Task GetNoticesAsync(); 15 | } 16 | 17 | public class ProjectService : IProjectService 18 | { 19 | private readonly HttpClient _httpClient; 20 | 21 | public ProjectService(HttpClient httpClient) 22 | { 23 | _httpClient = httpClient; 24 | } 25 | 26 | public async Task GetProjectNoticeAsync() 27 | { 28 | return await _httpClient.GetFromJsonAsync("data/notice.json"); 29 | } 30 | 31 | public async Task GetNoticesAsync() 32 | { 33 | return await _httpClient.GetFromJsonAsync("data/notices.json"); 34 | } 35 | 36 | public async Task GetActivitiesAsync() 37 | { 38 | return await _httpClient.GetFromJsonAsync("data/activities.json"); 39 | } 40 | 41 | public async Task GetFakeListAsync(int count = 0) 42 | { 43 | var data = await _httpClient.GetFromJsonAsync("data/fake_list.json"); 44 | return count > 0 ? data.Take(count).ToArray() : data; 45 | } 46 | } 47 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Candlestick/StockData.cs: -------------------------------------------------------------------------------- 1 | namespace Demo.Pages.Candlestick 2 | { 3 | /// 4 | /// 股票数据 5 | /// 6 | public class StockData 7 | { 8 | /// 9 | /// 日期 10 | /// 11 | public string Date { set; get; } 12 | 13 | /// 14 | /// 开盘价 15 | /// 16 | public double Open { set; get; } 17 | 18 | /// 19 | /// 最高价 20 | /// 21 | public double High { set; get; } 22 | 23 | /// 24 | /// 最低价 25 | /// 26 | public double Low { set; get; } 27 | 28 | /// 29 | /// 收盘价 30 | /// 31 | public double Close { set; get; } 32 | 33 | /// 34 | /// 成交额 35 | /// 36 | public double Amount { set; get; } 37 | 38 | ///// 39 | ///// 换手率 40 | ///// 41 | //public double? Turn { set; get; } 42 | 43 | ///// 44 | ///// 涨跌幅 45 | ///// 46 | //public double PctChg { set; get; } 47 | 48 | /// 49 | /// 滚动市盈率 50 | /// 51 | public double PeTTM { set; get; } 52 | } 53 | 54 | public class StockInfo 55 | { 56 | [Newtonsoft.Json.JsonProperty("code_name")] 57 | public string Name { set; get; } 58 | 59 | /// 60 | /// 证券类型 61 | /// 1：股票，2：指数,3：其它 62 | /// 63 | public int Type { set; get; } 64 | } 65 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Line/Line9.razor: -------------------------------------------------------------------------------- 1 | @page "/line/line9" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Line 5 | 6 |
7 | 8 |
9 | 10 | @code{ 11 | private EChartsOption Option1; 12 | 13 | protected override void OnInitialized() 14 | { 15 | base.OnInitialized(); 16 | 17 | List> data = new List>(); 18 | double theta = 0; 19 | for (int i = 0; i <= 100; i++) 20 | { 21 | theta = Math.Round(i / 100d * 360,4); 22 | data.Add(new[] { Math.Round(5 * (1 + Math.Sin(theta / 180 * Math.PI)), 4), theta }); 23 | } 24 | 25 | Option1 = new EChartsOption() 26 | { 27 | Title = new Rakor.Blazor.ECharts.Option.Title() { Text = "极坐标双数值轴" }, 28 | Tooltip = new Rakor.Blazor.ECharts.Option.Tooltip() { Trigger = TooltipTrigger.Axis,AxisPointer=new TooltipAxisPointer() { Type=AxisPointerType.Cross} }, 29 | Legend = new Rakor.Blazor.ECharts.Option.Legend() { Data = new[] { "line" } }, 30 | Polar=new Polar(), 31 | RadiusAxis=new RadiusAxis(), 32 | AngleAxis=new AngleAxis() {Type=AxisType.Value,StartAngle=0 }, 33 | Series=new List() 34 | { 35 | new Line() 36 | { 37 | CoordinateSystem=CoordinateSystem.Polar, 38 | Name="line", 39 | Data=data 40 | } 41 | } 42 | }; 43 | } 44 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/ChartCard/ChartCard.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .chartCard { 4 | position: relative; 5 | .chartTop { 6 | position: relative; 7 | width: 100%; 8 | overflow: hidden; 9 | } 10 | .chartTopMargin { 11 | margin-bottom: 12px; 12 | } 13 | .chartTopHasMargin { 14 | margin-bottom: 20px; 15 | } 16 | .metaWrap { 17 | float: left; 18 | } 19 | .avatar { 20 | position: relative; 21 | top: 4px; 22 | float: left; 23 | margin-right: 20px; 24 | img { 25 | border-radius: 100%; 26 | } 27 | } 28 | .meta { 29 | height: 22px; 30 | color: @text-color-secondary; 31 | font-size: @font-size-base; 32 | line-height: 22px; 33 | } 34 | .action { 35 | position: absolute; 36 | top: 4px; 37 | right: 0; 38 | line-height: 1; 39 | cursor: pointer; 40 | } 41 | .total { 42 | height: 38px; 43 | margin-top: 4px; 44 | margin-bottom: 0; 45 | overflow: hidden; 46 | color: @heading-color; 47 | font-size: 30px; 48 | line-height: 38px; 49 | white-space: nowrap; 50 | text-overflow: ellipsis; 51 | word-break: break-all; 52 | } 53 | .content { 54 | position: relative; 55 | width: 100%; 56 | margin-bottom: 12px; 57 | } 58 | .contentFixed { 59 | position: absolute; 60 | bottom: 0; 61 | left: 0; 62 | width: 100%; 63 | } 64 | .footer { 65 | margin-top: 8px; 66 | padding-top: 9px; 67 | border-top: 1px solid @border-color-split; 68 | & > * { 69 | position: relative; 70 | } 71 | } 72 | .footerMargin { 73 | margin-top: 20px; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Workplace/Components/Radar/Radar.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Workplace 2 | 3 | 4 | 5 | @if (HasLegend) 6 | { 7 | 8 | 9 |
10 |

11 | 12 | 13 |

14 |
15 |
16 | 17 | 18 | } 19 | 20 | @inject IChartService ChartService 21 | @code 22 | { 23 | [Parameter] public bool HasLegend { get; set; } 24 | 25 | [Parameter] public int Height { get; set; } = 343; 26 | 27 | private IChartComponent _chart; 28 | 29 | private readonly RadarConfig _chartConfig = new RadarConfig 30 | { 31 | Height = 343, 32 | ForceFit = true, 33 | AngleField = "label", 34 | RadiusField = "value", 35 | RadiusAxis = new ValueAxis 36 | { 37 | Grid = new BaseAxisGrid 38 | { 39 | AlternateColor = new[] { "rgba(0, 0, 0, 0.04)", null } 40 | } 41 | }, 42 | Area = new RadarViewConfigArea 43 | { 44 | Visible = false 45 | }, 46 | Point = new RadarViewConfigPoint 47 | { 48 | Visible = true 49 | } 50 | }; 51 | 52 | protected override async Task OnInitializedAsync() 53 | { 54 | await base.OnInitializedAsync(); 55 | var data = await ChartService.GetRadarDataAsync(); 56 | await _chart.ChangeData(data); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/NumberInfo/NumberInfo.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .numberInfo { 4 | .suffix { 5 | margin-left: 4px; 6 | color: @text-color; 7 | font-size: 16px; 8 | font-style: normal; 9 | } 10 | .numberInfoTitle { 11 | margin-bottom: 16px; 12 | color: @text-color; 13 | font-size: @font-size-lg; 14 | transition: all 0.3s; 15 | } 16 | .numberInfoSubTitle { 17 | height: 22px; 18 | overflow: hidden; 19 | color: @text-color-secondary; 20 | font-size: @font-size-base; 21 | line-height: 22px; 22 | white-space: nowrap; 23 | text-overflow: ellipsis; 24 | word-break: break-all; 25 | } 26 | .numberInfoValue { 27 | margin-top: 4px; 28 | overflow: hidden; 29 | font-size: 0; 30 | white-space: nowrap; 31 | text-overflow: ellipsis; 32 | word-break: break-all; 33 | & > span { 34 | display: inline-block; 35 | height: 32px; 36 | margin-right: 32px; 37 | color: @heading-color; 38 | font-size: 24px; 39 | line-height: 32px; 40 | } 41 | .subTotal { 42 | margin-right: 0; 43 | color: @text-color-secondary; 44 | font-size: @font-size-lg; 45 | vertical-align: top; 46 | .anticon { 47 | margin-left: 4px; 48 | font-size: 12px; 49 | transform: scale(0.82); 50 | } 51 | :global { 52 | .anticon-caret-up { 53 | color: @red-6; 54 | } 55 | .anticon-caret-down { 56 | color: @green-6; 57 | } 58 | } 59 | } 60 | } 61 | } 62 | .numberInfolight { 63 | .numberInfoValue { 64 | & > span { 65 | color: @text-color; 66 | } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /Demo.WASM/Models/FormModel.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | namespace Demo.WASM.Models 4 | { 5 | public class StepFormModel 6 | { 7 | public string ReceiverAccountType { get; set; } = "ant-design@alipay.com"; 8 | public string ReceiverAccount { get; set; } = "test@example.com"; 9 | public string ReceiverName { get; set; } = "Alex"; 10 | public string PayAccount { get; set; } 11 | public string Password { get; set; } = "500"; 12 | public string Amount { get; set; } = "12345678"; 13 | } 14 | 15 | public class AdvancedFormModel 16 | { 17 | public string Name { get; set; } 18 | public string Url { get; set; } 19 | public string Owner { get; set; } 20 | public string Approver { get; set; } 21 | public DateTime?[] DateRange { get; set; } 22 | public string Type { get; set; } 23 | public string Name2 { get; set; } 24 | public string Url2 { get; set; } 25 | public string Owner2 { get; set; } 26 | public string Approver2 { get; set; } 27 | public DateTime? DateRange2 { get; set; } 28 | public string Type2 { get; set; } 29 | } 30 | 31 | public class BasicFormModel 32 | { 33 | public string Title { get; set; } 34 | public string Client { get; set; } 35 | public string Invites { get; set; } 36 | public int Disclosure { get; set; } 37 | public int Weight { get; set; } 38 | public string Standard { get; set; } 39 | public string Goal { get; set; } 40 | public DateTime?[] DateRange { get; set; } 41 | } 42 | 43 | public class Owner 44 | { 45 | public string Id { get; set; } 46 | public string Name { get; set; } 47 | } 48 | } -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/activities.json: -------------------------------------------------------------------------------- 1 | [{"id":"trend-1","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"曲丽丽","avatar":"https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png"},"group":{"name":"高逼格设计天团","link":"http://github.com/"},"project":{"name":"六月迭代","link":"http://github.com/"},"template":"在 @{group} 新建项目 @{project}"},{"id":"trend-2","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"付小小","avatar":"https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png"},"group":{"name":"高逼格设计天团","link":"http://github.com/"},"project":{"name":"六月迭代","link":"http://github.com/"},"template":"在 @{group} 新建项目 @{project}"},{"id":"trend-3","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"林东东","avatar":"https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png"},"group":{"name":"中二少女团","link":"http://github.com/"},"project":{"name":"六月迭代","link":"http://github.com/"},"template":"在 @{group} 新建项目 @{project}"},{"id":"trend-4","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"周星星","avatar":"https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png"},"project":{"name":"5 月日常迭代","link":"http://github.com/"},"template":"将 @{project} 更新至已发布状态"},{"id":"trend-5","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"朱偏右","avatar":"https://gw.alipayobjects.com/zos/rmsportal/ubnKSIfAJTxIgXOKlciN.png"},"project":{"name":"工程效能","link":"http://github.com/"},"comment":{"name":"留言","link":"http://github.com/"},"template":"在 @{project} 发布了 @{comment}"},{"id":"trend-6","updatedAt":"2020-08-26T10:21:19.719Z","user":{"name":"乐哥","avatar":"https://gw.alipayobjects.com/zos/rmsportal/jZUIxmJycoymBprLOUbT.png"},"group":{"name":"程序员日常","link":"http://github.com/"},"project":{"name":"品牌迭代","link":"http://github.com/"},"template":"在 @{group} 新建项目 @{project}"}] -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Line/Line10.razor: -------------------------------------------------------------------------------- 1 | @page "/line/line10" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Line 5 | 6 |
7 | 8 |
9 | 10 | @code{ 11 | private EChartsOption Option1; 12 | 13 | protected override void OnInitialized() 14 | { 15 | base.OnInitialized(); 16 | 17 | List> data = new List>(); 18 | double theta = 0; 19 | for (int i = 0; i <= 360; i++) 20 | { 21 | theta = Math.Round(i / 180d * Math.PI, 4); 22 | data.Add(new[] { Math.Round(Math.Sin(2*theta)*Math.Cos(2*theta), 4), i }); 23 | } 24 | 25 | Option1 = new EChartsOption() 26 | { 27 | Title = new Title() { Text = "极坐标双数值轴" }, 28 | Tooltip = new Tooltip() { Trigger = TooltipTrigger.Axis, AxisPointer = new TooltipAxisPointer() { Type = AxisPointerType.Cross } }, 29 | Legend = new Legend() { Data = new[] { "line" } }, 30 | Polar = new Polar() { Center=new List() {"50%","54%" } }, 31 | RadiusAxis = new RadiusAxis() { Min=0}, 32 | AngleAxis = new AngleAxis() { Type = AxisType.Value, StartAngle = 0 }, 33 | Series = new List() 34 | { 35 | new Line() 36 | { 37 | CoordinateSystem=CoordinateSystem.Polar, 38 | Name="line", 39 | ShowSymbol=false, 40 | Data=data 41 | } 42 | }, 43 | AnimationDuration=2000 44 | }; 45 | } 46 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/ItemStyle.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series 4 | { 5 | public class ItemStyle 6 | { 7 | /// 8 | /// 图形的颜色。 默认从全局调色盘 option.color 获取颜色。 9 | /// 点击此处查看详细设置 10 | /// 11 | public object Color { set; get; } 12 | 13 | public object Color0 { set; get; } 14 | 15 | /// 16 | /// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 17 | /// 18 | public object BorderColor { set; get; } 19 | 20 | /// 21 | /// 图形的描边颜色。支持的颜色格式同 color，不支持回调函数。 22 | /// 23 | public object BorderColor0 { set; get; } 24 | 25 | /// 26 | /// 描边线宽。为 0 时无描边。 27 | /// 28 | public int? TextBorderWidth { set; get; } 29 | 30 | /// 31 | /// 柱条的描边类型，默认为实线，支持 'solid', 'dashed', 'dotted'。 32 | /// 33 | public LineStyleType? BorderType { set; get; } 34 | 35 | /// 36 | /// 图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。 37 | /// 38 | public int? ShadowBlur { set; get; } 39 | 40 | /// 41 | /// 阴影颜色。支持的格式同color。 42 | /// 43 | public object ShadowColor { set; get; } 44 | 45 | /// 46 | /// 阴影水平方向上的偏移距离。 47 | /// 48 | public int? ShadowOffsetX { set; get; } 49 | 50 | /// 51 | /// 阴影垂直方向上的偏移距离。 52 | /// 53 | public int? ShadowOffsetY { set; get; } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/TooltipAxisPointer.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | /// 6 | /// 坐标轴指示器配置项。 7 | /// 8 | public class TooltipAxisPointer 9 | { 10 | /// 11 | /// 指示器类型。 12 | /// 13 | public AxisPointerType? Type { set; get; } 14 | 15 | /// 16 | /// 指示器的坐标轴 17 | /// 18 | public AxisPointerAxis? Axis { set; get; } 19 | 20 | /// 21 | /// 坐标轴指示器是否自动吸附到点上。默认自动判断。这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。 22 | /// 23 | public bool? Snap { set; get; } 24 | 25 | /// 26 | /// 坐标轴指示器的 z 值。控制图形的前后顺序。z值小的图形会被z值大的图形覆盖。 27 | /// 28 | public int? Z { set; get; } 29 | 30 | /// 31 | /// 坐标轴指示器的文本标签。 32 | /// 33 | public AxisPointerLabel Label { set; get; } 34 | 35 | /// 36 | /// 是否开启动画。 37 | /// 38 | public bool? Animation { set; get; } 39 | } 40 | 41 | /// 42 | /// 坐标轴指示器的文本标签 43 | /// 44 | public class AxisPointerLabel 45 | { 46 | /// 47 | /// 是否显示文本标签。如果 tooltip.axisPointer.type 设置为 'cross' 则默认显示标签，否则默认不显示。 48 | /// 49 | public bool? Show { set; get; } 50 | 51 | /// 52 | /// 文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 2 表示保留两位小数。 53 | /// 54 | public int? Precision { set; get; } 55 | 56 | /// 57 | /// 文本标签的背景颜色，默认是和 axis.axisLine.lineStyle.color 相同。 58 | /// 59 | public string BackgroundColor { set; get; } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Line/Line10.razor: -------------------------------------------------------------------------------- 1 | @page "/line/line10" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Line 5 | 6 |
7 | 8 |
9 | 10 | @code{ 11 | private EChartsOption Option1; 12 | 13 | protected override void OnInitialized() 14 | { 15 | base.OnInitialized(); 16 | 17 | List> data = new List>(); 18 | double theta = 0; 19 | for (int i = 0; i <= 360; i++) 20 | { 21 | theta = Math.Round(i / 180d * Math.PI, 4); 22 | data.Add(new[] { Math.Round(Math.Sin(2*theta)*Math.Cos(2*theta), 4), i }); 23 | } 24 | 25 | Option1 = new EChartsOption() 26 | { 27 | Title = new Rakor.Blazor.ECharts.Option.Title() { Text = "极坐标双数值轴" }, 28 | Tooltip = new Rakor.Blazor.ECharts.Option.Tooltip() { Trigger = TooltipTrigger.Axis, AxisPointer = new TooltipAxisPointer() { Type = AxisPointerType.Cross } }, 29 | Legend = new Rakor.Blazor.ECharts.Option.Legend() { Data = new[] { "line" } }, 30 | Polar = new Polar() { Center=new List() {"50%","54%" } }, 31 | RadiusAxis = new RadiusAxis() { Min=0}, 32 | AngleAxis = new AngleAxis() { Type = AxisType.Value, StartAngle = 0 }, 33 | Series = new List() 34 | { 35 | new Line() 36 | { 37 | CoordinateSystem=CoordinateSystem.Polar, 38 | Name="line", 39 | ShowSymbol=false, 40 | Data=data 41 | } 42 | }, 43 | AnimationDuration=2000 44 | }; 45 | } 46 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Color.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | using System.Collections.Generic; 3 | 4 | namespace Rakor.Blazor.ECharts.Option 5 | { 6 | #region 渐变色 7 | /// 8 | /// 渐变色。 9 | /// 10 | public class GradationColor 11 | { 12 | /// 13 | /// 渐变类型 14 | /// 15 | public ColorType? Type { set; get; } 16 | 17 | /// 18 | /// 范围从 0 - 1 19 | /// 20 | public double? X { set; get; } 21 | 22 | /// 23 | /// 范围从 0 - 1 24 | /// 25 | public double? Y { set; get; } 26 | 27 | /// 28 | /// 范围从 0 - 1 29 | /// 30 | public double? X2 { set; get; } 31 | 32 | /// 33 | /// 范围从 0 - 1 34 | /// 35 | public double? Y2 { set; get; } 36 | 37 | public List ColorStops { set; get; } 38 | 39 | /// 40 | /// 41 | /// 42 | public bool? Global { set; get; } 43 | } 44 | 45 | public class ColorStops 46 | { 47 | /// 48 | /// 颜色，例：red 49 | /// 50 | public string Color { set; get; } 51 | 52 | public double? Offset { set; get; } 53 | } 54 | #endregion 55 | 56 | #region 纹理填充 57 | public class FillColor 58 | { 59 | /// 60 | /// 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串 61 | /// 62 | public object Image { set; get; } 63 | 64 | /// 65 | /// 是否平铺, 可以是 'repeat-x', 'repeat-y', 'no-repeat' 66 | /// 67 | public FillColorRepeat? Repeat { set; get; } 68 | } 69 | #endregion 70 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/MarkPoint.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | using System.Collections.Generic; 3 | 4 | namespace Rakor.Blazor.ECharts.Option.Series 5 | { 6 | /// 7 | /// 图表标注。 8 | /// 9 | public class MarkPoint 10 | { 11 | 12 | /// 13 | /// 标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。 14 | /// 点击此处查看详细设置 15 | /// 16 | public List Data { set; get; } 17 | 18 | public Label Label { set; get; } 19 | 20 | public Tooltip Tooltip { set; get; } 21 | } 22 | /// 23 | /// 标注的数据数组。每个数组项是一个对象，有下面几种方式指定标注的位置。 24 | /// 点击此处查看详细设置 25 | /// 26 | public class MarkPointData 27 | { 28 | /// 29 | /// 标注名称。 30 | /// 31 | public string Name { set; get; } 32 | 33 | /// 34 | /// 特殊的标注类型，用于标注最大值最小值等。 35 | /// 36 | public MarkPointDataType? Type { set; get; } 37 | 38 | /// 39 | /// 标注值，可以不设。 40 | /// 41 | public int? Value { set; get; } 42 | 43 | /// 44 | /// 45 | /// 46 | public int? XAxis { set; get; } 47 | 48 | /// 49 | /// 50 | /// 51 | public int? YAxis { set; get; } 52 | 53 | /// 54 | /// 在使用 type 时有效，用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称，例如折线图时可以是x、angle等、candlestick 图时可以是open、close等维度名称。 55 | /// 56 | public string ValueDim { set; get; } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Tooltip.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | 3 | namespace Rakor.Blazor.ECharts.Option 4 | { 5 | /// 6 | /// 提示框组件。 7 | /// 8 | public class Tooltip 9 | { 10 | /// 11 | /// 是否显示提示框组件，包括提示框浮层和 axisPointer 12 | /// 13 | public bool? Show { set; get; } 14 | 15 | /// 16 | /// 触发类型。 17 | /// 18 | public TooltipTrigger? Trigger { set; get; } 19 | 20 | /// 21 | /// 坐标轴指示器配置项。 22 | /// 23 | public TooltipAxisPointer AxisPointer { set; get; } 24 | 25 | /// 26 | /// 提示框浮层的位置，默认不设置时位置会跟随鼠标的位置。 27 | /// 点击此处查看详细设置 28 | /// 29 | public object Position { set; get; } 30 | 31 | /// 32 | /// 提示框浮层内容格式器，支持字符串模板和回调函数两种形式。 33 | /// 点击此处查看详细设置 34 | /// 35 | public object Formatter { set; get; } 36 | 37 | /// 38 | /// 提示框浮层的背景颜色。 39 | /// 40 | public object BackgroundColor { set; get; } 41 | 42 | /// 43 | /// 提示框浮层的边框宽。 44 | /// 45 | public int? BorderWidth { set; get; } 46 | 47 | /// 48 | /// 提示框浮层的边框颜色。 49 | /// 50 | public object BorderColor { set; get; } 51 | 52 | /// 53 | /// 提示框浮层内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。 54 | /// 55 | public object Padding { set; get; } 56 | 57 | public TextStyle TextStyle { set; get; } 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/StepForm.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .card { 4 | margin-bottom: 24px; 5 | } 6 | 7 | .heading { 8 | margin: 0 0 16px 0; 9 | font-size: 14px; 10 | line-height: 22px; 11 | } 12 | 13 | //todo: global 14 | .steps.ant-steps { 15 | max-width: 750px; 16 | margin: 16px auto; 17 | } 18 | 19 | .errorIcon { 20 | margin-right: 24px; 21 | color: @error-color; 22 | cursor: pointer; 23 | span.anticon { 24 | margin-right: 4px; 25 | } 26 | } 27 | 28 | .errorPopover { 29 | :global { 30 | .ant-popover-inner-content { 31 | min-width: 256px; 32 | max-height: 290px; 33 | padding: 0; 34 | overflow: auto; 35 | } 36 | } 37 | } 38 | 39 | .errorListItem { 40 | padding: 8px 16px; 41 | list-style: none; 42 | border-bottom: 1px solid @border-color-split; 43 | cursor: pointer; 44 | transition: all 0.3s; 45 | &:hover { 46 | background: @item-active-bg; 47 | } 48 | &:last-child { 49 | border: 0; 50 | } 51 | .errorIcon { 52 | float: left; 53 | margin-top: 4px; 54 | margin-right: 12px; 55 | padding-bottom: 22px; 56 | color: @error-color; 57 | } 58 | .errorField { 59 | margin-top: 2px; 60 | color: @text-color-secondary; 61 | font-size: 12px; 62 | } 63 | } 64 | 65 | .editable { 66 | td { 67 | padding-top: 13px !important; 68 | padding-bottom: 12.5px !important; 69 | } 70 | } 71 | 72 | // custom footer for fixed footer toolbar 73 | .advancedForm + div { 74 | padding-bottom: 64px; 75 | } 76 | 77 | .advancedForm { 78 | :global { 79 | .ant-form .ant-row:last-child .ant-form-item { 80 | margin-bottom: 24px; 81 | } 82 | .ant-table td { 83 | transition: none !important; 84 | } 85 | } 86 | } 87 | 88 | .optional { 89 | color: @text-color-secondary; 90 | font-style: normal; 91 | } 92 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Monitor/Components/ActiveChart/ActiveChart.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Monitor 2 | @using Demo.WASM.Models 3 | @inherits AntDomComponentBase 4 | 5 |
6 | 7 |
8 | 9 |
10 | @if (ActiveData != null) 11 | { 12 |
13 |
14 |

@(ActiveData.OrderBy(x => x.Y).Last().Y + 200) 亿元

15 |

@(ActiveData.OrderBy(x=>x.Y).ToArray()[ActiveData.Length/2].Y) 亿元

16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 | 25 |
26 | 00:00 27 | @ActiveData[ActiveData.Length/2].X 28 | @ActiveData.Last().X 29 |
30 | } 31 | 32 |
33 | 34 | @code 35 | { 36 | public ChartDataItem[] ActiveData { get; set; } 37 | 38 | protected override void OnInitialized() 39 | { 40 | base.OnInitializedAsync(); 41 | ActiveData = GetActiveData(); 42 | } 43 | 44 | private ChartDataItem[] GetActiveData() 45 | { 46 | var activeData = new ChartDataItem[24]; 47 | var random = new Random(); 48 | for (var i = 0; i < 24; i++) 49 | { 50 | activeData[i] = new ChartDataItem 51 | { 52 | X = $"{i.ToString().PadRight(2, '0')}: 00", 53 | Y = (int)(Math.Floor(random.NextDouble() * 200) + i * 50) 54 | }; 55 | } 56 | return activeData; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/Pie/Pie.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | 3 | namespace Rakor.Blazor.ECharts.Option.Series.Pie 4 | { 5 | /// 6 | /// 饼图 7 | /// 8 | public class Pie : SeriesBase 9 | { 10 | public Pie() : base("pie") { } 11 | 12 | /// 13 | /// 饼图的半径。可以为如下类型： 14 | /// number：直接指定外半径值。 15 | /// string：例如，'20%'，表示外半径为可视区尺寸（容器高宽中较小一项）的 20% 长度。 16 | /// Array：数组的第一项是内半径，第二项是外半径。每一项遵从上述 number string 的描述。 17 | /// 18 | public object Radius { set; get; } 19 | 20 | /// 21 | /// 是否启用防止标签重叠策略，默认开启，在标签拥挤重叠的情况下会挪动各个标签的位置，防止标签间的重叠。 22 | /// 如果不需要开启该策略，例如圆环图这个例子中需要强制所有标签放在中心位置，可以将该值设为 false。 23 | /// 24 | public bool? AvoidLabelOverlap { set; get; } 25 | 26 | /// 27 | /// 饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等，label选项在 ECharts 2.x 中放置于itemStyle下，在 ECharts 3 中为了让整个配置项结构更扁平合理，label 被拿出来跟 itemStyle 平级，并且跟 itemStyle 一样拥有 emphasis 状态。 28 | /// 29 | public Label Label { set; get; } 30 | 31 | /// 32 | /// 标签的视觉引导线样式，在 label 位置 设置为'outside'的时候会显示视觉引导线。 33 | /// 34 | public LabelLine LabelLine { set; get; } 35 | 36 | public object Center { set; get; } 37 | 38 | /// 39 | /// 高亮的扇区和标签样式 40 | /// 41 | public Emphasis Emphasis { set; get; } 42 | 43 | /// 44 | /// 选中模式，表示是否支持多个选中，默认关闭，支持布尔值和字符串，字符串取值可选'single'，'multiple'，分别表示单选还是多选。 45 | /// 可使用枚举值 SelectedMode 46 | /// 47 | public object SelectedMode { set; get; } 48 | 49 | public List Data { set; get; } 50 | } 51 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Form/StepForm/Components/Step1/Step1.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Form 2 | 3 |
9 | 10 | 13 | 14 | 15 | 16 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 31 | 34 | 35 |
36 | 37 |
38 |

说明

39 |

转账到支付宝账户

40 |

41 | 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 42 |

43 |

转账到银行卡

44 |

45 | 如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。如果需要，这里可以放一些关于产品的常见问题说明。 46 |

47 |
48 | -------------------------------------------------------------------------------- /Demo.WASM/Components/GlobalHeader/RightContent.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Components 2 | @inherits AntDomComponentBase 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 24 | 29 | 34 | 39 | 40 | 41 | 42 | 45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Radar.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | using System.Collections.Generic; 3 | 4 | namespace Rakor.Blazor.ECharts.Option 5 | { 6 | public class Radar 7 | { 8 | /// 9 | /// 雷达图每个指示器名称的配置项。 10 | /// 11 | public RadarName Name { set; get; } 12 | 13 | /// 14 | /// 雷达图的指示器，用来指定雷达图中的多个变量（维度） 15 | /// 16 | public List Indicator { set; get; } 17 | 18 | /// 19 | /// 雷达图绘制类型 20 | /// 21 | public RadarShape? Shape { set; get; } 22 | 23 | /// 24 | /// 指示器轴的分割段数。 25 | /// 26 | public int? SplitNumber { set; get; } 27 | 28 | /// 29 | /// 坐标轴在 grid 区域中的分隔线。 30 | /// 31 | public SplitLine SplitLine { set; get; } 32 | 33 | /// 34 | /// 坐标轴在 grid 区域中的分隔区域，默认不显示。 35 | /// 36 | public SplitArea SplitArea { set; get; } 37 | 38 | /// 39 | /// 坐标轴轴线相关设置。 40 | /// 41 | public AxisLine AxisLine { set; get; } 42 | } 43 | /// 44 | /// 雷达图每个指示器名称的配置项。 45 | /// 46 | public class RadarName 47 | { 48 | public TextStyle TextStyle { set; get; } 49 | } 50 | public class RadarIndicator 51 | { 52 | /// 53 | /// 指示器名称。 54 | /// 55 | public string Name { set; get; } 56 | 57 | /// 58 | /// 指示器的最大值，可选，建议设置 59 | /// 60 | public int? Max { set; get; } 61 | 62 | /// 63 | /// 指示器的最小值，可选，默认为 0。 64 | /// 65 | public int? Min { set; get; } 66 | 67 | /// 68 | /// 标签特定的颜色。 69 | /// 70 | public string Color { set; get; } 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Demo.WASM/wwwroot/data/notices.json: -------------------------------------------------------------------------------- 1 | [{"id":"000000001","avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png","title":"你收到了 14 份新周报","datetime":"2017-08-09","type":"notification"},{"id":"000000002","avatar":"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png","title":"你推荐的 曲妮妮 已通过第三轮面试","datetime":"2017-08-08","type":"notification"},{"id":"000000003","avatar":"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png","title":"这种模板可以区分多种通知类型","datetime":"2017-08-07","read":true,"type":"notification"},{"id":"000000004","avatar":"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png","title":"左侧图标用于区分不同的类型","datetime":"2017-08-07","type":"notification"},{"id":"000000005","avatar":"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png","title":"内容不要超过两行字，超出时自动截断","datetime":"2017-08-07","type":"notification"},{"id":"000000006","avatar":"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg","title":"曲丽丽 评论了你","description":"描述信息描述信息描述信息","datetime":"2017-08-07","type":"message","clickClose":true},{"id":"000000007","avatar":"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg","title":"朱偏右 回复了你","description":"这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像","datetime":"2017-08-07","type":"message","clickClose":true},{"id":"000000008","avatar":"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg","title":"标题","description":"这种模板用于提醒谁与你发生了互动，左侧放『谁』的头像","datetime":"2017-08-07","type":"message","clickClose":true},{"id":"000000009","title":"任务名称","description":"任务需要在 2017-01-12 20:00 前启动","extra":"未开始","status":"todo","type":"event"},{"id":"000000010","title":"第三方紧急代码变更","description":"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务","extra":"马上到期","status":"urgent","type":"event"},{"id":"000000011","title":"信息安全考试","description":"指派竹尔于 2017-01-09 前完成更新并发布","extra":"已耗时 8 天","status":"doing","type":"event"},{"id":"000000012","title":"ABCD 版本发布","description":"冠霖提交于 2017-01-06，需在 2017-01-07 前完成代码变更任务","extra":"进行中","status":"processing","type":"event"}] -------------------------------------------------------------------------------- /Demo.WASM/Extensions/DateTimeExtension.cs: -------------------------------------------------------------------------------- 1 | using System; 2 | 3 | namespace Demo.WASM 4 | { 5 | public static class DateTimeExtension 6 | { 7 | private const int Second = 1; 8 | private const int Minute = 60 * Second; 9 | private const int Hour = 60 * Minute; 10 | private const int Day = 24 * Hour; 11 | private const int Month = 30 * Day; 12 | 13 | // todo: Need to be localized 14 | public static string ToFriendlyDisplay(this DateTime dateTime) 15 | { 16 | var ts = DateTime.Now - dateTime; 17 | var delta = ts.TotalSeconds; 18 | if (delta < 0) 19 | { 20 | return "not yet"; 21 | } 22 | if (delta < 1 * Minute) 23 | { 24 | return ts.Seconds == 1 ? "1秒前" : ts.Seconds + "秒前"; 25 | } 26 | if (delta < 2 * Minute) 27 | { 28 | return "1分钟之前"; 29 | } 30 | if (delta < 45 * Minute) 31 | { 32 | return ts.Minutes + "分钟"; 33 | } 34 | if (delta < 90 * Minute) 35 | { 36 | return "1小时前"; 37 | } 38 | if (delta < 24 * Hour) 39 | { 40 | return ts.Hours + "小时前"; 41 | } 42 | if (delta < 48 * Hour) 43 | { 44 | return "昨天"; 45 | } 46 | if (delta < 30 * Day) 47 | { 48 | return ts.Days + " 天之前"; 49 | } 50 | if (delta < 12 * Month) 51 | { 52 | var months = Convert.ToInt32(Math.Floor((double)ts.Days / 30)); 53 | return months <= 1 ? "一个月之前" : months + "月之前"; 54 | } 55 | else 56 | { 57 | var years = Convert.ToInt32(Math.Floor((double)ts.Days / 365)); 58 | return years <= 1 ? "一年前" : years + "年前"; 59 | } 60 | } 61 | } 62 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/TagSelect/TagSelect.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Collections.Generic; 2 | using Microsoft.AspNetCore.Components; 3 | 4 | namespace Demo.WASM.Pages.List 5 | { 6 | public partial class TagSelect 7 | { 8 | private readonly IList _options = new List(); 9 | private bool _checkedAll; 10 | private bool _expand = false; 11 | 12 | [Parameter] public bool Expandable { get; set; } 13 | 14 | [Parameter] public bool HideCheckAll { get; set; } 15 | 16 | [Parameter] public string SelectAllText { get; set; } = "全部"; 17 | 18 | [Parameter] public string CollapseText { get; set; } = "收起"; 19 | 20 | [Parameter] public string ExpandText { get; set; } = "展开"; 21 | 22 | [Parameter] public IList Value { get; set; } 23 | 24 | [Parameter] public RenderFragment ChildContent { get; set; } 25 | 26 | protected override void OnInitialized() 27 | { 28 | base.OnInitialized(); 29 | SetClassMap(); 30 | } 31 | 32 | protected void SetClassMap() 33 | { 34 | ClassMapper 35 | .Clear() 36 | .Add("tagSelect") 37 | .If("hasExpandTag", () => Expandable) 38 | .If("expanded", () => _expand); 39 | } 40 | 41 | private void HandleExpand() 42 | { 43 | _expand = !_expand; 44 | } 45 | 46 | private void HandleCheckedChange(bool isChecked) 47 | { 48 | _checkedAll = isChecked; 49 | foreach (var option in _options) option.Check(_checkedAll); 50 | } 51 | 52 | public void AddOption(TagSelectOption option) 53 | { 54 | _options.Add(option); 55 | } 56 | 57 | public void SelectItem(string value) 58 | { 59 | Value?.Add(value); 60 | } 61 | 62 | public void UnSelectItem(string value) 63 | { 64 | Value?.Remove(value); 65 | } 66 | } 67 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/Charts/Pie/Pie.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .pie { 4 | position: relative; 5 | .chart { 6 | position: relative; 7 | } 8 | &.hasLegend .chart { 9 | width: ~'calc(100% - 240px)'; 10 | } 11 | .legend { 12 | position: absolute; 13 | top: 50%; 14 | right: 0; 15 | min-width: 200px; 16 | margin: 0 20px; 17 | padding: 0; 18 | list-style: none; 19 | transform: translateY(-50%); 20 | li { 21 | height: 22px; 22 | margin-bottom: 16px; 23 | line-height: 22px; 24 | cursor: pointer; 25 | &:last-child { 26 | margin-bottom: 0; 27 | } 28 | } 29 | } 30 | .dot { 31 | position: relative; 32 | top: -1px; 33 | display: inline-block; 34 | width: 8px; 35 | height: 8px; 36 | margin-right: 8px; 37 | border-radius: 8px; 38 | } 39 | .line { 40 | display: inline-block; 41 | width: 1px; 42 | height: 16px; 43 | margin-right: 8px; 44 | background-color: @border-color-split; 45 | } 46 | .legendTitle { 47 | color: @text-color; 48 | } 49 | .percent { 50 | color: @text-color-secondary; 51 | } 52 | .value { 53 | position: absolute; 54 | right: 0; 55 | } 56 | .title { 57 | margin-bottom: 8px; 58 | } 59 | .total { 60 | position: absolute; 61 | top: 50%; 62 | left: 50%; 63 | max-height: 62px; 64 | text-align: center; 65 | transform: translate(-50%, -50%); 66 | & > h4 { 67 | height: 22px; 68 | margin-bottom: 8px; 69 | color: @text-color-secondary; 70 | font-weight: normal; 71 | font-size: 14px; 72 | line-height: 22px; 73 | } 74 | & > p { 75 | display: block; 76 | height: 32px; 77 | color: @heading-color; 78 | font-size: 1.2em; 79 | line-height: 32px; 80 | white-space: nowrap; 81 | } 82 | } 83 | } 84 | 85 | .legendBlock { 86 | &.hasLegend .chart { 87 | width: 100%; 88 | margin: 0 0 32px 0; 89 | } 90 | .legend { 91 | position: relative; 92 | transform: none; 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/Search/Applications/Components/StandardFormRow/StandardFormRow.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | 3 | .standardFormRow { 4 | display: flex; 5 | width: 100%; 6 | margin-bottom: 16px; 7 | padding-bottom: 16px; 8 | border-bottom: 1px dashed @border-color-split; 9 | //:global { 10 | .ant-form-item, 11 | .ant-legacy-form-item { 12 | margin-right: 24px; 13 | } 14 | .ant-form-item-label, 15 | .ant-legacy-form-item-label { 16 | label { 17 | margin-right: 0; 18 | color: @text-color; 19 | } 20 | } 21 | .ant-form-item-label, 22 | .ant-legacy-form-item-label, 23 | .ant-form-item-control, 24 | .ant-legacy-form-item-control { 25 | padding: 0; 26 | line-height: 32px; 27 | } 28 | //} 29 | .label { 30 | flex: 0 0 auto; 31 | margin-right: 24px; 32 | color: @heading-color; 33 | font-size: @font-size-base; 34 | text-align: right; 35 | & > span { 36 | display: inline-block; 37 | height: 32px; 38 | line-height: 32px; 39 | &::after { 40 | content: '：'; 41 | } 42 | } 43 | } 44 | .content { 45 | flex: 1 1 0; 46 | :global { 47 | .ant-form-item, 48 | .ant-legacy-form-item { 49 | &:last-child { 50 | display: block; 51 | margin-right: 0; 52 | } 53 | } 54 | } 55 | } 56 | } 57 | 58 | .standardFormRowLast { 59 | margin-bottom: 0; 60 | padding-bottom: 0; 61 | border: none; 62 | } 63 | 64 | .standardFormRowBlock { 65 | :global { 66 | .ant-form-item, 67 | .ant-legacy-form-item, 68 | div.ant-form-item-control-wrapper, 69 | div.ant-legacy-form-item-control-wrapper { 70 | display: block; 71 | } 72 | } 73 | } 74 | 75 | .standardFormRowGrid { 76 | //:global { 77 | .ant-form-item, 78 | .ant-legacy-form-item, 79 | div.ant-form-item-control-wrapper, 80 | div.ant-legacy-form-item-control-wrapper { 81 | display: block; 82 | } 83 | .ant-form-item-label, 84 | .ant-legacy-form-item-label { 85 | float: left; 86 | } 87 | //} 88 | } 89 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts/Option/Series/MarkLine.cs: -------------------------------------------------------------------------------- 1 | using Rakor.Blazor.ECharts.Option.Enum; 2 | using System.Collections.Generic; 3 | 4 | namespace Rakor.Blazor.ECharts.Option.Series 5 | { 6 | /// 7 | /// 图表标线。 8 | /// 9 | public class MarkLine 10 | { 11 | /// 12 | /// 图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。 13 | /// 14 | public bool? Silent { set; get; } 15 | 16 | /// 17 | /// 标线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定，具体格式见 data.symbol。 18 | /// 19 | public object Symbol { set; get; } 20 | 21 | /// 22 | /// 标线的数据数组。 23 | /// 24 | public List Data { set; get; } 25 | } 26 | public class MarkLineData 27 | { 28 | public string Name { set; get; } 29 | 30 | public object YAxis { set; get; } 31 | 32 | public object X { set; get; } 33 | 34 | public string Symbol { set; get; } 35 | 36 | public Sampling? Type { set; get; } 37 | 38 | public MarkLineDataLabel Label { set; get; } 39 | 40 | /// 41 | /// 在使用 type 时有效，用于指定在哪个维度上指定最大值最小值。这可以是维度的直接名称，例如折线图时可以是x、angle等、candlestick 图时可以是open、close等维度名称。 42 | /// 43 | public string ValueDim { set; get; } 44 | 45 | /// 46 | /// 起点标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。 47 | /// 48 | public object SymbolSize { set; get; } 49 | 50 | public Emphasis Emphasis { set; get; } 51 | } 52 | 53 | public class MarkLineDataLabel 54 | { 55 | public bool? Show { set; get; } 56 | 57 | /// 58 | /// 标签位置 59 | /// 60 | public Location? Position { set; get; } 61 | 62 | /// 63 | /// 标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 \n 换行。 64 | /// 点击此处查看详细设置 65 | /// 66 | public object Formatter { set; get; } 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/User/Register/Register.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.User 2 | @layout UserLayout 3 | @page "/user/register" 4 | 5 |
6 |
7 |

注册

8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/List/CardList/CardList.razor.less: -------------------------------------------------------------------------------- 1 | @import '~antd/es/style/themes/default.less'; 2 | @import './utils/utils.less'; 3 | 4 | .cardList { 5 | .card { 6 | //:global { 7 | .ant-card-meta-title { 8 | margin-bottom: 12px; 9 | & > a { 10 | display: inline-block; 11 | max-width: 100%; 12 | color: @heading-color; 13 | } 14 | } 15 | .ant-card-body:hover { 16 | .ant-card-meta-title > a { 17 | color: @primary-color; 18 | } 19 | } 20 | //} 21 | } 22 | .item { 23 | height: 64px; 24 | } 25 | 26 | //:global { 27 | .ant-list .ant-list-item-content-single { 28 | max-width: 100%; 29 | } 30 | //} 31 | } 32 | 33 | .extraImg { 34 | width: 155px; 35 | margin-top: -20px; 36 | text-align: center; 37 | img { 38 | width: 100%; 39 | } 40 | } 41 | 42 | .newButton { 43 | width: 100%; 44 | height: 201px; 45 | color: @text-color-secondary; 46 | background-color: @component-background; 47 | border-color: @border-color-base; 48 | } 49 | 50 | .cardAvatar { 51 | width: 48px; 52 | height: 48px; 53 | border-radius: 48px; 54 | } 55 | 56 | .cardDescription { 57 | .textOverflowMulti(); 58 | } 59 | 60 | .pageHeaderContent__b__1 { 61 | position: relative; 62 | } 63 | 64 | .contentLink { 65 | margin-top: 16px; 66 | a { 67 | margin-right: 32px; 68 | img { 69 | width: 24px; 70 | } 71 | } 72 | img { 73 | margin-right: 8px; 74 | vertical-align: middle; 75 | } 76 | } 77 | 78 | @media screen and (max-width: @screen-lg) { 79 | .contentLink { 80 | a { 81 | margin-right: 16px; 82 | } 83 | } 84 | } 85 | @media screen and (max-width: @screen-md) { 86 | .extraImg { 87 | display: none; 88 | } 89 | } 90 | 91 | @media screen and (max-width: @screen-sm) { 92 | .pageHeaderContent__b__1 { 93 | padding-bottom: 30px; 94 | } 95 | .contentLink { 96 | position: absolute; 97 | bottom: -4px; 98 | left: 0; 99 | width: 1000px; 100 | a { 101 | margin-right: 16px; 102 | } 103 | img { 104 | margin-right: 4px; 105 | } 106 | } 107 | } 108 | -------------------------------------------------------------------------------- /Demo.WASM/Demo.WASM.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net5.0 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | ./ 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Components/SalesCard.razor.cs: -------------------------------------------------------------------------------- 1 | using System.Threading.Tasks; 2 | using AntDesign.Charts; 3 | using Demo.WASM.Services; 4 | using Microsoft.AspNetCore.Components; 5 | 6 | namespace Demo.WASM.Pages.Dashboard.Analysis 7 | { 8 | public partial class SalesCard 9 | { 10 | private readonly ColumnConfig _saleChartConfig = new ColumnConfig 11 | { 12 | Title = new AntDesign.Charts.Title 13 | { 14 | Visible = true, 15 | Text = "Stores Sales Trend" 16 | }, 17 | ForceFit = true, 18 | Padding = "auto", 19 | XField = "x", 20 | YField = "y" 21 | }; 22 | 23 | private readonly ColumnConfig _visitChartConfig = new ColumnConfig 24 | { 25 | Title = new AntDesign.Charts.Title 26 | { 27 | Visible = true, 28 | Text = "Visits Trend" 29 | }, 30 | ForceFit = true, 31 | Padding = "auto", 32 | XField = "x", 33 | YField = "y" 34 | }; 35 | 36 | private IChartComponent _saleChart; 37 | private IChartComponent _visitChart; 38 | 39 | [Parameter] 40 | public SaleItem[] Items { get; set; } = 41 | { 42 | new SaleItem {Id = 1, Title = "Gongzhuan No.0 shop", Total = "323,234"}, 43 | new SaleItem {Id = 2, Title = "Gongzhuan No.1 shop", Total = "323,234"}, 44 | new SaleItem {Id = 3, Title = "Gongzhuan No.2 shop", Total = "323,234"}, 45 | new SaleItem {Id = 4, Title = "Gongzhuan No.3 shop", Total = "323,234"}, 46 | new SaleItem {Id = 5, Title = "Gongzhuan No.4 shop", Total = "323,234"}, 47 | new SaleItem {Id = 6, Title = "Gongzhuan No.5 shop", Total = "323,234"}, 48 | new SaleItem {Id = 7, Title = "Gongzhuan No.6 shop", Total = "323,234"} 49 | }; 50 | 51 | [Inject] public IChartService ChartService { get; set; } 52 | 53 | protected override async Task OnInitializedAsync() 54 | { 55 | await base.OnInitializedAsync(); 56 | await OnTabChanged("1"); 57 | } 58 | 59 | private async Task OnTabChanged(string activeKey) 60 | { 61 | var data = await ChartService.GetSalesDataAsync(); 62 | if (activeKey == "1") 63 | await _saleChart.ChangeData(data); 64 | else 65 | await _visitChart.ChangeData(data); 66 | } 67 | } 68 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Bar/Bar2.razor: -------------------------------------------------------------------------------- 1 | @page "/bar/bar2" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Bar 5 | @using Rakor.Blazor.ECharts 6 | 7 |
8 | 9 |
10 | 11 | @code{ 12 | private EChartsOption Option1; 13 | 14 | protected override void OnInitialized() 15 | { 16 | base.OnInitialized(); 17 | 18 | List xAxisData = new List(); 19 | List data1 = new List(); 20 | List data2 = new List(); 21 | for (int i = 0; i < 100; i++) 22 | { 23 | xAxisData.Add("类目" + i); 24 | data1.Add(Math.Round((Math.Sin(i / 5) * (i / 5 - 10) + i / 6) * 5, 4)); 25 | data2.Add(Math.Round((Math.Cos(i / 5) * (i / 5 - 10) + i / 6) * 5, 4)); 26 | } 27 | 28 | Option1 = new EChartsOption() 29 | { 30 | Title = new Title() { Text = "柱状图动画延迟" }, 31 | Legend = new Legend() { Align = Align1.Left, Data = new[] { "bar", "bar2" } }, 32 | Toolbox = new Toolbox() 33 | { 34 | Feature = new Feature() 35 | { 36 | MagicType = new MagicType() { Type = new List() { MagicTypeType.Stack, MagicTypeType.Tiled } }, 37 | DataView = new DataView(), 38 | SaveAsImage = new SaveAsImage() { PixelRatio = 2 } 39 | } 40 | }, 41 | Tooltip = new Tooltip(), 42 | XAxis = new List() 43 | { 44 | new XAxis(){Data=xAxisData,Silent=false,SplitLine=new SplitLine(){Show=false } } 45 | }, 46 | YAxis = new List() { new YAxis() }, 47 | Series = new List() 48 | { 49 | new Bar() 50 | { 51 | Name="bar", 52 | Data=data1, 53 | AnimationDelay="function (idx) {return idx * 10;}".ToJRaw() 54 | }, 55 | new Bar() 56 | { 57 | Name="bar2", 58 | Data=data2, 59 | AnimationDelay="function (idx) {return idx * 10 + 100;}".ToJRaw() 60 | } 61 | }, 62 | AnimationEasing = "elasticOut", 63 | AnimationDelayUpdate = "function (idx) {return idx * 5;}".ToJRaw() 64 | }; 65 | } 66 | } -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Startup.cs: -------------------------------------------------------------------------------- 1 | using Element; 2 | using Microsoft.AspNetCore.Builder; 3 | using Microsoft.AspNetCore.Components; 4 | using Microsoft.AspNetCore.Hosting; 5 | using Microsoft.Extensions.Configuration; 6 | using Microsoft.Extensions.DependencyInjection; 7 | using Microsoft.Extensions.Hosting; 8 | using System; 9 | using System.Linq; 10 | using System.Net.Http; 11 | 12 | namespace Demo 13 | { 14 | public class Startup 15 | { 16 | public Startup(IConfiguration configuration) 17 | { 18 | Configuration = configuration; 19 | } 20 | 21 | public IConfiguration Configuration { get; } 22 | 23 | // This method gets called by the runtime. Use this method to add services to the container. 24 | // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940 25 | public void ConfigureServices(IServiceCollection services) 26 | { 27 | services.AddRazorPages(); 28 | services.AddServerSideBlazor(); 29 | if (!services.Any(x => x.ServiceType == typeof(HttpClient))) 30 | { 31 | // Setup HttpClient for server side in a client side compatible fashion 32 | services.AddScoped(s => 33 | { 34 | // Creating the URI helper needs to wait until the JS Runtime is initialized, so defer it. 35 | var uriHelper = s.GetRequiredService(); 36 | return new HttpClient 37 | { 38 | BaseAddress = new Uri(uriHelper.BaseUri) 39 | }; 40 | }); 41 | } 42 | services.AddElementServices(); 43 | } 44 | 45 | // This method gets called by the runtime. Use this method to configure the HTTP request pipeline. 46 | public void Configure(IApplicationBuilder app, IWebHostEnvironment env) 47 | { 48 | if (env.IsDevelopment()) 49 | { 50 | app.UseDeveloperExceptionPage(); 51 | } 52 | else 53 | { 54 | app.UseExceptionHandler("/Error"); 55 | } 56 | 57 | app.UseStaticFiles(); 58 | 59 | app.UseRouting(); 60 | 61 | app.UseEndpoints(endpoints => 62 | { 63 | endpoints.MapDefaultControllerRoute(); 64 | endpoints.MapBlazorHub(); 65 | endpoints.MapFallbackToPage("/_Host"); 66 | }); 67 | } 68 | } 69 | } 70 | -------------------------------------------------------------------------------- /Demo.WASM/Pages/Bar/Bar2.razor: -------------------------------------------------------------------------------- 1 | @page "/bar/bar2" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Enum 4 | @using Rakor.Blazor.ECharts.Option.Series.Bar 5 | @using Rakor.Blazor.ECharts 6 | 7 |
8 | 9 |
10 | 11 | @code{ 12 | private EChartsOption Option1; 13 | 14 | protected override void OnInitialized() 15 | { 16 | base.OnInitialized(); 17 | 18 | List xAxisData = new List(); 19 | List data1 = new List(); 20 | List data2 = new List(); 21 | for (int i = 0; i < 100; i++) 22 | { 23 | xAxisData.Add("类目" + i); 24 | data1.Add(Math.Round((Math.Sin(i / 5) * (i / 5 - 10) + i / 6) * 5, 4)); 25 | data2.Add(Math.Round((Math.Cos(i / 5) * (i / 5 - 10) + i / 6) * 5, 4)); 26 | } 27 | 28 | Option1 = new EChartsOption() 29 | { 30 | Title = new Rakor.Blazor.ECharts.Option.Title() { Text = "柱状图动画延迟" }, 31 | Legend = new Rakor.Blazor.ECharts.Option.Legend() { Align = Align1.Left, Data = new[] { "bar", "bar2" } }, 32 | Toolbox = new Toolbox() 33 | { 34 | Feature = new Feature() 35 | { 36 | MagicType = new MagicType() { Type = new List() { MagicTypeType.Stack, MagicTypeType.Tiled } }, 37 | DataView = new DataView(), 38 | SaveAsImage = new SaveAsImage() { PixelRatio = 2 } 39 | } 40 | }, 41 | Tooltip = new Rakor.Blazor.ECharts.Option.Tooltip(), 42 | XAxis = new List() 43 | { 44 | new XAxis(){Data=xAxisData,Silent=false,SplitLine=new SplitLine(){Show=false } } 45 | }, 46 | YAxis = new List() { new YAxis() }, 47 | Series = new List() 48 | { 49 | new Bar() 50 | { 51 | Name="bar", 52 | Data=data1, 53 | AnimationDelay="function (idx) {return idx * 10;}".ToJRaw() 54 | }, 55 | new Bar() 56 | { 57 | Name="bar2", 58 | Data=data2, 59 | AnimationDelay="function (idx) {return idx * 10 + 100;}".ToJRaw() 60 | } 61 | }, 62 | AnimationEasing = "elasticOut", 63 | AnimationDelayUpdate = "function (idx) {return idx * 5;}".ToJRaw() 64 | }; 65 | } 66 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Dashboard/Analysis/Index.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Dashboard.Analysis 2 | @page "/" 3 | 4 | 5 | 6 | 7 | 10 | 11 | 12 | WoW Change 13 | 12% 14 | 15 | 16 | DoD Change 17 | 11% 18 | 19 | 20 |
21 | 22 |
23 | 24 | 25 | 26 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | 38 | 41 | 42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | 53 | 54 | 59 | 60 |
61 | 62 |
63 | 64 | 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BlazorCharts 2 | 3 | ## 介绍 4 | 5 | **Blazor版本的ECharts图表组件** 6 | 7 | [![GitHub license](https://img.shields.io/github/license/caopengfei/BlazorECharts.svg)](https://github.com/caopengfei/BlazorECharts/blob/master/LICENSE) 8 | 9 | 开源地址：[https://github.com/caopengfei/BlazorECharts](https://github.com/caopengfei/BlazorECharts) 10 | 11 | 示例地址：[http://101.132.107.140:8123/line/line1](http://101.132.107.140:8123/line/line1) 12 | 13 | ECharts配置请参考： 14 | 15 | [https://www.echartsjs.com/zh/option.html#title](https://www.echartsjs.com/zh/option.html#title) 16 | 17 | [https://www.echartsjs.com/examples/zh/index.html](https://www.echartsjs.com/examples/zh/index.html) 18 | 19 | ## 使用方式 20 | 1. 创建Blazor项目。 21 | 2. 在NuGet中安装包`Rakor.Blazor.ECharts` [![NuGet](https://img.shields.io/nuget/v/Rakor.Blazor.ECharts.svg?style=flat-square&label=nuget)](https://www.nuget.org/packages/Rakor.Blazor.ECharts/) ![downloads](https://img.shields.io/nuget/dt/Rakor.Blazor.ECharts.svg)。 22 | 3. 在 _Imports.razor 中添加`@using Rakor.Blazor.ECharts.Component`。 23 | 4. 在 Pages/_Host.cshtml文件的Body中引入下面两段代码： 24 | ``` 25 | 26 | 27 | ``` 28 | 5. 在页面中使用组件（可参考Demo项目）。 29 | 30 | **注意：因为没有设置默认的样式，所以需要在组件上设置`Class`或者`Style`来控制宽度和高度** 31 | 32 | ## 功能实现进度 33 | - [ ] **公共配置** 34 | - [x] title 35 | - [x] legend 36 | - [x] grid（部分） 37 | - [x] xAxis（部分） 38 | - [x] yAxis（部分） 39 | - [x] polar（部分） 40 | - [x] radiusAxis（部分） 41 | - [x] angleAxis（部分） 42 | - [x] radar（部分） 43 | - [x] dataZoom 44 | - [x] visualMap（部分） 45 | - [x] tooltip（部分） 46 | - [x] axisPointer（部分） 47 | - [x] toolbox（部分） 48 | - [ ] brush 49 | - [ ] geo 50 | - [ ] parallel 51 | - [ ] parallelAxis 52 | - [ ] singleAxis 53 | - [ ] timeline 54 | - [ ] graphic 55 | - [ ] calendar 56 | - [ ] dataset 57 | - [ ] aria 58 | - [x] series（部分） 59 | - [x] color 60 | - [x] backgroundColor 61 | - [x] textStyle 62 | - [x] animation 63 | - [x] animationThreshold 64 | - [x] animationDuration 65 | - [x] animationEasing 66 | - [x] animationDelay 67 | - [x] animationDurationUpdate 68 | - [x] animationEasingUpdate 69 | - [x] animationDelayUpdate 70 | - [x] blendMode 71 | - [x] hoverLayerThreshold 72 | - [x] useUTC 73 | - [ ] **图表** 74 | - [x] 折线图（部分） 75 | - [x] 柱状图（部分） 76 | - [x] 饼图（部分） 77 | - [ ] 散点图 78 | - [x] 地理坐标/地图（部分） 79 | - [x] K线图（部分） 80 | - [ ] 雷达图 81 | - [ ] 盒须图 82 | - [ ] 热力图 83 | - [ ] 关系图 84 | - [ ] 路径图 85 | - [ ] 树图 86 | - [ ] 矩形树图 87 | - [ ] 旭日图 88 | - [ ] 平行坐标系 89 | - [ ] 桑基图 90 | - [ ] 漏斗图 91 | - [ ] 仪表盘 92 | - [ ] 象形柱图 93 | - [ ] 主题河流图 94 | - [ ] 日历坐标系 95 | -------------------------------------------------------------------------------- /Rakor.Blazor.ECharts.Demo/Pages/Radar/Radar1.razor: -------------------------------------------------------------------------------- 1 | @page "/radar/radar1" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Series 4 | 5 |
6 | 7 |
8 | 9 | @code{ 10 | private EChartsOption Option1; 11 | 12 | protected override void OnInitialized() 13 | { 14 | base.OnInitialized(); 15 | 16 | Option1 = new EChartsOption() 17 | { 18 | Title=new Title() {Text="基础雷达图" }, 19 | Tooltip=new Tooltip(), 20 | Legend=new Legend() {Data=new[] {"预算分配（Allocated Budget）", "实际开销（Actual Spending）" } }, 21 | Radar=new Rakor.Blazor.ECharts.Option.Radar() 22 | { 23 | Name=new RadarName() 24 | { 25 | TextStyle=new TextStyle() 26 | { 27 | Color="#fff", 28 | BackgroundColor="#999", 29 | BorderRadius=3, 30 | Padding=new[] { 3,5} 31 | } 32 | }, 33 | Indicator=new List() 34 | { 35 | new RadarIndicator(){Name="销售（sales）",Max=6500 }, 36 | new RadarIndicator(){Name="管理（Administration）",Max=16000 }, 37 | new RadarIndicator(){Name="信息技术（Information Techology）",Max=30000 }, 38 | new RadarIndicator(){Name="客服（Customer Support）",Max=38000 }, 39 | new RadarIndicator(){Name="研发（Development）",Max=52000 }, 40 | new RadarIndicator(){Name="市场（Marketing）",Max=25000 }, 41 | } 42 | }, 43 | Series=new List() 44 | { 45 | new Rakor.Blazor.ECharts.Option.Series.Radar.Radar() 46 | { 47 | Name="预算 vs 开销（Budget vs spending）", 48 | Data=new List() 49 | { 50 | new SeriesData() 51 | { 52 | Name="预算分配（Allocated Budget）", 53 | Value=new []{ 4300, 10000, 28000, 35000, 50000, 19000} 54 | }, 55 | new SeriesData() 56 | { 57 | Name="实际开销（Actual Spending）", 58 | Value=new []{ 5000, 14000, 28000, 31000, 42000, 21000} 59 | } 60 | } 61 | } 62 | } 63 | }; 64 | } 65 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Radar/Radar1.razor: -------------------------------------------------------------------------------- 1 | @page "/radar/radar1" 2 | @using Rakor.Blazor.ECharts.Option 3 | @using Rakor.Blazor.ECharts.Option.Series 4 | 5 |
6 | 7 |
8 | 9 | @code{ 10 | private EChartsOption Option1; 11 | 12 | protected override void OnInitialized() 13 | { 14 | base.OnInitialized(); 15 | 16 | Option1 = new EChartsOption() 17 | { 18 | Title=new Rakor.Blazor.ECharts.Option.Title() {Text="基础雷达图" }, 19 | Tooltip=new Rakor.Blazor.ECharts.Option.Tooltip(), 20 | Legend=new Rakor.Blazor.ECharts.Option.Legend() {Data=new[] {"预算分配（Allocated Budget）", "实际开销（Actual Spending）" } }, 21 | Radar=new Rakor.Blazor.ECharts.Option.Radar() 22 | { 23 | Name=new RadarName() 24 | { 25 | TextStyle=new Rakor.Blazor.ECharts.Option.TextStyle() 26 | { 27 | Color="#fff", 28 | BackgroundColor="#999", 29 | BorderRadius=3, 30 | Padding=new[] { 3,5} 31 | } 32 | }, 33 | Indicator=new List() 34 | { 35 | new RadarIndicator(){Name="销售（sales）",Max=6500 }, 36 | new RadarIndicator(){Name="管理（Administration）",Max=16000 }, 37 | new RadarIndicator(){Name="信息技术（Information Techology）",Max=30000 }, 38 | new RadarIndicator(){Name="客服（Customer Support）",Max=38000 }, 39 | new RadarIndicator(){Name="研发（Development）",Max=52000 }, 40 | new RadarIndicator(){Name="市场（Marketing）",Max=25000 }, 41 | } 42 | }, 43 | Series=new List() 44 | { 45 | new Rakor.Blazor.ECharts.Option.Series.Radar.Radar() 46 | { 47 | Name="预算 vs 开销（Budget vs spending）", 48 | Data=new List() 49 | { 50 | new SeriesData() 51 | { 52 | Name="预算分配（Allocated Budget）", 53 | Value=new []{ 4300, 10000, 28000, 35000, 50000, 19000} 54 | }, 55 | new SeriesData() 56 | { 57 | Name="实际开销（Actual Spending）", 58 | Value=new []{ 5000, 14000, 28000, 31000, 42000, 21000} 59 | } 60 | } 61 | } 62 | } 63 | }; 64 | } 65 | } -------------------------------------------------------------------------------- /Demo.WASM/Pages/Profile/Basic/Basic.razor: -------------------------------------------------------------------------------- 1 | @namespace Demo.WASM.Pages.Profile 2 | @page "/profile/basic" 3 | 4 | 5 | 6 | 7 | Home 8 | Profile 9 | Basic Profile 10 | 11 | 12 | 13 | 14 | 15 | 1000000000 16 | 已取货 17 | 1234123421 18 | 3214321432 19 | 20 | 21 | 22 | 付小小 23 | 18100000000 24 | 菜鸟仓储 25 | 浙江省杭州市西湖区万塘路18号 26 | 无 27 | 28 | 29 |
退货商品
30 | 31 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
退货进度
43 | 47 | 48 | 49 | 50 | 51 | 52 |
53 | 54 | 55 | --------------------------------------------------------------------------------