ECharts3 实现 AJAX异步加载 数据库数据

ECharts3的文档里其实对异步加载说的很明白，但是示例都是生成的随机数据，大多数应用是直接读数据库数据然后动态加载到ECharts图表里的，简单的思路就是把需要显示的数据库数据封装成json格式，然后异步获取json数据，解析显示在图表里。

生成json数据不多说了，js重要部分如下：

    var startTime1=$("#start").html();
    var endTime1=$("#end").html();
    url="data/toEcharts.asp?t1="+startTime1+"&t2="+endTime1;
    //上述部分根据需要灵活设置

    makecharts(url);
    //setInterval("makecharts(url)",10000);
    //定时加载数据可以使用setInterval("makecharts(url1)",10000);

     var makecharts = function(url){
     var myChart = echarts.init(document.getElementById('main'));
     var timeInterval=$("#disp").html();
     $.get(url).done(function (data) {
        data=data.replace(/\s+/g,"");
        if (data.substr(0,1)=="0") 
        {
            $('#main').html("今日无流通记录！");
            return;
        };
        //var ldata={分配地址: ["新区自科一"], 流通量: [2]}
        //json数据格式
        var ldata=$.parseJSON(data);
        myChart.setOption({
            toolbox: {
            show: true,
                feature: { 
                    dataView: {show: true},
                    magicType:{show:true,type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true},

            }

            },
            title: {
                text: '书库借阅量统计',
                x: 'left',
                subtext: timeInterval,
            },
            grid:{
                top: 80,
                bottom:80,
            },

            tooltip: {
            },
            legend: {
                textStyle:{color:'#000',fontFamily:'宋体',},
                data:['流通量'],
            },

            xAxis: {
                axisLabel:{
                    textStyle:{color:'#000',fontFamily:'宋体'}, 
                },
                data: ldata.分配地址
            },
            yAxis: {
                axisLabel:{textStyle:{
                    color:'#000',
                    fontFamily:'宋体'}, 

                },

            },
            series: [{
                name: '流通量',
                type: 'bar',
                label: {
                    normal: {
                        show: true,
                        position: 'top'
                    }
                },
                data: ldata.流通量

            }]
        });
    });
 };