解决Ajax获取到数据放入echarts里不显示最有效的解决方法

时间:2021-04-03 18:57:21

废话不多说,直接上码:

var temp = [];
var tempArray = [];
var data;

$.ajax({
   type : "post",
   url:"http://192.168.0.12:9090/sqk/app/data/alipay?id=20171024",
   data : {},
   dataType : "json",    
   success : function(data) {
       if (data) {
        $.each(data, function (index, value) {
            tempArray.push(value.pay_date,value.num);
            temp.push(tempArray);
            tempArray = [];
        }) 

        data = temp;
        setOption(data); 
    }
},
    error : function(errorMsg) {
         //请求失败时执行该函数
         alert("图表请求数据失败!");
     }
}) 




function setOption(data){
    // 基于准备好的dom,初始化echarts实例

    var myChart = echarts.init(document.getElementById('main'));

    myChart.showLoading();

    var dateList = data.map(function (item) {
        return item[0];
    });
    var valueList = data.map(function (item) {
        return item[1];
    });

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            data: dateList
        },
        yAxis: {
            splitLine: {show: false},
            type: 'value'
        },
        series: [
        {
            name:'红包领取',
            type:'line',
            stack: '总量',
            data:valueList
        }
        ]
    };

    myChart.setOption(option);

    myChart.hideLoading();
}