このトピックでは、Echartsダッシュボードのチャートスタイルと構成パネルについて説明します。
チャートスタイル
設定パネル 
検索設定: [設定] パネルの右上隅にある [検索設定] をクリックします。 [検索設定] パネルで、検索する設定項目の名前を入力して、設定項目をすばやく見つけます。 あいまい一致はサポートされていません。 詳細については、「アセット設定の検索」をご参照ください。
Size: ピクセルの幅と高さを含むウィジェットのサイズを示します。 アイコンをクリックする
と、ウィジェットの縦横比をロックし、ウィジェットの幅と高さを同じ比率で変更できます。 このアイコンをもう一度クリックすると、必要に応じて幅と高さを調整できます。 位置: ウィジェットの位置。ピクセルXとYの座標で示されます。 X座標は、ウィジェットの左上隅とキャンバスの左枠の間のピクセル距離を示します。 Y座標は、ウィジェットの左上隅とキャンバスの上枠の間のピクセル距離を示します。
回転角度: ウィジェットの中心点を回転点として使用する回転の角度。 単位は度 (°) です。 次のいずれかの方法を使用して、ウィジェットの回転角度を制御できます。
回転角度スピンボックスに角度を直接入力するか、プラス記号 ([+]) またはマイナス記号 ([-]) をクリックして、回転角度スピンボックスの値を増減します。
アイコンの
黒い点をドラッグして、ウィジェットの回転角度を制御します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。 アイコンをクリックし
て、ウィジェットスタイルを反転します。
Opacity: 有効な値: 0〜1。 このパラメーターが0に設定されている場合、ウィジェットは非表示になります。 このパラメーターが1に設定されている場合、ウィジェットは完全に表示されます。 デフォルト値: 1
グラフ: [+] または [-] 記号をクリックするか値を入力して、ダッシュボードの水平中心と垂直中心を調整します。 単位: % 。
ダイアログボックス: 右側の目アイコンをクリックして、ダイアログボックスを表示します。
トリガー条件: トリガーするトリガーの種類。 [マウス移動トリガー] 、[マウスクリックトリガー] 、および [マウス移動とクリックトリガー] を選択できます。
背景色: ダイアログボックスの背景色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の色: ダイアログボックスの枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] をクリックするか、値を入力して背景フレームの枠の太さを変更します。
ピン留め: [+] または [-] 記号をクリックするか、手動で数値を入力して背景フレームの内側の余白を変更します。 単位: ピクセル。 デフォルトの内側マージンは5です。
テキストスタイル
色: ダイアログボックスのテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: テキストのフォントスタイルを表示します。
フォントの太さ: テキストのフォントの太さを表示します。
フォント: テキストのフォントファミリを表示します。
フォントサイズ: テキストのフォントサイズを表示します。
シリーズ
名前: ダッシュボードの名前を入力します。
半径: ダッシュボードの半径を指定します。これは、コンテナの高さと幅の割合です。
開始角度: [+] または [-] をクリックするか、値を入力してダッシュボードの開始角度を変更します。
終了角度: [+] または [-] をクリックするか、値を入力してダッシュボードの終了角度を変更します。
時計回り: このチェックボックスをオンにすると、ダッシュボードは時計回りに昇順で表示されます。
最小値: [+] または [-] をクリックするか、値を入力してダッシュボードの最小値を変更します。
最大値: [+] または [-] をクリックするか、値を入力してダッシュボードの最大値を変更します。
segments: [+] または [-] 記号をクリックするか、値を入力してダッシュボードのセグメントを変更します。
静的: このチェックボックスをオンにすると、ダッシュボードは静的で、操作できません。
軸
軸スタイル
軸セグメント:
または
アイコンをクリックして、セグメントスタイルを追加または削除します。 
または
アイコンをクリックして、複数のセグメントスタイルの配置スタイルを設定します。 アイコンをクリックし
て、現在選択されているセグメントスタイル設定をコピーし、同じ設定のセグメントスタイルを追加します。 位置: [+] または [-] 記号をクリックしてスライドするか、値を入力してダッシュボードセグメントの位置を変更します。
色: セグメントの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
幅: [+] または [-] 記号をクリックするか値を入力して、セグメントの幅を変更します。
透明度: [+] または [-] 記号をクリックするか値を入力して、セグメントの透明度を変更します。 範囲は [0,1] です。
行セパレータ: 右側の目アイコンをクリックして、行セパレータを表示します。
長さ: [+] または [-] 記号をクリックするか値を入力して、行セパレータの長さを変更します。
軸スタイル
色: カラーピッカーの説明を参照して、行セパレータの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、線区切り線の幅を変更します。
Type: 行区切り軸のタイプ。 オプションです。 値は、実線または破線とすることができる。
透明度: [+] または [-] 記号をクリックするか値を入力して、行セパレータの透明度を変更します。 値の範囲は0から1です。
スケール: 目アイコンをクリックしてスケールを表示します。
segments: [+] または [-] 記号をクリックするか、数値を手動で入力して、軸上のスケールの表示間隔を変更します。 これはカテゴリ軸で有効です。
長さ: スケールの長さを変更するには、[+] または [-] 記号をクリックするか数値を入力します。
軸スタイル
色: カラーピッカーの説明を参照して、チェックマークの色を変更します。
幅: [+] または [-] 記号をクリックするか値を入力して、目盛りの幅を変更します。
Type: チェックマークのタイプ。 オプションです。 有効な値: 実線および破線。
透明度: [+] または [-] 記号をクリックするか値を入力して、目盛りの透明度を変更します。 範囲は [0,1] です。
スケールラベル: 目アイコンをクリックしてスケールラベルを表示します。
Distance: スケールラベルと軸の間の距離。
テキストスタイル
色: スケールラベルの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: スケールラベルテキストのフォントスタイル。
フォントの太さ: スケールラベルのテキストのフォントの太さ。
フォント: スケールラベルテキストのフォントファミリ。
フォントサイズ: スケールラベルテキストのフォントサイズ。
ダッシュボードポインタ: 目アイコンをクリックしてダッシュボードポインタを表示します。
長さ: ダッシュボードポインターの長さ。
Width: ダッシュボードポインターの幅を指定します。
要素スタイル
普通のアイテム
色: カラーピッカーの説明を参照して、共通要素の色を変更します。
枠の色: 共通アイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] 記号をクリックするか値を入力して、通常の要素の枠の太さを変更します。
ボーダースタイル: ボーダーのストロークタイプ。 ストロークタイプは、実線または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 値の範囲は0から1です。
主なアイテム
色: カラーピッカーの説明を参照して、ハイライト要素の背景色を変更します。
枠の色: メジャーアイテム要素の枠の色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
枠サイズ: [+] または [-] をクリックするか、手動で値を入力して、キーアイテムの枠サイズを変更します。
ボーダースタイル: ボーダーのストロークタイプ。 ストロークタイプは、実線または点線です。
透明度: [+] または [-] 記号をクリックするか値を入力して、通常の要素の透明度を変更します。 値の範囲は0から1です。
タイトル: 目アイコンをクリックしてタイトルを表示します。
水平オフセット: [+] または [-] 記号をクリックするか値を入力して、タイトルの水平オフセットを変更します。 範囲は-200から200です。
垂直オフセット: [+] または [-] 記号をクリックするか値を入力して、タイトルの垂直オフセットを変更します。 範囲は-200から200です。
テキストスタイル
色: タイトルテキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: タイトルテキストのフォントスタイル。
フォントの太さ: タイトルテキストのフォントの太さ。
フォント: タイトルテキストのフォントファミリ。
フォントサイズ: タイトルテキストのフォントサイズ。
詳細: 目アイコンをクリックしてタイトルを表示します。
単位: 詳細の単位。
幅: [+] または [-] をクリックするか、値を入力して詳細の幅を変更します。
高さ: [+] または [-] をクリックするか、値を入力して高さを変更します。
水平オフセット: [+] または [-] をクリックするか、手動で数値を入力して詳細の水平オフセットを変更します。 範囲は-200から200です。
垂直オフセット: [+] または [-] をクリックするか、値を入力して詳細の垂直オフセットを変更します。 有効な値: -200から200。
背景色: 詳細の背景色を変更します。 デフォルトでは、背景色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。
枠の幅: [+] または [-] をクリックするか、値を入力して枠の太さを調整します。
枠の色: 詳細の枠の色を変更します。 デフォルトの色は透明です。 詳細については、「カラーピッカーの説明」をご参照ください。
テキストスタイル
色: 詳細テキストの色を変更します。 詳細については、「カラーピッカーの説明」をご参照ください。
フォントスタイル: 詳細テキストのフォントスタイル。
フォントの太さ: 詳細テキストのフォントの太さ。
フォント: 詳細テキストのフォントファミリ。
フォントサイズ: 詳細テキストのフォントサイズ。
アニメーション: アニメーションを有効にするには、このチェックボックスをオンにします。
アニメーションしきい値: [+] または [-] をクリックするか、値を入力してアニメーションしきい値を変更します。 単位：ミリ秒。 1つのシリーズに表示されるグラフィックの数が設定したしきい値を超えると、アニメーション効果が無効になり、コンポーネントがクラッシュしないようになります。
アニメーション期間: [+] または [-] 記号をクリックするか値を入力して、最初のアニメーションの期間を変更します。 単位：ミリ秒。
イーズエフェクト: ドロップダウンリストから、データ更新アニメーションのイーズエフェクトを選択します。 デフォルト値はcubicOutです。
[データ] タブ
設定フィールドの説明
列 | 説明 |
| ダッシュボードの各セクションの名前を構成するために使用します。 |
| ダッシュボードの各セクションの値を設定するために使用します。 |
[インタラクション] タブ
このウィジェットはインタラクションイベントをサポートしていません。
Blueprint Editorでのインタラクションの設定
Canvas Editorでウィジェットを右クリックし、[Blueprint Editorにエクスポート] を選択します。
左上隅の
アイコンをクリックします。 Blueprint Editorで、[追加されたノード] ペインで [ダッシュボード] をクリックします。 次の図に示すように、キャンバスでダッシュボードのパラメーターを表示できます。
Events
イベント
説明
データインターフェイス要求が完了したとき
イベントは、データインターフェイス要求が応答され、フィルターによって処理された後、処理されたJSONデータでトリガーされます。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
データインターフェイス要求が失敗した場合
データインターフェイス要求が失敗したときに返され (ネットワークの問題やインターフェイスのエラーなど) 、フィルターによって処理されるイベント。 イベントは、処理されたJSONデータもスローします。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
action
Action
説明
要求データインタフェース
このアクションは、サーバーデータを再度要求するために実行されます。 アップストリームデータ処理ノードまたはレイヤノードによって送信されたデータは、パラメータとして使用される。 たとえば、APIデータソースが
https:// api.testで、リクエストデータインターフェイスに渡されるデータが{ id: '1'}の場合、最終的なリクエストインターフェイスはhttps:// api.test?id=1です。データのインポート
ウィジェットのデータがその描画フォーマットに従って処理された後、ウィジェットは再描画のためにインポートされる。 サーバーデータを再度リクエストする必要はありません。 特定のデータ例の詳細については、キャンバスエディターの右側の構成パネルにある [データ] タブの [データ応答結果] セクションをご参照ください。
コンポーネント設定の更新
ウィジェットのスタイル設定は動的に更新されます。 [設定] パネルで、[設定をクリップボードにコピー] をクリックして、コンポーネントの設定データを取得します。 その後、Blueprint Editorでデータ処理ノードのスタイルフィールドを変更します。
表示
ウィジェットの例を次に示します。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }非表示
次の例は、ウィジェットを非表示にする方法を示しています。
return{ "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }暗黙の状態への切り替え
次の例は、ウィジェットを表示するか非表示にするかを示しています。
return { "animationIn": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" }, "animationOut": { "animationType": "", "animationDuration": 1000, "animationEasing": "linear" } }移動
ウィジェットを指定した場所に移動します。 参照データの例を次に示します。
return{ // The positioning type. to indicates absolute positioning, whereas by indicates relative positioning. The default value is to. "positionType": "to", // The location, which is indicated by the x and y coordinates. "attr": { "x": 0, "y": 0 }, // The animation type. "animation": { "enable": false, // The duration in which animation is displayed. "animationDuration": 1000, // The animation curve, which can be set to linear|easeInOutQuad|easeInOutExpo. "animationEasing": "linear" } }