[Blazor/EChart] EChart 사용하는 방법
EChart 는 다른 차트들에 비해 많은 기능을 제공합니다.
아래 사이트를 보시면 알수 있듯이 정말 다양한 차트들이 지원됩니다.
https://echarts.apache.org/en/index.html
Apache ECharts
ECharts: A Declarative Framework for Rapid Construction of Web-based Visualization You are welcomed to cite the following paper whenever you use ECharts in your R&D projects, products, research papers, technical reports, news reports, books, presentations,
echarts.apache.org
Blazor 에서 사용할 수 있게 개발된건 아니지만 이를 Blazor 로 사용할수 있도록 만들어져있는 'Blazor.ECharts' 라이브러리가 Nuget 에서 제공됩니다.
이를 이용하면 Blazor 에서 EChart 를 사용할수 있습니다.
https://github.com/lishewen/Blazor.ECharts
GitHub - lishewen/Blazor.ECharts: Blazor版本的ECharts图表组件
Blazor版本的ECharts图表组件. Contribute to lishewen/Blazor.ECharts development by creating an account on GitHub.
github.com
Blazor 프로젝트에서 'Blazor.ECharts' 사용하는 방법입니다.
1. 'Blazor.EChart' Nuget 패키지 설치
2. index.html 에 스크립트 적용
<head> 에 <script src="https://lib.baomitu.com/echarts/5.3.3/echarts.min.js"></script>
<body> 에 <script type="module" src="_content/Blazor.ECharts/core.js"></script>
위 내용을 추가합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Blazor.EChartTest</title>
<base href="/" />
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
<link href="css/app.css" rel="stylesheet" />
<link href="Blazor.EChartTest.styles.css" rel="stylesheet" />
<script src="https://lib.baomitu.com/echarts/5.3.3/echarts.min.js"></script><!--추가-->
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
<script type="module" src="_content/Blazor.ECharts/core.js"></script><!--추가-->
</body>
</html>
3. Style 추가
app.css
.chart-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
padding-left: 20px;
padding-bottom: 20px;
padding-right: 0px;
padding-top: 0px;
height: 95%;
width: 95%;
}
.chart-normal {
border-radius: 4px;
height: 300px;
width: 400px;
margin-top: 20px;
}
.chart-fill {
width: 100%;
height: 720px;
margin-top: 20px;
margin-right: 20px;
}
4. Program.cs , _Imports.razor 에 코드추가
<Program.cs>
builder.Services.AddECharts();<_Imports.razor>
@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using Blazor.ECharts.Components
@using Blazor.ECharts.Options.Series
5. 화면 구현 - Scatter Chart
@page "/"
@using ScatterSeries = Blazor.ECharts.Options.Series.Scatter
<PageTitle>EChart</PageTitle>
<h1>EChart Test</h1>
<div class="chart-container">
<EScatter Option="@option" Class="chart-fill"></EScatter>
</div>
@code {
private EChartsOption<ScatterSeries.Scatter>? option;
protected override async Task OnInitializedAsync()
{
await Task.Delay(100);
option = new()
{
XAxis = new() {
new()
},
YAxis = new() {
new()
},
Legend = new()
{
Data = new[] { "범례1", "범례2" }
},
Series = new()
{
new ScatterSeries.Scatter()
{
Name = "범례1",
Data = new[] {
new[]{ 2.0, 8.04, 10 },
new[]{ 3.0, 6.95, 20 },
new[]{ 23.0, 7.58, 30 },
new[]{ 18.0, 8.81, 15},
new[]{ 12.0, 8.33, 16 },
new[]{ 4.0, 9.96, 5 },
new[]{ 16.0, 7.24, 18 },
new[]{ 14.0, 4.26, 35 },
new[]{ 12.0, 10.84, 20 },
new[]{ 10.0, 4.82, 50 },
new[]{ 7.0, 5.68, 13 }
}
},
new ScatterSeries.Scatter()
{
Name= "범례2",
Data = new[] {
new[]{ 1.0, 2.04 },
new[]{ 2.0, 15.95 },
new[]{ 26.0, 17.58 },
new[]{ 13.0, 7.81 },
new[]{ 22.0, 5.33 },
new[]{ 14.0, 9.96 },
new[]{ 6.0, 4.24 },
new[]{ 4.0, 4.26 },
new[]{ 22.0, 13.84 },
new[]{ 16.0, 14.82 },
new[]{ 17.0, 15.68 }
}
}
}
};
await base.OnInitializedAsync();
}
}결과
[Source]
https://github.com/kei-soft/Blazor.EChartTest
GitHub - kei-soft/Blazor.EChartTest
Contribute to kei-soft/Blazor.EChartTest development by creating an account on GitHub.
github.com