@page "/bar/bar3"
@attribute [RouteName("ECharts 入门示例|666")]
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using B = Blazor.ECharts.Options.Series.Bar
@using L = Blazor.ECharts.Options.Series.Line
@using System.Data
@using System.Dynamic
@using System.Drawing
@using XYOA
<style>
body {
width: 100%;
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
/* 设置.container元素高度 */
height: 5vh;
background-color: #eee;
padding: 6px;
display: flex;
gap: 16px; /* 设置间距 */
}
.container label {margin-right: 16px; /* 设置标签之间的间距 */}
.chart-container {
flex: 1;
/*--上，右，下，左-->*/
/*margin: 36px 0px -1px -36px;*/
/* 将.chart-container 铺满整个页面 */
overflow: hidden;
}
</style>
<body>
<div class="container">
<label>
<input type="radio" name="chart" value="chart1" @onchange='(e => ShowSelectedChart("2020"))' checked />每天销售
</label>
<label>
<input type="radio" name="chart" value="chart2" @onclick='(e => ShowSelectedChart("2021"))' />每月销售
</label>
<label>
<input type="radio" name="chart" value="chart3" @onclick='(e => ShowSelectedChart("2022"))' />每年销售
</label>
<div><button name="btFind" class="btn btn-primary mx-6" @onclick="BtFind">查询</button></div>
<button @onclick="ChangeTheme">切换主题 @theme</button>
</div>
<div class="chart-container">
<EBar Option="@Option1" Class="flex-fill" Theme="@theme"></EBar>
</div>
</body>
<!--
<table class="table table-striped">
<thead>
<tr>
<th>月份</th>
<th>去年</th>
<th>今年</th>
</tr>
</thead>
<tbody>
@foreach (var person in list)
{
<tr>
<td>@person.月份</td>
<td>@person.去年</td>
<td>@person.今年</td>
</tr>
}
</tbody>
</table>
-->
@code {
dynamic dts;
private EChartsOption<B.Bar> Option1;
private string theme = "light";
protected override async void OnInitialized()
{
base.OnInitialized();
await GetDayData(2020);
}
protected async Task GetDayData(int year)
{
Option1 = new()
{
Grid = new()
{
new() { Left = "1%", Right = "1%", Bottom = "8%", ContainLabel = true }
},
Color = [ColorTranslator.ToHtml(Color.OrangeRed)],// 设置每个柱形的颜色
Title = new()
{
Left = "center",
},
Tooltip = new()
{
Trigger = TooltipTrigger.Axis,
TriggerOn = "mousemove|click",
ValueFormatter = new("(value) => value.toFixed(2) + '万元'")
},
Legend = new Legend() { Show = true, Align = Align1.Right, Orient = Orient.Horizontal, Top = 36 },
XAxis = new List<XAxis>()
{
new XAxis(){Type=AxisType.Category, Data=dListYear }
},
YAxis = new()
{
new(){ Type = AxisType.Value,}
},
Series = new()
{
new B.Bar
{
Name = "今年",
Data=dList// 设置DataSet这里不需要再设置
},
new L.Line
{
Smooth=true,
Name = "去年",
Data=dList2
}
}
};
string err = "";
List<BList> list2 = [];
try
{
list = SqlHelper.ExecSelect2Entity<BList>("exec PrShowDayChart '0'");//去年
list2 = SqlHelper.ExecSelect2Entity<BList>("exec PrShowDayChart");//去年
err = list.Count.ToString();
}
catch (Exception ex)
{
err = ex.Message;
}
Option1.Title.Text = $"每天销售汇总";
// 设置每个柱形的颜色
Option1.Color = [ColorTranslator.ToHtml(Color.OrangeRed)];
dListYear = list.Select(obj => DateTime.Parse(obj.日期).Day.ToString()).ToArray();
dList = list.Select(obj => obj.金额).ToArray();
dList2 = list2.Select(obj => obj.金额).ToArray();
(Option1.Series[0] as B.Bar).Data = dList;
(Option1.Series[1] as L.Line).Data = dList2;
await InvokeAsync(StateHasChanged);
}
protected async Task GetMonthData(int year)
{
Option1 = new()
{
Grid = new()
{
new() { Left = "1%", Right = "1%", Bottom = "8%", ContainLabel = true }
},
Color = ["#6696ED", ColorTranslator.ToHtml(Color.OrangeRed)],// 设置每个柱形的颜色
Title = new()
{
Left = "center",
},
Tooltip = new()
{
Trigger = TooltipTrigger.Axis,
TriggerOn = "mousemove|click",
ValueFormatter = new("(value) => value.toFixed(2) + '亿元'")
},
Legend = new Legend() { Show = true, Align = Align1.Right, Orient = Orient.Horizontal, Top = 36 },
XAxis = new List<XAxis>()
{
new XAxis(){Type=AxisType.Category, Data=dListYear }
},
YAxis = new()
{
new(){ Type = AxisType.Value,}
},
Series = new()
{
new B.Bar
{
Name = "今年",
Data=dList
},
new B.Bar
{
Name = "去年",
Data=dList2
}
}
};
string err = "";
try
{
list = SqlHelper.ExecSelect2Entity<BList>("exec PrGetMonthDataXY");
list = list.OrderBy(item => item.月份).ToList();
err = list.Count.ToString();
}
catch (Exception ex)
{
err = ex.Message;
}
Option1.Title.Text = $"每月销售汇总";
dListYear = list.Select(obj => obj.月份).ToArray();
dList = list.Select(obj => obj.去年).ToArray();
dList2 = list.Select(obj => obj.今年).ToArray();
(Option1.Series[0] as B.Bar).Data = dList;
(Option1.Series[1] as B.Bar).Data = dList2;
await InvokeAsync(StateHasChanged);
}
protected async Task GetYearData(int year)
{
Option1 = new EChartsOption<B.Bar>()
{
DataSet = new Options.DataSet
{
Source = dts
},
Grid = new()
{
new() { Left = "1%", Right = "1%", Bottom = "8%", ContainLabel = true }
},
Color = [ColorTranslator.ToHtml(Color.OrangeRed)],// 设置每个柱形的颜色
Title = new()
{
Left = "center",
},
Tooltip = new()
{
Trigger = TooltipTrigger.Axis,
TriggerOn = "mousemove|click",
ValueFormatter = new("(value) => value.toFixed(2) + '亿元'")
},
Legend = new Legend() { Show = true, Align = Align1.Right, Orient = Orient.Horizontal, Top = 36 },
XAxis = new List<XAxis>()
{
new XAxis(){Type=AxisType.Category, Data=dListYear }
},
YAxis = new()
{
new(){ Type = AxisType.Value,}
},
Series = new()
{
new B.Bar
{
Name = "今年",
Data=dList// 设置DataSet这里不需要再设置
},
}
};
string err = "";
try
{
list = SqlHelper.ExecSelect2Entity<BList>("exec PrGetYearData");
err = list.Count.ToString();
}
catch (Exception ex)
{
err = ex.Message;
}
Option1.Title.Text = $"每年销售汇总";
dListYear = list.Select(obj => obj.日期).ToArray();
dList = list.Select(obj => obj.金额).ToArray();
(Option1.Series[0] as B.Bar).Data = dList;
await InvokeAsync(StateHasChanged);
}
public class BList
{
public string 日期 { get; set; }
public decimal 金额 { get; set; }
public string 月份 { get; set; }
public decimal 去年 { get; set; }
public decimal 今年 { get; set; }
}
decimal[] dList = [];
decimal[] dList2 = [];
string[] dListYear = [];
List<BList> list = [];
private List<BList> Persons { get; set; } = new List<BList>() { };
private async Task OnValueChanged(int year)
{
// TODO:需要点击两次查询再次才能显示正确
switch (year)
{
case 2020:
await GetDayData(year);
break;
case 2021:
await GetMonthData(year);
break;
case 2022:
await GetYearData(year);
break;
}
await InvokeAsync(StateHasChanged);
}
private Task ChangeTheme()
{
theme = theme == "light" ? "dark" : "light";
//通知组件其状态已更改。 如果适用，这将导致重新呈现组件
StateHasChanged();
return Task.CompletedTask;
}
private string selectedChart = "2020";
private void ShowSelectedChart(string SelectType) => selectedChart = SelectType;
private async void BtFind() => await OnValueChanged(int.Parse(selectedChart));
}
。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent