TechHelper/TechHelper.Client/Pages/Common/Exam/AssignmentInfoCard.razor

<MudPaper Class="rounded-xl w-100 px-10 ma-3 pt-5" Elevation="5" Height="170px" Style="background-color:#6bc6be">

	<MudGrid Class="h-100">

		<MudItem xs="12" sm="2" Class="h-100 pa-1 mt-1">
			<MudStack Class="h-100">
				<MudText Style="color:white"> 期中测试BETA版本 </MudText>
				<MudText Style="color:white" Typo="Typo.h3"><b> 75  </b></MudText>

				<MudPaper Elevation=0 Class="h-100 w-100" Style="background-color:transparent">
					<MudStack Class="h-100" Row=true>
						<MudPaper Elevation=0 Height="100%" Width="100%" Style="background-color:transparent">
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									TotalNumber:
									<span style="color: #fefefe;">15</span>
								</MudText>
							</MudPaper>
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									TotalScore:
									<span style="color: #fefefe;">15</span>
								</MudText>
							</MudPaper>
						</MudPaper>

						<MudPaper Elevation=0 Height="100%" Width="100%" Style="background-color:transparent">
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									中位数:
									<span style="color: #fefefe;">15</span>
								</MudText>
							</MudPaper>
							<MudPaper Elevation=0 Height="50%" Style="background-color:transparent">
								<MudText Style="color:#9ed5f7" Typo="Typo.body2">
									方差:
									<span style="color: #fefefe;">15</span>
								</MudText>
							</MudPaper>
						</MudPaper>
					</MudStack>
				</MudPaper>
			</MudStack>
		</MudItem>


		<MudItem xs="12" sm="9">
			<MudPaper Style="background-color:transparent" Class="w-100 mt-n3" Height="100%" Elevation="0">
				<MudChart ChartType="ChartType.Line" Class="pt-0" ChartSeries="@Series" XAxisLabels="@XAxisLabels" CanHideSeries
						  Height="150px" Width="100%" AxisChartOptions="_axisChartOptions" ChartOptions="options">
					<CustomGraphics>
						<style>
							.heavy {
								font: normal 12px helvetica;
								fill: rgb(255,255,255);
								letter-spacing: 2px;
							}
						</style>

						<text x="60" y="15" class="heavy"> 成绩的整体分布情况 </text>
					</CustomGraphics>
				</MudChart>
			</MudPaper>

		</MudItem>
		<MudItem xs="12" sm="1">
			<MudChipSet T="string" SelectedValuesChanged="HandleSelectedValuesChanged" SelectedValues="@_selected" SelectionMode="SelectionMode.MultiSelection" CheckMark="true">
				<MudChip Size="Size.Small" Text="类型错误数量分布" Variant="Variant.Text" Color="Color.Default">类型分布</MudChip>
				<MudChip Size="Size.Small" Text="类型错误成绩分布" Variant="Variant.Text" Color="Color.Primary">课时分布</MudChip>
				<MudChip Size="Size.Small" Text="pink" Variant="Variant.Text" Color="Color.Secondary">成绩趋势</MudChip>
				<MudChip Size="Size.Small" Text="blue" Variant="Variant.Text" Color="Color.Info">分值区间</MudChip>
				<MudChip Size="Size.Small" Text="green" Variant="Variant.Text" Color="Color.Success">Success</MudChip>
				<MudChip Size="Size.Small" Text="orange" Variant="Variant.Text" Color="Color.Warning">Warning</MudChip>
				<MudChip Size="Size.Small" Text="red" Variant="Variant.Text" Color="Color.Error">Error</MudChip>
				<MudChip Size="Size.Small" Text="black" Variant="Variant.Text" Color="Color.Dark">Dark</MudChip>
			</MudChipSet>
		</MudItem>
	</MudGrid>
</MudPaper>


@code {
	public double[] data = { 25, 77, 28, 5 };
	public string[] labels = { "Oil", "Coal", "Gas", "Biomass" };
	private AxisChartOptions _axisChartOptions = new AxisChartOptions
	{
	};
	private ChartOptions options = new ChartOptions
	{
		InterpolationOption = InterpolationOption.NaturalSpline,
		YAxisFormat = "c2",
		ShowLegend = false,
		YAxisLines = false,
		XAxisLines = false,
		XAxisLabelPosition = XAxisLabelPosition.None,
		YAxisLabelPosition = YAxisLabelPosition.None,
		YAxisTicks = 100,
		ShowLabels = false,
		ShowLegendLabels = false

	};
	public List<ChartSeries> Series = new List<ChartSeries>()
	{
		new ChartSeries() { Name = "类型错误数量分布", Data = new double[] { 35, 41, 35, 51, 49, 62, 69, 91, 148 } },
		new ChartSeries() { Name = "类型错误成绩分布", Data = new double[] { 55, 21, 45, 11, 45, 23, 11, 56, 13 } },
	};
	public string[] XAxisLabels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep" };

	Random random = new Random();
	protected override void OnInitialized()
	{
		options.InterpolationOption = InterpolationOption.NaturalSpline;
		options.YAxisFormat = "c2";
		options.ShowLegend = false;
		options.YAxisLines = false;
		options.XAxisLines = false;
		options.XAxisLabelPosition = XAxisLabelPosition.None;
		options.YAxisLabelPosition = YAxisLabelPosition.None;
		options.ShowLabels = false;
		options.ShowLegendLabels = false;
		options.LineStrokeWidth = 1;
		_axisChartOptions.MatchBoundsToSize = true;

		Series[0].LineDisplayType = LineDisplayType.Area;

	}

	private IReadOnlyCollection<string> _selected;

	private void HandleSelectedValuesChanged(IReadOnlyCollection<string> selected)
	{
		Series.ForEach(x => x.Visible = false);

		foreach(var item in selected)
		{
			var sv = Series.FirstOrDefault(predicate: x => x.Name == item);
			if(sv != null)
			{
				sv.Visible = true;
			}
		}
	}
}