TP框架实现echarts动态获取数据

<div id="main" style="min-width:800px;height:400px;"></div>

<script type="text/javascript">
var myChart;
myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
// 加载页面后显示在图表中的X轴信息
data: [<?php foreach($data as $v){; ?>"<?php echo $v['datetime'] ?>",<?php }; ?>]
},
yAxis: {},
series: [{
name: '销量',
// type: 'line',// 折线图
type: 'bar',//柱状图
// 加载页面后显示在图表中的Y轴信息
data: [<?php foreach($data as $v){; ?>"<?php echo $v['datas'] ?>",<?php }; ?>],
itemStyle:{
// 颜色定义
normal:{color:'#7b68ee'}
}
}]
});

// 异步加载后台数据，通过定时器在实现
var i = 0;
function run() {
i++;
$.ajax({
url: "{:U('./Home/Index/data')}",
type: 'POST',
dataType: 'JSON',
data:{page:i},
success:function(json){
if(json.datetime.length != 5){
clearInterval(time);
return;
}
myChart.setOption({
xAxis: {
data: json.datetime
},
series: [{
name: '销量',
data: json.datas
}]
});
}
})
};
var time = setInterval(run,3000);
</script>

// 加载页面后输出的数据
public function index(){
$data = $this->model->limit(5)->select();
$this->assign('data',$data);
$this->display();
}

// 异步获取数据
public function data(){
$page = I('post.page',0,intval);

$list = $this->model->limit($page.',5')->select();

// 重组数组
foreach ($list as $key => $value) {
$arr['id'][] = $value['id'];
$arr['datetime'][] = $value['datetime'];
$arr['datas'][] = $value['datas'];
}

die(json_encode($arr)); //转换为json数据输出
}