BlazorでJavaScript(今回はECharts)を使う

動作画面

前提

.Net8 Blaozr WebAssemblyからJavaScriptのEChartsを使います。

設定

• EChartsをここからダウンロードしwwwrootにechartsフォルダを作成し保存する

利用

EChartsを表示するタグを作成する

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

@ref="chartDiv"でDivタグを参照できるようにしておきます

EChartsを読み込み初期化する

private ElementReference chartDiv; //divタグ
private IJSObjectReference? _jsECharts; //EChartsのインスタンス

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        //echarts.jsを読み込む
        await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./echarts/echarts.js");

        //echartsの初期化　インスタンスを_jsEChartsで受ける
        _jsECharts = await JSRuntime.InvokeAsync<IJSObjectReference>("echarts.init", chartDiv);

    }
}

EChartsを表示する

//表示データ
var options = new
{
    animationDuration = 0,
    tooltip = new { },
    xAxis = new
    {
        data = new string[] { "shirt", "cardigan", "chiffon", "pants", "heels", "socks" }
    },
    yAxis = new { },
    series = new[]
    {
        new
        {
            name = "sales",
            type = "line",
            data = new int[] { 5, 20, 36, 10, 10, 20 }
        }
    }
};

//表示データを設定
await _jsECharts.InvokeVoidAsync("setOption", options);

EChartsをダウンロードではなくCDNから利用する場合は

//echarts.jsを読み込む
- await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./echarts/echarts.js");
+ await JSRuntime.InvokeAsync<IJSObjectReference>("import", "https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js");

とやってください

動作サンプルはGithubに置いておきます。