分页是要点击按钮异步获取数据,实时获取使用定时器就好了。预先拿出一部分你要展示的数据,然后在通后异步获取新的数据覆盖原先的数据。
引入js文件:
html代码
<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>php代码(Index控制器)
// 加载页面后输出的数据 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数据输出 }
生成图表
数据库数据