码迷,mamicode.com
首页 > 其他好文 > 详细

异步加载 Echarts图的数据

时间:2015-05-28 07:04:28      阅读:6329      评论:0      收藏:0      [点我收藏+]

标签:

  

<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);

 

异步加载 Echarts图的数据

标签:

原文地址:http://www.cnblogs.com/zychengzhiit1/p/4534867.html

(8)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!