ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

1、ajax导致Echarts不显示饼图数据、柱状图数据只显示气泡的问题。

　　ajax的同步。这个同步的意思是当JS代码加载到当前ajax的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个ajax执行完毕后才会继续运行其他代码页面假死状态解除。而异步则这个ajax代码运行中的时候其他代码一样可以运行。
　　jQuery的async：false，这个属性。默认是true：异步；false：同步。    
　　默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
　　注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。        

var data1={ "result": [
        {value: 21145381, name: "数量1"},
        {value: 8186053, name: "数量2"},
        {value: 316698, name: "数量3"},
        ]
};

//柱状图，data1是json格式传进去的
function barChart(data1, chart, name) {

    /* var dataList = data1.result;
    var xlabel = [];
    var yvalue = [];
    $(dataList).each(function(i, item) {
        xlabel.push(dataList[i].name);
        yvalue.push(dataList[i].value);
    }); */

    //console.log(xlabel);
    //console.log(yvalue);

    var xlabel_2 = ["数量1", "数量2", "数量3"];
    var yvalue_2 = new Array();
    var applies = new Array();
    var url = 'dataxxxAction!findDataxxx.action';        
    $.ajax({
        type : 'POST',
        url : url,
        dataType : 'json',
        async : false,//ajax同步
        success : function(data) {
            applies = data.result;
            var length = applies.length;
            //......处理操作
            }
        }
    });

    console.log(xlabel_2);
    console.log(yvalue_2);

    // 柱状图
    var memoryOption = {
        tooltip : {
            trigger : 'axis',
            axisPointer : { // 坐标轴指示器，坐标轴触发有效
                type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            formatter : function(params) {
                var relVal = params[0].seriesName + "<br/>";
                relVal += params[0][1] + ' : ' + params[0].data + "<br/>";
                return relVal;
            },
            position : [ 3, 3 ]
        },
        grid : {
            x : '85',
            y : '30',
            x2 : '20',
            y2 : '30',
            borderWidth : '0'
        },
        legned : {
            borderColor : 'rgb(18,60,112)',
        },
        xAxis : [ {
            type : 'category',
            data : xlabel_2,
            axisTick : {
                alignWithLabel : true
            },
            axisLabel : {
                textStyle : {
                    color : 'rgb(164,176,191)',
                    fontSize : '10'
                }
            },
            splitLine : {
                show : false,
            }
        } ],
        yAxis : [ {
            type : 'value',
            axisLabel : {
                textStyle : {
                    color : 'rgb(164,176,191)',
                    fontSize : '13'
                }
            },
            splitLine : {
                show : false,
            }
        } ],
        series : [ {
            name : name,
            type : 'bar',
            data : yvalue_2,
            barWidth : '30',
            itemStyle : {
                normal : {
                    color : (function() {
                        var zrColor = require('zrender/tool/color');
                        return zrColor.getLinearGradient(0, 400, 0, 300, [
                                [ 0, 'rgb(96,188,227)' ],
                                [ 1, 'rgb(96,188,227)' ] ])
                    })(),
                    label : {
                        show : true,
                        formatter : function(params) {
                            if (params.data == '80.01') {
                                params.data = '80';
                            }
                            var relVal = params.data;
                            return relVal;
                        },
                        textStyle : {
                            fontSize : '16'
                        },
                        position : 'top'
                    }
                }
            },
        } ]
    };
    chart.setOption(memoryOption, true);
}

我是这样搞的报表，但是呢，一开始使用的异步，这就出现这个问题了，首先它是代码一起运行，导致运行了初始值0，报表只显示了气泡，不显示报表数据，搞了一天才发现，使用chrome的f12分析，开始都没有意识到，先执行了一遍是空的，但是又执行了一遍数据的，最后还是没有数据填充报表。最后才发现问题，使用了ajax同步才搞定。使用json预定义的数据是有的，报表正常分析了好久，记录一下。方便以后查询原因。

待续.....