input回車觸發echarts的legend換行並且顯示進度條的方法

這次帶給大家input回車觸發echarts的legend換行並且顯示進度條的方法，input回車觸發echarts的legend換行並且顯示進度條的方法的注意事項有哪些，下面就是實戰案例，一起來看一下。

1.input回車事件監聽：

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

2.工作上遇到一個問題，使用餅狀圖展示時，lengend過多而導致一行顯示不全的問題，所以，希望lengend可以換行顯示。
官方文件提供了一種方式，在data中加入''或'\n'即可換行顯示，親測這種方式可以使用，但是不能設定orient 的值，否則，在你加上特殊標示的地方，只能多了個空格而已，並沒有換行的效果，所以，給data添加特殊符時特別注意一下。
除此方法外，在legend設定位置參數即可使圖例自動換行，我的圖例是在下方，群組中對齊，以下兩行程式碼即可：  bottom: 0,left: 'center',。
除此之外，記錄一下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請求的complete中，將二者設定隱藏即可。

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

以上程式碼實現的是一開始圖中所示的顯示方式，後方div佔滿全屏，具體需求可進行相應修改。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

css3陰影的詳細解

#JavaScript的陣列使用集合
# #

以上是input回車觸發echarts的legend換行並且顯示進度條的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！