How to trigger the legend of echarts to wrap and display the progress bar by pressing enter

This time I will bring you the method of inputting a carriage return to trigger the legend line wrapping of echarts and displaying the progress bar. What are the precautions for the method of entering a carriage return to trigger the legend line wrapping of echarts and displaying the progress bar? The following is a practical case, let’s take a look.

1. Input carriage return event monitoring:

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

2. I encountered a problem at work. When using a pie chart display, too many lengthends resulted in an incomplete display of one line. Therefore, I hope lengend can be displayed in new lines.

The official document provides a way to add '' or '\n' to the data to wrap the display. I have personally tested that this method can be used, but the value of orient cannot be set. Otherwise, when you add a special mark place, there is only one more space, and there is no line breaking effect. Therefore, pay special attention when adding special characters to data.
In addition to this method, setting the position parameter in legend can make the legend automatically wrap. My legend is aligned below and in the group. The following two lines of code are enough: bottom: 0,left: 'center',.
In addition, record itemWidth: set the width of the legend icon, itemHeight: set the height of the legend icon, itemGap: set the gap of the legend icon.

#3. Record the simplest progress bar method, which is generally used to give the user a feeling of progress when making ajax requests.

The effect is roughly as shown in the figure below:

Since it is a screenshot at work, the background has been processed, mainly to see the progress bar.

This effect requires an img and a div, img is a gif image, and both are set to invisible during initialization.

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
}

In the beforeSend of the ajax request, set both to be visible, and add some information such as position and size.

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;
                }
            });

In the complete of the ajax request, just hide the two settings.

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

The above code implements the display method shown in the initial picture, with the rear div occupying the full screen. Specific needs can be modified accordingly.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of css3 shadow

JavaScript array usage collection

The above is the detailed content of How to trigger the legend of echarts to wrap and display the progress bar by pressing enter. For more information, please follow other related articles on the PHP Chinese website!