Two examples of two methods of echart adaptive width

1. The adaptive width of multiple charts on a page can be used

Note: It should be written behind multiple charts, and cannot be written one by one, an error will occur.

//Check changes according to the size of the window = function(){
    ();
    ();    //If there are multiple chart changes, please write more 
}

2. If multiple charts on a page are requiredListen to change widths separatelyIf so, use (can be written one by one)

("resize",function(){
     ();
});

3. If you want to adapt to height and width

• First of all, your initial div must have an initial height and width (because echart drawing requires width and height)
• You need to write a JavaScript method to get the height and width of your current div;
• Then listen to the changes in your current height and width by listening to events

For example:

// es5
function fn(){// Used to make chart adaptive height and width, calculate the container height and width through the form height and width    //var height=$("#divID").height()
    //or    var height=("divID").offsetHeight
    var width=("divID").offsetWidth
};
 
fn ();//Set the container height and width 
//The window size has changed, code://Method 1 = function () {// Method for making chart adaptive    fn ();//Reset the height and width of the container    ();
}
 
//Method 2("resize",function(){   //monitor    fn ();//Reset the height and width of the container    ();
})

Appendix: When switching between echart multi-charts, the chart width becomes 100px, not 100%

There are the following charts on the page that need to be displayed

Now I hope that the graph size will also change when the page is zoomed. The first thing that comes to mind is to set the width to 100%, but when I switched before "Total", "Bonus points", and "Deduction", I found that the chart width became 100px (if the width you set is a fixed size, such as 500px, then there will be no problem), which is the reason for echart itself. So how to solve the problem of chart adaptation? Now there is the following code (only the main part of the code is displayed)

<!--Chart container-->
<div class="tab-pane active" >
    <!-- Total container -->
    <div  style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" >
    <!-- Add points container -->
    <div  style="width: 100%;height:518px;"></div>
</div>
<div class="tab-pane" >
    <!-- Point deduction container -->
    <div  style="width: 100%;height:518px;"></div>
</div>
<script>
    $.get('Requested url', function (response) {
            var total_id = "total_chart";
            var add_id = "add_chart";
            var deduction_id = "deduction_chart";
            // Total table            chart(total_id);
            // bonus list            chart(add_id);
            // Deduction table            chart(deduction_id);
        }, 'json')
    function chart(chart_id) {
        var myChart = ((chart_id));
        var myOption;
        // Omit most codes        // Use established configuration items and data to display charts        (myOption);
        // Listen to click events        ("click", function () {
            ();
        });
        // Listen to the browser page zoom event        ("resize", function () {
            ();
        });
    }
</script>

() in echart can be implemented, so what we need to do is how to trigger the resize() operation when the page is scaled or switched to the tab? Notice the two event listening in the above code.

The first is to listen to click operations. As long as you switch the "total", "plus points" and "deduct points" in the page, then () will be triggered, so the size of the chart will change, because we set width to 100%, so it will change according to the current chart container.

The second is the page zoom event, which is the same as click. It is recommended to write both, so that the chart size will change accordingly whether you switch tabs or page zoom.

Summarize

This is the end of this article about echart adaptive width. For more related echart adaptive width content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!