echart动态加载数据

<!DOCTYPE html>

<head>

    <meta charset="utf-8">

    <title>ECharts</title>

</head>

<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->

    <div id="main" style="height:400px"></div>

    <!-- ECharts单文件引入 -->

    <script src="js/dist/echarts.js"></script>

    <script src="Scripts/jquery-2.1.4.min.js"></script>

    <script type="text/javascript">

     var uri = 'api/echart_test'

    // 路径配置

    require.config({

        paths:{

            echarts: 'js/dist'

    }

    });

    // 使用

    require(

        [

            'echarts',

            'echarts/chart/bar',

            'echarts/chart/line',

            'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载

        ],

        drewEcharts

    );

    function drewEcharts(ec) {

        // 基于准备好的dom，初始化echarts图表

        myChart = ec.init(document.getElementById('main'));

        var option = {

            tooltip: {

                show: true

            },

            legend: {

                data:['销量']

            },

            xAxis : [

                {

                    type : 'category',

                    data : (function(){

                        var arr=[];

                        $.ajax({

                            type : "get",

                            async : false, //同步执行

                            url : uri,

                            data : {},

                            dataType : "json", //返回数据形式为json

                            success : function(result) {

                                if (result) {

                                    for(var i=0;i<result.length;i++){

                                        console.log(result[i].name);

                                        arr.push(result[i].name);

                                    }

                                }

 

                            },

                            error : function(errorMsg) {

                                alert("error");

                                myChart.hideLoading();

                            }

                        })

                        return arr;

                    })()

                }

            ],

            yAxis : [

                {

                    type : 'value'

                }

            ],

            series : [

                {

                    "name":"销量",

                    "type": uri,

                    "data":(function(){

                        var arr=[];

                        $.ajax({

                            type : "get",

                            async : false, //同步执行

                            url : uri,

                            data : {},

                            dataType : "json", //返回数据形式为json

                            success : function(result) {

                                if (result) {

                                    for(var i=0;i<result.length;i++){

                                        console.log(result[i].num);

                                        arr.push(result[i].num);

                                    }

                                }

                            },

                            error : function(errorMsg) {

                                alert("error!");

                                myChart.hideLoading();

                            }

                        })

                        return arr;

                    })()

 

                }

            ]

        };

        // 为echarts对象加载数据

        myChart.setOption(option);

    }

    </script>