ajax 与echarts的结合

 <script type="text/javascript">             
           $(function(){ 
         
/* $.post('tphospital_reportGraphics.action','',function(result){
var results = result.jsonarray;
var a =eval('('+results+')'); //eval 解析成对象
for(var i=0;i<a.length;i++){
yy.push(a[i].name);
ll.push(a[i].tel);
}
alert(ll);

},'json'); */
          $.ajax({ 
               type: "post", 
              url: "tphospital_reportGraphics.action", //获取路径请求
              cache:false,                
               dataType: "json", 
                success: function(result){ 
                  var yy=[];              
                var ll=[];
                var gg=[];
                var results = result.jsonarray;    //解析json数据            
                var a =eval('('+results+')');              
                for(var i=0;i<a.length;i++){       //拿出数据放到数组    
        yy.push(a[i].name);            
        ll.push(a[i].tel);
        gg.push(a[i].address);
        }                
                 var myChart = echarts.init(document.getElementById('main')); 
                     
                     var option = {
                     tooltip : {
                           trigger: 'axis',
                           axisPointer : {            // 坐标轴指示器,坐标轴触发有效
                               type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
                           }
                       },
                          
                         legend: {
                             data:['客流量','浏览量']
                         },
                         
                         xAxis : [
                             {
                                 type : 'category',
                                 data : yy
                             }
                         ],
                         yAxis : [
                             {
                                 type : 'value'
                             }
                         ],
                         series : [
                             {
                                 "name":"浏览量",
                                 "type":"bar",                                  
                                 "data":ll,
                                 itemStyle: {
                                     normal: {
                                    color:'green'
                                     }}
                             },
                        
                             {
                                 "name":"客流量",
                                 "type":"bar",
                                 "data":gg,
                                 itemStyle: {
                                     normal: {
                                    color:'red'
                                     }}
                             }
                         ]
                     };
                  
                     // 为echarts对象加载数据 
                     myChart.setOption(option); 
               
               } 
          


        });
           
        })                          
    </script>


</head>


<body >
    <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值