# 數據處理：
### Echarts 中數據需要的是JSON格式；
### index控制器中（indexController.php）負責數據讀取，并轉成JSON格式：
下面我們新建一個方法：
~~~
<?php
namespace app\index\controller;
use think\Controller;
use app\index\model\User;
use think\Db;
class IndexController extends Controller
{
public function index()
{
return $this->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 控件代碼中去，
~~~
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="../public/static/echarts.js"></script>
<script src="../public/static/echarts.min.js"></script>
<script src="../public/static/jquery-3.2.1.min.js"></script>
</head>
<body>
<!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于準備好的dom，初始化echarts實例
myChart = echarts.init(document.getElementById('main'));
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();
// 指定圖表的配置項和數據
option = {
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['年齡']
},
xAxis: {
type:'category',
data:arr1
},
yAxis: {
type: 'value'
},
series: [{
"name":"age",
"type":"bar",
"data":arr2
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>
~~~
現在我買你刷新瀏覽器：
### 下面我們試驗修改一下數據庫中的數據，看看圖表是否有變化。
OK！成功！