您的位置:首页 > 其它

ajax 与echarts的结合

2016-03-10 18:28 211 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/qq_17327119/article/details/50849055  <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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: