カスタムページで Apache ECharts を使用する方法

使用シーン

場合によっては、宜搭コンポーネントライブラリに含まれていないコンポーネント（例：EChartsグラフコンポーネント）を宜搭のカスタムページで使用したいことがあります。開発者はカスタムページでECharts.jsを導入し、宜搭内部データの可視化表示の実装例を通じて、カスタムページで外部JSを導入し、複雑なシーンの要件を実現する方法を紹介します。

ビデオチュートリアル

操作手順

ステップ 1：JSXコンポーネント関連属性を設定

カスタムページを作成し、コンポーネントライブラリから JSX コンポーネントをページ中央のキャンバスにドラッグし、id属性とスタイルを設定します。 操作方法：

1. ページ上でjsxコンポーネントをクリックして選択し、右側の属性欄で「JSXコードを編集」ボタンをクリックします。
2. divの後に id="main" フィールドを追加します。
3. 右側のスタイル欄をクリックし、「ソースコード編集」をクリックし、#main { height：400px } フィールドを入力します。

以下の通りです：

ステップ 2：didmountライフサイクルをバインドしてリモートJSリソースを読み込む

ページのdidMountライフサイクルでCDN上のJSリソースを読み込むことができます（カスタムページのライフサイクルについてはドキュメントを参照）。以下のコードをカスタムページ動作パネルのdidMount内に直接コピーできます。以下の通りです：

loadScriptメソッドのコードは以下の通りです：

//loadScriptメソッド、scriptタグを作成して外部JSを導入し、実行成功後にコードを高速開発に活用
export function loadScript() {
  //scriptタグを作成し、echarts.jsを導入
  ////非同期コードが成功するとresolve(...)が呼び出され、非同期コードが失敗するとreject(...)が呼び出されます
  new Promise((resolve, reject) => {
    const src = 'https://g.alicdn.com/code/lib/echarts/5.3.0/echarts.min.js';
    const script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = src;
    document.body.appendChild(script);
    //scriptタグのonloadイベントは外部JSファイルが読み込まれ実行完了後にのみ発火されます
    script.onload = () => {
      resolve('成功');
    };
    script.onerror = reject;
  }).then(() => {
    //参照成功後にレーダーチャートJSを読み込む
    radar();
  });
}

ステップ 3：EChartsを使用してレーダーチャートレンダリング方式を実装

上記JSを参照すると、リモートJSリソースの読み込み後にレーダーチャートをレンダリングするためのradar関数を実行していることがわかります。動作パネルにradar関数を追加し、ステップ1で作成したjsxコンポーネントにレーダーチャートをレンダリングします。レーダーチャートの具体的な使用方法についてはEChartsドキュメントを参照してください。

radarメソッドのコードは以下の通りです：

//レーダーチャートJSメソッド
export function radar() {
  //レーダーチャートJS

  var chartDom = document.getElementById('main');
  chartDom.style.height = '400px';
  //ECharts用にサイズ（幅と高さ）を備えたDOMを準備し、JSXコンポーネントのスタイルで幅と高さをカスタム設定
  // 準備されたDOMに基づき、echartsインスタンスを初期化
  var myChart = echarts.init(chartDom);
  // チャートの設定項目とデータを指定
  var option;
  option = {
    //dataには変数データソースを使用、直接記述することも可能
    title: {
      text: '社員総合能力',
    },
    legend: {
      data: state.nameArr,
      // data: ["宜搭-ly"]
    },
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '業績評価', max: 100 },
        { name: '総合能力', max: 100 },
        { name: '反応能力', max: 100 },
        { name: '専門能力', max: 100 },
        { name: '判断能力', max: 100 },
        { name: 'サービス能力', max: 100 },
      ],
    },
    series: [
      {
        name: '社員総合能力',
        type: 'radar',
        data: state.dataArr,
        // data: [
        //   {
        //     value: [80, 85, 90, 90, 88, 92],
        //     name: '宜搭-ly'
        //   }
        // ]
      },
    ],
  };
  // 指定された設定項目とデータを使用してチャートを表示
  option && myChart.setOption(option);
}

ステップ 3：データ変数をバインド

上記radarメソッドを参照すると、開発者がnameArrとdataArrの2つの変数をstateから読み込んでいることがわかります。そのため、レーダーチャートのデータ変数を設定する必要があります。以下の通りです：

表示効果

ユーザーは公式が提供するECharts導入サンプルにアクセスして効果と具体的な実装方法を確認できます。最終的な表示効果は以下の通りです：