Echarts ajax动态加载json数据

后台 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);
    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数据

相关文章