0. BUG展示

var lels = [];
for (var i = 0; i < maxDevNums + 1; i++) {
    lels.push([]);
}
$.ajax({
    type : "post",
    async : true,
    url : "/sc/comb/history/data",
    data : {},
    dataType : "json",
    success : function (result) {
        if (result) {
            for (let i = 0; i < result.length; i++) {
                lels[result[i].combDevId].push(result[i].combLel);
            }
            console.log(lels);
        }
        console.log("在ajax请求中获取数组长度：" + lels[1].length)
    },
    error : function(errorMsg) {
        alert("图表请求数据失败");
    }
})

console.log("在ajax请求外获取数组长度：" + lels[1].length);

for (let i = 1; i < lels.length; i++) {
    var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
    if (lels[i].length > 0) {
        var lel = lels[i][lels[i].length - 1];
        gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
    } else {
        gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
    }
    gaugeChart.setOption(gaugeOption);
    $(window).resize(gaugeChart.resize);
}

在这里插入图片描述

1. BUG修复

将async : true修改为async : false
将async : true修改为async : false
将async : true修改为async : false

var lels = [];
for (var i = 0; i < maxDevNums + 1; i++) {
    lels.push([]);
}
$.ajax({
    type : "post",
    async : false,
    url : "/sc/comb/history/data",
    data : {},
    dataType : "json",
    success : function (result) {
        if (result) {
            for (let i = 0; i < result.length; i++) {
                lels[result[i].combDevId].push(result[i].combLel);
            }
            console.log(lels);
        }
        console.log("在ajax请求中获取数组长度：" + lels[1].length)
    },
    error : function(errorMsg) {
        alert("图表请求数据失败");
    }
})

console.log("在ajax请求外获取数组长度：" + lels[1].length);

for (let i = 1; i < lels.length; i++) {
    var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
    if (lels[i].length > 0) {
        var lel = lels[i][lels[i].length - 1];
        gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
    } else {
        gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
    }
    gaugeChart.setOption(gaugeOption);
    $(window).resize(gaugeChart.resize);
}

在这里插入图片描述

2. 原因分析

其实我也不太清楚，有大佬清楚的话，可以在评论区发一下

3. 附：完整代码

<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('百度ECharts')" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备1</h5>
                    <!--<div class="ibox-tools">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        &lt;!&ndash;<ul class="dropdown-menu dropdown-user">
                            <li><a href="#">查看当前设备详细信息</a></li>
                            &lt;!&ndash;<li><a href="#">查看历史可燃气体浓度</a></li>&ndash;&gt;
                            <li><a href="javascript:void(0)" οnclick="$.modal.open('历史可燃气体浓度', '/sc/map/comb-history');">查看历史可燃气体浓度</a></li>
                        </ul>&ndash;&gt;
                    </div>-->
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart1"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备2</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart2"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备3</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart3"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备4</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart4"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备5</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart5"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备6</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart6"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备7</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart7"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备8</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart8"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备9</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart9"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备10</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart10"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备11</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart11"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备12</h5>
                </div>
                <div class="ibox-content">
                    <div class="echarts" id="echarts-gauge-chart12"></div>
                    <div align="right"><button type="button" class="btn btn-success btn-sm" href="javascript:void(0)" onclick="$.modal.open('历史可燃气体浓度', '/sc/comb/history');">历史可燃气体浓度与设备信息</button></div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script type="text/javascript">
    $(function () {
        var maxDevNums = 12;

        var gaugeData = [{value: 98, name: 'lel'}]

        var gaugeOption = {
            /*title : {
                text: '运行状态: '
            },*/
            tooltip : {
                formatter: "{a} <br/>{c} {b}"
            },
            /*toolbox: {
                show : true,
                feature : {
                    dataView : {show: true, readOnly: false},
                    mark : {show: true},
                    /!*restore : {show: true},
                    saveAsImage : {show: true}*!/
                }
            },*/
            series : [
                {
                    name:'浓度',
                    type:'gauge',
                    min:0,
                    max:100,
                    splitNumber:10,
                    axisLine: {            // 坐标轴线
                        lineStyle: {       // 属性lineStyle控制线条样式
                            width: 10
                        }
                    },
                    axisTick: {            // 坐标轴小标记
                        length :15,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle控制线条样式
                            color: 'auto'
                        }
                    },
                    splitLine: {           // 分隔线
                        length :20,        // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    title : {
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder',
                            fontSize: 20,
                            fontStyle: 'italic'
                        }
                    },
                    detail : {
                        fontSize: 20,
                        formatter: '{value}%',
                        textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                            fontWeight: 'bolder'
                        }
                    },
                    data: gaugeData
                }
            ]
        };

        var lels = [];
        for (var i = 0; i < maxDevNums + 1; i++) {
            lels.push([]);
        }
        $.ajax({
            type : "post",
            async : false,
            url : "/sc/comb/history/data",
            data : {},
            dataType : "json",
            success : function (result) {
                if (result) {
                    for (let i = 0; i < result.length; i++) {
                        lels[result[i].combDevId].push(result[i].combLel);
                    }
                    console.log(lels);
                }
                console.log("在ajax请求中获取数组长度：" + lels[1].length)
            },
            error : function(errorMsg) {
                alert("图表请求数据失败");
            }
        })

        console.log("在ajax请求外获取数组长度：" + lels[1].length);

        for (let i = 1; i < lels.length; i++) {
            var gaugeChart = echarts.init(document.getElementById("echarts-gauge-chart" + i));
            if (lels[i].length > 0) {
                var lel = lels[i][lels[i].length - 1];
                gaugeOption.series[0].data = [{value: lel, name: 'lel'}]
            } else {
                gaugeOption.series[0].data = [{value: 0, name: 'offline'}]
            }
            gaugeChart.setOption(gaugeOption);
            $(window).resize(gaugeChart.resize);
        }
    });
</script>
</body>
</html>