Enter キーを押して echart の凡例をトリガーして進行状況バーをラップして表示する方法

今回は、Enterキーを押してechartsの凡例をトリガーしてプログレスバーをラップして表示する方法をお届けします。 Enterキーを押してechartsの凡例をトリガーしてプログレスバーをラップして表示する方法の注意点は何ですか？以下は実際的なケースです。 1 立ち上がって見てください。 1. 入力キャリッジリターンイベント監視:

$('.search-input').bind('keypress',function(event){            if(event.keyCode == "13")
            {
              回车后所触发的事件
            }
        });

2. 円グラフ表示を使用するときに、lennded が多すぎると 1 行の表示が不完全になるという問題が発生しました。新しい行。

公式ドキュメントには、表示をラップするためにデータに''または'n'を追加する方法が記載されていますが、この方法が使用できることを個人的にテストしましたが、それ以外の場合は、特別なマークを追加する場所にorientの値を設定できません。のみ 余分なスペースは 1 つだけであり、改行効果はありません。そのため、データに特殊文字を追加する場合は特に注意してください。

この方法に加えて、凡例に位置パラメータを設定すると、凡例がグループ内で下に配置されます。bottom: 0,left: 'center', という 2 行のコードで十分です。
さらに、 itemWidth: 凡例アイコンの幅を設定、 itemHeight: 凡例アイコンの高さを設定、 itemGap: 凡例アイコンのギャップを設定します。

3. 最も単純なプログレスバーメソッドを記録します。これは、一般に、Ajax リクエストを行うときにユーザーに進行状況を知らせるために使用されます。

効果はおおよそ下の写真の通りです:

仕事中のスクリーンショットなので、主にプログレスバーを表示するために背景を少し加工しています。

このエフェクトには img と div が必要です。img は gif 画像で、両方とも初期化中に非表示に設定されます。

html

![](/img/list/process.gif)
  <div id="maskOfProgressImage" class="mask" style="display:none"></div>

css

.progress {  z-index: 2000;  width: auto;  height: auto;
}.mask {  position: fixed;  top: 0;  right:0,
  bottom: 0;  left: 0;  z-index: 1000;  background-color: $blueBg
}

ajaxリクエストのbeforeSendで、両方を可視に設定し、位置やサイズなどの情報を追加します。

var img = $("#progressImgage");var mask = $("#maskOfProgressImage");
 mask.show().css({                "opacity": "0.5"
            });
            img.show().css({                "position": "fixed",                "top": "40%",                "left": "45%",                "margin-top": function () {                    return -1 * img.height() / 2;
                },                "margin-left": function () {                    return -1 * img.width() / 2;
                }
            });

ajax リクエストの完了で、2 つを非表示に設定するだけです。

img.hide();mask.hide();

上記のコードは、最初の図に示されている表示メソッドを実装しています。後部の div は、必要に応じて変更できます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3シャドウの詳細な説明

JavaScript配列の使用法集

以上がEnter キーを押して echart の凡例をトリガーして進行状況バーをラップして表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。