Echart报表

1：

绘制一个简单的图表

在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。

然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图，下面是完整代码。

 

 

数据处理：

Echarts 中数据需要的是JSON格式；

index控制器中（indexController.php）负责数据读取，并转成JSON格式：

下面我们新建一个方法：

fetch();
        
    }

    public function data(){

    	$sql = new User;

    	$sqldata = Db::table('User')-> where('Id','>','0')->select();

    	for ($i=0; $i < count($sqldata) ; $i++) { 
    		
    		$sqldata1[$i]['name']=$sqldata[$i]['name'];
    		$sqldata1[$i]['age']=$sqldata[$i]['age'];
    	}

    	$sqldata_json=json_encode($sqldata1);


    	echo  $sqldata_json;
    }
}

?>

浏览器中输入http://localhost/test/public/index/index/data，
刷新浏览器：

前端index.html 页面接收数据：

这里我们需要用到下面这段代码。

		var arr1=[],arr2=[];
              function arrTest(){
                	$.ajax({
                        type:"post",
                        async:false,
                        url:"http://localhost/test/public/index/index/data",
                        data:{},
                        dataType:"json",
                        success:function(result){
                            if (result) {
                                for (var i = 0; i < result.length; i++) {
                                    arr1.push(result[i].name);
                                    arr2.push(result[i].age);
                                 }
                     		}
                    	}
               	 })
              return arr1,arr2;
              }
              
              arrTest();

	

将这段代码放到Echarts 控件代码中去，

现在我买你刷新浏览器：

下面我们试验修改一下数据库中的数据，看看图表是否有变化。

OK！成功！