echartsのメソッドは
通常、プロジェクトにechartsを導入すると、グローバルechartsオブジェクトを取得できます。
以下は、より一般的に使用されるechartsメソッドのいくつかです。
echarts.init()
echarts のインスタンスを作成し、そのインスタンスを返します。一つのコンテナに複数の echarts インスタンスを作成することはできません。
(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number
renderer?: string
width?: number|string
height? number|string
}) => ECharts
echarts.dispose(target: ECharts|HTMLDivElement|HTMLCanvasElement)
インスタンスを破棄します。破棄後のインスタンスは再利用できません。
echarts.getInstanceByDom(target: HTMLDivElement|HTMLCanvasElement)
Dom コンテナ上のインスタンスを取得します。
echarts.registerTheme(themeName: string, theme: Object)
インスタンスの初期化時に指定する登録トピック。
次に、より具体的なアプローチがいくつかあります。
echarts.connect(group:string|Array)
連動性を実現する複数のチャートインスタンス
echarts.disconnect(group:string)
単一のインスタンスだけを削除する必要がある場合、そのチャート・インスタンス・グループを空に設定することで、チャート・インスタンスのリンクを解除できます。
echarts.registerMap(mapName: string, geoJson: Object, specialAreas?: Object)
利用可能な地図を登録します。ジオコンポーネントまたはマップチャートタイプを含む場合に使用する必要があります。
echarts.getMap(mapName: string) => Object
登録されているマップを取得します：
{
// マップのgeoJsonデータ
geoJson: Object,
// マップの特別な領域については、registerMapを参照のこと。
specialAreas: Object
}
echarts.graphic
グラフィックス関連のヘルパー・メソッド。clipPointsByRect() と clipRectByRect() です。 (1) clipPointsByRect() 点の集合、矩形を入力し、矩形に挟まれた点を返します。
(
// インターセプトされるポイントのリスト、例えば[[23, 44], [12, 15], ...]
points: Array.<Array.<number>>,
// 点のインターセプトに使用される矩形。
rect: {
x: number,
y: number,
width: number,
height: number
}
) => Array.<Array.<number>> // 結果をインターセプトする。
2) clipRectByRect() 2 つの矩形を入力し、2 番目の矩形が最初の矩形を横切った結果を返します。
(
// インターセプトする矩形。
targetRect: {
x: number,
y: number,
width: number,
height: number
},
// 点のインターセプトに使用される矩形。
rect: {
x: number,
y: number,
width: number,
height: number
}
) => { // 結果をインターセプトする。
x: number,
y: number,
width: number,
height: number
}
矩形が完全に切り詰められた場合は、undefined が返されます。
echartsInstance
echartsInstance.group
連結のためのグラフのグループ化。
echartsInstance.setOption()
(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: Object)
チャート・インスタンスの設定項目とデータ、ユニバーサル・インターフェース、すべてのパラメータとデータの変更は、setOptionを通して行うことができます。アニメーションが有効な場合、Echartsは2つのデータセットの違いを見つけ、適切なアニメーションで表示します。 notMerge: オプションパラメータ、オプションをマージできるかどうか、デフォルトはfalse、マージします。 lazyUpdate: これもオプション・パラメータで、オプションを設定した後、チャートを更新しないかどうかを指定します。デフォルトはfalseで、即座に更新します。 : パラメータ lazyUpdate を false に設定すると、チャートは直ちに更新されます。一般に、プロジェクトで作業しているとき、特定の異なる条件値に従って、異なるデータを持つチャートを div コンテナ上にレンダリングします。この場合、バックエンドから異なるデータを取得して echarts チャートをレンダリングします。このとき、lazyUpdate パラメータを true に設定する必要があります。
コンディションを得るためのいくつかの方法があります。
）echartsInstance.getWidth() => number
インスタンスが含まれるコンテナの幅を取得します。
）echartsInstance.getHeight() => number
インスタンスが含まれるコンテナの高さを取得します。
) echartsInstance.getDom() => HTMLCanvasElement|HTMLDivElement
インスタンスコンテナの dom ノードを取得します。
) echartsInstance.getOption() => Object
現在のインスタンスが保持する option オブジェクトを取得します。返される option オブジェクトは、ユーザーが setOption を何度か変更した後にマージされた設定項目とデータで、ユーザーの対話状態も記録します。
以下は、echartsインスタンス・イベントに関連するいくつかのメソッドです。
) echartsInstance.dispatchAction(payload: Object)
ペイロードは、batch属性を使って複数のビヘイビアを同時にトリガーできます。
) echartsInstance.on()
パラメータリスト：
(
eventName: string,
handler: Function,
context?: Object
)
(
eventName: string,
query: string|Object,
handler: Function,
context?: Object
)
イベントハンドラ関数をバインドします。 Echarts には 2 種類のイベントがあります。一つはマウス・イベントです。また、dispatchActionによってトリガーされるイベントもあり、それぞれのアクションには対応するイベントがあります。 イベントが外部の dispatchAction によってトリガーされ、バッチ動作のトリガーとなるバッチ属性がアクションにある場合、対応するレスポンス・イベントのパラメータもバッチ属性に属性を置くことになります。
) echartsInstance.off()
イベントハンドラのバインドを解除します。handler はオプションのパラメータで、バインドを解除する必要があるハンドラに渡すことができます。
座標系上の点を含む方法
) echartsInstance.convertToPixel()
メソッドのパラメータリストです：
(
// finder どの座標系を変換に使うか」を示すのに使われる。
// 通常、indexかidかnameを使って場所を特定できる。
finder: {
seriesIndex?: number,
seriesId?: string,
seriesName?: string,
geoIndex?: number,
geoId?: string,
geoName?: string,
xAxisIndex?: number,
xAxisId?: string,
xAxisName?: string,
yAxisIndex?: number,
yAxisId?: string,
yAxisName?: string,
gridIndex?: number,
gridId?: string
gridName?: string
},
// 変換される値。
value: Array|string
// 変換結果は、echartsインスタンスのdomノードの左上隅のピクセル座標値である。[0, 0]
) => Array|string
座標系上の点を ピ ク セル座標値に変換 し ます。
) echartsInstance.convertFromPixel()
メソッドリストのパラメータ：
(
// finder どの座標系を変換に使うか」を示すのに使われる。
// 通常、indexかidかnameを使って場所を特定できる。
finder: {
seriesIndex?: number,
seriesId?: string,
seriesName?: string,
geoIndex?: number,
geoId?: string,
geoName?: string,
xAxisIndex?: number,
xAxisId?: string,
xAxisName?: string,
yAxisIndex?: number,
yAxisId?: string,
yAxisName?: string,
gridIndex?: number,
gridId?: string
gridName?: string
},
// 変換される値はピクセル座標で、echartsインスタンスのdomノードの左上隅である。[0, 0]
value: Array|string
// 変換結果、論理座標値。
) => Array|string
ピ ク セル座標値を論理座標系上の点に変換す る こ と は、 convertToPixel の逆の動作です。
) echartsInstance.containPixel
メソッド・パラメータ・リスト
(
// finder どの座標系や系列で判定するか」を示すのに使われる。
// 通常、indexかidかnameを使って場所を特定できる。
finder: {
seriesIndex?: number,
seriesId?: string,
seriesName?: string,
geoIndex?: number,
geoId?: string,
geoName?: string,
xAxisIndex?: number,
xAxisId?: string,
xAxisName?: string,
yAxisIndex?: number,
yAxisId?: string,
yAxisName?: string,
gridIndex?: number,
gridId?: string
gridName?: string
},
// 決定される点はピクセル座標で、echartsインスタンスのdomノードの左上隅である。[0, 0]
value: Array
) => boolean
指定 し た点が、 指定 し た座標系 ・ 系列上にあ る か ど う か を判定 し ます。
その他のメソッド
) echartsInstance.showLoading(type?: string, opts?: Object)
ローディングアニメーションを表示します。データを読み込む前にローディングアニメーションを表示するには、このインターフェイスを手動で呼び出し、データが読み込まれた後にローディングアニメーションを非表示にするには、hideLoading を呼び出します。
- type オプション。読み込むアニメーションの種類。現在は'default'のみです。
- opts オプション。タイプに関連するロードアニメーションオプション。
) echartsInstance.hideLoading()
ローディングアニメーションの非表示
) echartsInstance.getDataURL()
パラメータリスト
(opts: {
// エクスポート形式、オプション png, jpeg
type?: string,
// エクスポートされるイメージの解像度スケール、デフォルトは1。
pixelRatio?: number,
// エクスポートされたイメージの背景色は、デフォルトでオプションの backgroundColor になる。
backgroundColor?: string,
// 無視するコンポーネントのリスト、例えばツールボックスを無視するには['toolbox']
excludeComponents?: Array.<string>
}) => string
チャートイメージをエクスポートし、イメージの src に設定できる base64 URL を返します。
) echartsInstance.getConnectedDataURL()
パラメータリストの形式
(opts: {
// エクスポート形式、オプション png, jpeg
type?: string,
// エクスポートされるイメージの解像度スケール、デフォルトは1。
pixelRatio?: number,
// エクスポートされたイメージの背景色は、デフォルトでオプションの backgroundColor になる。
backgroundColor?: string,
// 無視するコンポーネントのリスト、例えばツールボックスを無視するには['toolbox']
excludeComponents?: Array.<string>
}) => string
エクスポートされたイメージ内の各チャートの相対位置は、コンテナの相対位置に関連しています。
) echartsInstance.appendData()
(opts: {
// データのシリーズ・シリアル番号を追加する。
seriesIndex?: string,
// データが追加された。
data?: Array|TypedArray,
}) => string
appendDataインターフェイスは、データをスライスしてロードし、大容量データのレンダリングシナリオでインクリメンタルにレンダリングするために使用されます。appendData インターフェイスは、分割してロードした後に増分的にレンダリングする機能を提供し、新しく追加されたデータ ブロックをレンダリングしても、すでにレンダリングされた元の部分が消去されることはありません。 :
- 現在、すべてのダイアグラムがスライス読み込み時のインクリメンタル レンダリングをサポートしているわけではありません。現在サポートされているダイアグラムは、EChartsの基本バージョンでは散布図と折れ線グラフ、ECharts GLでは散布図、折れ線グラフ、ビジュアルクラスターです。
) echartsInstance.clear()
現在のインスタンスをクリアします。インスタンスからすべてのコンポーネントとチャートを削除します。空にした後に getOption を呼び出すと {} 空のオブジェクトを返します。
) echartsInstance.isDisposed
現在のインスタンスがリリースされているかどうか
) echartsInstance.dispose
インスタンスを破棄します。破棄したインスタンスは再利用できません。
