【ECharts】円グラフを描画しよう！【Angular】

みなさんこんにちは、現役エンジニアのサメハックです

未経験からWebエンジニアに転職し、
現在正社員として5年働いたのちフリーランスとして独立しました。

Angularの解説シリーズです。

今回はEChartsで円グラフを描画する方法について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

EChartsの導入方法がわかる
円グラフの作り方がわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxなどを使ってね！

作りたいもの
1. 実行環境
EChartsをインストールしよう
1. 新規Angularアプリの作成
2. EChartsインストール
ソースの設定をしよう！
まとめ

作りたいもの

これが今回の完成形だよ！

実行環境

Angularのバージョンが古いと動かないことがあるよ！
うまく動かなければアップデートしてね！

EChartsをインストールしよう

新規Angularアプリの作成

ng new my-app
cd my-app

EChartsインストール

npm install eCharts -S
npm install ngx-eCharts -S

EChartsを使ってグラフを描画しよう！

ソースの設定をしよう！

やることは以下の3点だよ！
1.モジュールへのインポート
2.HTMLタグにechartsと[options]属性の設定
3.表示する値を設定

app.module.ts

インストールしたNgxEchartsModuleのインポート

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
// ↓追記
import { NgxEchartsModule } from 'ngx-echarts';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // ↓追記
    NgxEchartsModule.forRoot({
      echarts: () => import('echarts'),
    }),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

app.component.html

<div echarts [options]="chartOption"></div>

タグはdivでなくても大丈夫だよ！

app.component.ts ※重要

import { Component } from '@angular/core';
import { EChartsOption } from 'echarts';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'my-app';

  /**円グラフ */
  chartOption: EChartsOption = {
    series: [
      {
        // ホバー時のタイトル
        name: 'Access From',
        // 円グラフを指定
        type: 'pie',
        radius: '50%',
        // データ
        data: [
          // {value: 値, name: "データタイトル"}
          { value: 1048, name: 'Search Engine' },
          { value: 735, name: 'Direct' },
          { value: 580, name: 'Email' },
          { value: 484, name: 'Union Ads' },
          { value: 300, name: 'Video Ads' },
        ],
      },
    ],
  };
}

確認

ng serve -o

でブラウザ表示してみると、正しく円グラフが描画されることがわかりました。

他にも様々なグラフが描画できるよ！

まとめ

EChartsを使うとグラフの描画ができる
HTMLにechartsと[options]の属性を設定
データやグラフのタイプはTypeScriptで設定

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram