異步加載 Echarts圖的數據

　　

<script src="~/Scripts/NewEcharts/echarts.js"></script>
<script type="text/javascript">
    var myChart;

    $(function () {

        load();
    });

    function load() {
        require.config({
            paths: {
                //echarts: '../Scripts/Echartsjs'
                echarts: '../Scripts/NewEcharts'
            }
        });
        require(
            [
                'echarts',
                'echarts/chart/bar'
                //'echarts/chart/line'
                //'echarts/chart/map'
            ],
            DrawEchart
        );
    }

    function DrawEchart(ec) {

        //--- 折柱 ---
        myChart = ec.init(document.getElementById('EchartsDiv'));

        //圖表顯示提示信息
        myChart.showLoading({
            text: "圖表數據正在努力加載..."
        });
        //定義圖表
        var option = {
            tooltip: {
                trigger: 'axis'
            },
            //color: '#66B3FF',
            animation: false,
            addDataAnimation: false,
            calculable: true,
            xAxis: [
                {
                   
                    type: 'value',
                    boundaryGap: [0, 0.01]
                }
            ],
            yAxis: [
                {
                    splitLine: {
                        show: false
                    },//分隔線
                    //splitArea: { show: false },//分隔區域
                    type: 'category',
                    // data: ['巴西', '印尼', '美國', '印度', '中國', '世界人口(萬)']
                    data:[]
                }
            ],
            series: [
                {
                    name: '資源使用情況',
                    color: '#66B3FF ',
                    type: 'bar',
                    // data: [18203, 23489, 29034, 104970, 131744, 630230]
                    data:[]
                }
            ]
        };


        //通過Ajax獲取數據
        $.ajax({
            type: "post",
            async: false, //同步執行
            url: "/Report/GetVMUsedInfo",
            dataType: "json", //返回數據形式為json
            data: {rnd:Math.random()},
            success: function(result) {
                if (result) {
                    //將返回的category和series對象賦值給options對象內的category和series
                    //因為xAxis是一個數組 這里需要是xAxis[i]的形式
                    option.yAxis[0].data = result.yAxis;
                    option.series[0].data = result.series;
                    myChart.hideLoading();
                    myChart.setOption(option);
                }
            },
            error: function(errorMsg) {
                alert("圖表請求數據失敗啦!");
            }
        });
        //myChart.hideLoading();
        //myChart.setOption(option);
    }
</script>

返回用的是 json數據；

后台使用的Asp.net MVC,使用了匿名類（主要是為了方便），

   var newObj = new
                {
                    yAxis =result.Data.DanweiList,
                    series= result.Data.ApplyVMEventList
                };
            
            return Json(newObj, JsonRequestBehavior.AllowGet);