[Blazor/EChart] EChart 사용하는 방법

C#/Blazor 2023. 9. 12. 22:39
728x90
728x170

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

EChart

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();
    }
}

결과

EChart Test

[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

 

728x90
그리드형
저작자표시 비영리 변경금지

'C# > Blazor' 카테고리의 다른 글

[C#/Blazor] FluentUI Templates 사용하기  (0) 2023.09.19
[C#/Blazor] FluentUI 사용하기 - Microsoft.Fast.Components.FluentUI  (0) 2023.09.18
[C#/Blazor] Swagger 추가 및 시작페이지 설정하기  (0) 2023.09.08
[Blazor] MonacoEitor 사용하기  (0) 2023.08.10
[Blazor] BlazorComponentUtilities 의 CssBuilder, StyleBuilder 사용하기  (0) 2023.08.03
Posted by kjun
,

티스토리툴바