@using Vizor.ECharts; <Vizor.ECharts.EChart Options="@options" DataLoader="LoadChartData" Width="auto" Height="400px" /> @code { private ChartOptions options = new() { Tooltip = new() { Trigger = TooltipTrigger.Axis, AxisPointer = new() { Type = AxisPointerType.Shadow } }, Legend = new() { }, Grid = new() { Left = "3%", Right = "4%", Bottom = "3%", ContainLabel = true }, YAxis = new() { Type = AxisType.Value }, XAxis = new() { Type = AxisType.Time }, Series = new() }; // see https://stackoverflow.com/questions/69215766/echarts-separate-series-based-on-dataset-field private void LoadChartData() { // create Bar series for each var names = new string[] { "A", "B", "C", "D" }; var series = new List<BarSeries>(); for (int seriesIndex = 0; seriesIndex < 4; ++seriesIndex) { var s = new BarSeries() { Name = names[seriesIndex], Stack = "StackName", Label = new() { Show = true }, Emphasis = new() { Focus = "series" }, DatasetIndex = seriesIndex, Encode = new() { X = "time", Y = "count" } }; series.Add(s); } options.Series!.Clear(); options.Series!.AddRange(series); // create a dataset var start = new DateOnly(2023, 8, 1); var rnd = new Random(); var datasets = new List<Dataset>(); for (int seriesIndex = 0; seriesIndex < 4; ++seriesIndex) { var values = new List<SeriesData<DateOnly, int>>(10 * 4); for (int i = 0; i < 10; ++i) { values.Add(new(start.AddDays(i), rnd.Next(300))); } datasets.Add(new Dataset() { Dimensions = new string[] { "time", "count" }, Source = values }); } options.DatasetList = datasets; } }