メインコンテンツまでスキップ

Echart (Echart) Widget Control

スクリプトからEchartウィジェットを制御する際に使用するWidget Control（Method）の一覧です。ウィジェットの紹介と使い方はEchartを参照してください。

備考

以下の例のechartIDは、キャンバスでEchartウィジェットに指定した名前（ID）です。スクリプトではwidgetID.memberの形式でアクセスします。

Widget Control一覧​

Widget Control種類シグネチャ説明
setVarMethodsetVar(name, value)チャート変数1つの値を設定（置き換え）
setOptionMethodsetOption(optionJson)チャートオプション（ECharts option）全体を置き換え
setOptionPartialMethodsetOptionPartial(optionJson)チャートオプションに部分マージ（変更されたキーのみ更新）
dispatchActionMethoddispatchAction(actionJson)チャートにEChartsアクションを渡す（highlightなど）

Property​

備考

該当なし — Echartウィジェットにはスクリプト専用のPropertyがありません。スクリプトでは、以下の共通Widget Control（getProperty / setProperty）で値を読み書きします。

Method​

setVar​

チャート変数1つの値を設定します。同じ名前にバインドされた既存の値を置き換えます。チャートの読み込みが完了する前に呼び出した場合も、値がキャッシュされ、チャートの初回レンダリングに反映されます。

  • 種類: Method
  • Parameters:
    • name (string): オプションテンプレートが参照する変数名
    • value (string): 変数の値。JSON文字列として渡し、送信前にパースされます（配列・オブジェクト・プリミティブ値）
  • Returns: なし（戻り値なし）

Example

echartID.setVar("series1", [120, 200, 150]);

setOption​

チャートオプション（ECharts option）全体を、渡されたJSONで置き換えます。コンポーネントに設定されたオプションテンプレートを上書きします。

  • 種類: Method
  • Parameters:
    • optionJson (object): 完全なECharts optionオブジェクト
  • Returns: なし（戻り値なし）

Example

echartID.setOption({
  xAxis: { type: "category", data: ["Mon", "Tue", "Wed"] },
  yAxis: { type: "value" },
  series: [{ type: "bar", data: [120, 200, 150] }]
});

setOptionPartial​

渡されたJSONを現在のチャートオプションにマージします（全体は置き換えません）。optionJsonにあるキーのみが更新され、残りはそのまま維持されます。部分（増分）更新に使用します。

  • 種類: Method
  • Parameters:
    • optionJson (object): マージする部分的なECharts optionオブジェクト
  • Returns: なし（戻り値なし）

Example

echartID.setOptionPartial({
  series: [{ data: [130, 210, 160] }]
});

dispatchAction​

チャートにEChartsアクション（highlight、showTipなど）を渡します。チャートの初期化が完了するまでは何も行いません。

  • 種類: Method
  • Parameters:
    • actionJson (object): EChartsアクションのペイロードオブジェクト
  • Returns: なし（戻り値なし）

Example

echartID.dispatchAction({ type: "highlight", seriesIndex: 0, dataIndex: 2 });

Event​

備考

該当なし — Echartウィジェットには専用のEventがありません。

共通Widget Control（すべてのウィジェット）​

注記

すべてのウィジェットは、setProperty / getProperty / setStylePropertyのような名前ベースの共通Widget Control（Method）を使用できます。共通リファレンスドキュメント（作成予定）を参照してください。