前端那些事【Echarts 出现的问题】

【问题描述】
打开页面后，Echarts 界面只展示一部分界面，无法展示整个echarts图表信息，影响页面美观及布局
【解决方案】
可以通过window方法中的load 方法及resize方法进行加载这样子的话，echarts信息就会完成加载了
可以使用echarts.reseize()方法进行调用进行重新加载

javascript 代码块

// 初始化echarts
var MachineChart = echarts.init(document.getElementById('chart5'));
var MachineData = [];
        $.ajax({
            url:'http://IP地址:端口/api/machineNumber',
            type:'get',
            async:false,
            dataType:'json',
            jsonp:"callback",
            jsonpCallback:"callback",
            success:function(data){
            	// 判断服务器的返回值Code 是否为200
                if(data.code!=200) return false;
                MachineData = data.data;
            }
        });

        Machineoption = {
            grid:{
                top:'1%',
                bottom:'10%',
                left:'20%',
                right:'8%'
            },
            dataset: {
                source:MachineData
            },
            xAxis:[{
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                
            }],
            yAxis: [{
                type: 'category',
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    },
                    itemStyle:{
                        color:'#DB5A6B'
                    }
                }
            }],
            tooltip: {
                    trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        //   color:'#fff',
                    formatter: function(params) {
                        // 系列
                        let html =  '';
                        for (var i = 0; i < params.length; i++) {
                            // 获取每个系列对应的颜色值
                            html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#f0f;"></span>'+"设备编号 : "+params[i].data[0] +"<br>";
                            html += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#ff0;"></span>'+"测试数据 : "+params[i].data[1]+'条' +"<br>";
                        }
                        return html;
                    }
            },
            series: [
              {
                type: 'bar',
                barWidth:16,
                
                encode: {
                  // Map the "amount" column to X axis.
                  x: 'amount',
                  // Map the "product" column to Y axis
                  y: 'product', 
                  itemStyle:{
                    borderRadius:8,
                  }
                },
              }
            ]
        };
window.addEventListener("load",function(){
    MachineChart.resize();
});
window.addEventListener("resize",function(){
    MachineChart.resize();
});