このモードでは、ページ上でカスタムコンポーネントを直接開発・デバッグできます。「ECharts コードの挿入」機能により、公式 ECharts のサンプルチャートを素早く統合でき、開発およびデモンストレーションが簡素化されます。本記事では、この機能の使い方について説明します。
ステップ 1：オンライン編集モードへ移行
まず、カスタムコンポーネントを作成し、編集モードへ移行します。詳細については、「コンポーネントのデバッグ」をご参照ください。
フィールド情報を設定し、データを取得します。
ステップ 2：ECharts サンプルコードの取得
ECharts のサンプル一覧ページへアクセスし、任意のサンプルチャートを選択します。
コード詳細ページへ遷移します。「コードエディタ」タブで「JS」オプションを選択し、左側の全コードを範囲選択してコピーすることで、option 構成を取得します。
「ECharts コードの挿入」機能は、ECharts の option 構成変数のみを受け付けます。これは、生成されたコードを確認することで確認できます。そのため、コードをコピーする際は、必ず option = {...} 変数が含まれていることを確認してください。（公式 ECharts ウェブサイトのほとんどのサンプルコードは、全文をそのままコピー可能です。）非標準的なコードの場合、コードを確認し、option = {...} 変数のみを正確にコピーする必要があります。
ステップ 3：コードの生成
1. 依存ライブラリの追加
**[サードパーティライブラリの追加]** をクリックします。
ECharts を選択します。
Quick BI では、デフォルトで ECharts v5.4.0 が提供されています。異なるバージョンの ECharts を使用する場合は、CDN の URL を直接入力するか、JS ライブラリを手動でアップロードしてください。
2. ECharts コードの挿入
**[ECharts コードの挿入]** をクリックします。
ステップ 2 でコピーした option コードを入力ボックスに貼り付け、**[OK]** をクリックします。
**[実行]** をクリックして、ECharts チャートをプレビュー表示します。
次のステップ
これで、ECharts のサンプルコードをカスタムコンポーネントに統合できました。ただし、現状のチャートは静的データを使用しており、ご利用のデータセットから取得したデータはまだ利用されていません。次に、カスタムコンポーネント API を用いて、Quick BI のデータ形式を ECharts のデータ形式に変換してください。包括的な例については、「完全な例：ECharts チャートの開発」をご参照ください。