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") { 回车后所触发的事件 } });
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.
The effect is roughly as shown in the figure below:
This effect requires an img and a div, img is a gif image, and both are set to invisible during initialization.
![](/img/list/process.gif) <div id="maskOfProgressImage" class="mask" style="display:none"></div>
.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 }
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; } });
img.hide();mask.hide();
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!