异步加载 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);
原文地址:https://www.cnblogs.com/zychengzhiit1/p/4534867.html