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

分页是要点击按钮异步获取数据，实时获取使用定时器就好了。预先拿出一部分你要展示的数据，然后在通后异步获取新的数据覆盖原先的数据。

引入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数据输出
	}

生成图表

数据库数据