About chartjs screen size adaptation

html Code

<div class="">
   <div id="popChart" style="width: 100%;height:300px;"></div>
</div>

quote echarts.js

<!--echarts-->
	<script src="/js/chart/echarts.min.js" type="text/javascript"></script>

js Code

let system = "";
    if ($('#source').val().length != 0){
    
        system += '-'+ $('#source option:selected').text();
    }
    let text = '【'+$('#year').val()+system+'】 Quantity histogram ';
    let myChart = echarts.init(document.getElementById('popChart'));
    myChart.clear();
    $.ajax({
    
        method: 'get',
        url: "xxx/list",
        data: date,
        success: function (r) {
    
            if (r.code == 0) {
    
                let dataTrans = JSON.parse(r.msg);
                let option = {
    
                    title:{
    
                        text: text, // title 
                        x: 'center', // Horizontal center 
                    },
                    tooltip: {
    
                        trigger: 'item',
                        formatter: "{b} : {c}" // Mouse hover display x/y The value of the shaft 
                    },
                    //x Axis 
                    xAxis: {
    
                        name: ' month ',
                        type: 'category',
                        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
                    },
                    //y Axis 
                    yAxis: {
    
                        name: ' Number ',
                    },
                    series: [{
    
                        data: [
                            dataTrans['januaryNum'],
                            dataTrans['februaryNum'],
                            dataTrans['marchNum'],
                            dataTrans['aprilNum'],
                            dataTrans['mayNum'],
                            dataTrans['juneNum'],
                            dataTrans['julyNum'],
                            dataTrans['augustNum'],
                            dataTrans['septemberNum'],
                            dataTrans['octoberNum'],
                            dataTrans['novemberNum'],
                            dataTrans['decemberNum']
                        ],
                        type: 'bar', // Icon type   Histogram 
                        itemStyle: {
    
                            background:'#3A7BD5', //  Graphic color 
                            normal: {
    
                                color: '#3A7BD5', // The font color 
                                label: {
    
                                    show: true, // Turn on the display 
                                    position: 'top', // Show above 
                                    textStyle: {
    
                                        // Numerical pattern 
                                        color: '#3A7BD5', // Numeric color 
                                        fontSize: 12, // font size 
                                    },
                                },
                            },
                        },
                    }]
                };
                myChart.setOption(option, true); // Load data 
                // Screen adaptation key code 
                window.addEventListener("resize", function () {
     myChart.resize(); });
            } else {
    
                layer.msg(r.msg);
            }
        }
    });

The effect is shown below ：