ECharts Blazor에서 사용하기

ECharts Blazor에서 사용하기

우선 ECharts 는 정말 많은 차트 종류를 지원하고 있습니다.

아래 Demo 페이지에서 예제를 볼 수 있는데

Line, Scatter 등 기본 차트와 3D, 지도등 거의 모든 차트를 지원하는 걸 알 수 있습니다.

https://echarts.apache.org/examples/en/index.html

Examples - Apache ECharts

echarts.apache.org

ECharts 를 Blazor 에서 사용하기 위해서는 'Blazor.ECharts' Nuget Package 를 사용해야 합니다.

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

1. Blazor.ECharts Nuget Package Install

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.EChartsTest</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. css 파일에 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 에 코드 추가

builder.Services.AddECharts();

5. _Import.razor 에 using 코드추가

이항목은 각 페이지에서 Blazor.EChart 관련 using 를 미리 정의하는 것으로 편의상 추가합니다.

추가하지 않고 각 페이지에서 using 처리해도 됩니다.

@using Blazor.ECharts.Options
@using Blazor.ECharts.Options.Enum
@using Blazor.ECharts.Components
@using Blazor.ECharts.Options.Series

6. 화면에서 사용 (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();
    }
}

결과

ECharts 에서는 option 항목이 중요하고 설정할 수 있는 필드들이 많습니다.

이상 ECharts 를 Blazor 에서 사용하는 방법이었습니다.

저작자표시 비영리 변경금지

'코딩 > ECharts' 카테고리의 다른 글

ECharts 에서 datatables 라이브러리를 이용해 DataView 가상화 처리하기 (0)	2024.07.01
ECharts 에 바인딩 된 dataset source 내용 DataView 에 표시하기 (0)	2024.07.01
ECharts 스크립트 테스트 해볼 수 있는 사이트 (0)	2024.02.20
ECharts html sample code (0)	2024.02.19
ECharts Canvas Renderer 에서 10000 point 찍을 때 오류 (0)	2024.02.19