解决echarts 动态绑定数据无法渲染的问题

背景：今天实现了个柱状图，遇到echarts无法动态绑定并渲染成图。一开始以为是数据问题，一直再调后端的数据格式，最后debugger前端发现不是数据格式引起的问题。而是浏览器异步执行js脚本机制导致的，echarts图渲染在前，数据赋值在后了，导致了无法正常渲染。

问题复现:

请看我的后端接口：

请看我的前端：我把数据请求的这个script放到了，echarts图表渲染前面了，目的就是为了想要先执行它，获取相关数据给echarts。但由于浏览器是多线程异步执行的，不同线程的脚本并不是根据代码位置顺序执行的。所以造成了此次渲染失败。

<script>
    var mydata=[];
    $(  function(){
        $.ajax({
            type:"GET",
            url:"http://localhost:8080/getCount",
            dataType:"json",
            async:false,
            success:function(data){
                mydata=data
                console.log(mydata);

                debugger;

            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        })}

    );
</script>

<script type="text/javascript">

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '数据统计'
        },
        tooltip: {},
        legend: {
            data: ['信息统计']
        },
        xAxis: {
            data: ['订单量','客户量','处理中']
        },
        yAxis: {},
        series:  [
            {
                name: '信息统计',
                type: 'bar',
                data: mydata
            }
        ]
    };
    debugger;
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    $(window).resize(myChart.resize);


</script>

请看我的debugger：

1、浏览器先执行了，echarts的脚本代码

 2、紧接着，又执行了含有ajax请求数据的脚本代码

 问题解决：

方法：将echarts渲染脚本放到回调函数里面就可以，这样就可以保证先执行请求数据，后执行渲染了。下面是我正确的代码。

<script>
    var mydata=[];
    $(  function(){
        $.ajax({
            type:"GET",
            url:"http://localhost:8080/getCount",
            dataType:"json",
            async:false,
            success:function(data){
                mydata=data
                console.log(mydata);
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));

                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: '数据统计'
                    },
                    tooltip: {},
                    legend: {
                        data: ['信息统计']
                    },
                    xAxis: {
                        data: ['订单量','客户量','处理中']
                    },
                    yAxis: {},
                    series:  [
                        {
                            name: '信息统计',
                            type: 'bar',
                            data: mydata
                        }
                    ]
                };
                debugger;
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                debugger;

            },
            error:function(jqXHR){
                console.log("Error: "+jqXHR.status);
            }
        })}

    );
</script>

修改后的debugger数据：

问题解决，正常渲染了：