码迷,mamicode.com
首页 > Web开发 > 详细

Echarts ajax动态加载json数据

时间:2015-07-31 13:08:08      阅读:282      评论:0      收藏:0      [点我收藏+]

标签:echarts   ajax   动态数据   

后台php写的,给前台准备好json格式数据

 public function actionGetOffline(){
      $userid = Yii::$app->user->identity->user_id;
      $connection = Yii::$app->db;
      $command = $connection->createCommand("SELECT proc_phase_id from tb_pro where user_id like '%$userid%';");
      $data = $command->queryAll();
        // var_dump($data);
        // die();
      $count = array(0,0,0,0,0,0,0);
    foreach ($data as $value) {
      foreach ($value as $value1) {
      switch ($value1){
        case 0:
            $count[0]=$count[0]+1;
            break;
        case 1:
            $count[1]=$count[1]+1;
            break;
        case 3:
            $count[2]=$count[2]+1;
            break;
        case 6:
            $count[3]=$count[3]+1;
            break;
        case 10:
            $count[4]=$count[4]+1;
            break;
        case 12:
            $count[5]=$count[5]+1;
            break;
        case 16:
            $count[6]=$count[6]+1;
            break;
        }
      }
    }
      $res = array('countData'=>$count);
      // var_dump($res);
      // die();
      return json_encode($res);
    }

json数据格式如下:
技术分享
前台Echarts直方图显示,数据通过ajax获得:
<head>  
    <meta charset="utf-8">  
    <title>Charts demo</title>  
    <script src="<?php echo Yii::getAlias('@web')?>/js/jquery.easing.min.js" type="text/javascript"></script>
    <script src="<?php echo Yii::getAlias('@web')?>/js/echarts.js"></script>  
</head>  
<body>  

 	<div id="main" style="height:400px;"></div> 
 	<script type="text/javascript">  

        // 路径配置  
        require.config({
            paths: {
                echarts: '<?php echo Yii::getAlias('@web')?>/js/dist'
            }
        });

        // 使用  
        require(
            [
                'echarts',
                'echarts/chart/line',   // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表
                'echarts/chart/bar'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
                var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['不同进度状态的项目数']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : ["项目新建","项目关闭","风控议款待商议","异议价格待商议","资料待提交","资料待商议","特批意见待商议"]
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",
                            "data": []
                        }
                    ]
                };
                
                $.ajax({ 
                    url: "<?=ROOT_URL?>echarts/get-data", 
                    dataType : 'json',
                    success: function(res){
                // alert(res);
                // $.each(res,function(i,val){
                //     // alert(i);
                //     // alert(val);
                //     var counts= val;
                //      alert(counts);
                // });
                    if(res){
                        option.series[0].data = res.countData;
                        myChart.setOption(option);                   
                    }
                }
        });
            }
        );

        
    </script>  

</body>  

最后给Echarts动态加载数据就成功了,简单的小例子:
技术分享

版权声明:本文为博主原创文章,未经博主允许不得转载。

Echarts ajax动态加载json数据

标签:echarts   ajax   动态数据   

原文地址:http://blog.csdn.net/zhangxbj/article/details/47167113

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