BlazorでApache EChartsを使ってグラフを描画する方法

Blazorアプリケーションに動的なグラフを追加したい場合、Apache EChartsは優れた選択肢です。この記事では、BlazorでEChartsを設定して使用する方法を紹介します。

1. Apache EChartsのダウンロード

まず、Apache EChartsのライブラリをGitHubの公式リポジトリからダウンロードします。
ダウンロードしたファイルを解凍したら、dist フォルダ内の内容をBlazorプロジェクトの wwwrootの下にコピーします。
この記事のサンプルでは wwwroot/js/echarts にコピーしています。

2. JavaScriptの実装

新しいJavaScriptファイル sample.js を作成します。このファイルは後述する方法によってESmoduleとして読み込まれます。
そのため、Apache EChartsのライブラリをimport で読み込みます。

import * as echarts from './wwwroot/js/echarts';

let myChart;

export function initChart(chartDiv) {
    myChart = echarts.init(chartDiv);
}

export function showChart(options) {
    if (myChart) {
        myChart.setOption(options);
    }
}

3. Razerの実装

新しいRazerコンポーネント Chart.razor を作成し、以下のコードを追加します。
EChartsに渡すJSONのオプションは、C#の匿名オブジェクトで渡します。

@inject IJSRuntime JSRuntime

<div @ref="chartDiv" style="width: 600px; height: 400px;"></div>

@code {
    private ElementReference chartDiv;
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("import", "/sample.js")
                .InvokeVoidAsync("initChart", chartDiv);
        
            var option = new
            {
                title = new
                {
                    text = "ECharts Getting Started Example"
                },
                tooltip = new { },
                xAxis = new
                {
                    data = new string[] { "shirt", "cardigan", "chiffon", "pants", "heels", "socks" }
                },
                yAxis = new { },
                series = new[]
                {
                    new
                    {
                        name = "sales",
                        type = "bar",
                        data = new int[] { 5, 20, 36, 10, 10, 20 }
                    }
                }
            };
            await JSRuntime.InvokeVoidAsync("showChart", options);
        }
    }
}

4. グラフを表示する

最後に、上記のRazerコンポーネントを利用するページやコンポーネントに、<Chart /> を追加します。これにより、ページがロードされるとグラフが表示されます。

まとめ

以上がBlazorでApache EChartsを使用するためのです。
必要に応じてEChartsのオプションを調整して、さまざまなグラフや視覚化を作成できます。