Echarts ajax异步 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Ajax2</title>

    <script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/echarts.js" type="text/javascript"></script>

</head>
<body>

  <div id="chartmain" style="width:600px; height: 400px;"></div>
  <div id="t1"></div>
  <div id="t2"></div>
  <div id="t3"></div>
  <script type="text/javascript">
      //初始化echarts实例
      var myChart = echarts.init(document.getElementById('chartmain'));

      //设置图标配置项
      myChart.setOption({
          title: {
              text: 'ECharts 异步加载数据'
          },
          tooltip: {},
          legend: {
              data: ['访问量']
          },
          xAxis: {
              data: []
          },
          yAxis: {},
          series: [
                {
                    name: '访问量',
                    type: 'bar',
                    data: []
                }
            ]
            })

            myChart.showLoading();

            $.ajax({
                url: '/Home/MyData_Test',
                async: true,
                dataType: 'json',
                success: function (data) {

                     /*判断是否取到json对象
                    $("#t1").html(data[0].Name + ',' + data[0].Data);
                    $("#t2").html(data[1].Name + ',' + data[1].Data);
                    $("#t3").html(data[2].Name + ',' + data[2].Data);*/

                    //将json对象转换成对应的数组！
                    //var a = [data[0].Name, data[1].Name, data[2].Name, data[3].Name];
                    //var b = [data[0].Data, data[1].Data, data[2].Data, data[3].Data];
                    
                    //声明数组
                    var a = new Array();
                    var b = new Array();
                    //给数组赋值,将json对象中的属性赋值给数组
                    for (i = 0; i < getJsonObjLength(data); i++) {
                        a.push(data[i].Name);
                        b.push(data[i].Data);
                    };

                    myChart.hideLoading();
                    myChart.setOption({
                        xAxis: {
                            data: a
                        },
                        series: [{
                            name: '访问量',
                            data: b
                        }]
                    })
                }
            })


            //*********获取json对象个数**********//
            function getJsonObjLength(jsonObj) {
                var Length = 0;
                for (var item in jsonObj) {
                    Length++;
                }
                return Length;
            }

  </script>
    
</body>
</html>

 

posted @ 2017-08-29 08:51  youguess  阅读(248)  评论(0)  编辑  收藏  举报