Think PHP：异步更新ECharts图表数据

前言

在对一个以Think PHP为基础的网站源码进行改动时，由于其没有数据统计的功能，我想着在其代码的基础上机上这个功能。当然，数据统计的结果最好能够以图表的形式显示出来。经过在网上搜索之后，我选择了EChart，其是个开源的数据可视化JavaScript库，操作简单，使用方便。

ECharts下载使用

官网介绍：
ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 [ZRender (https://github.com/ecomfe/zrender)，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。

官网给出了很多示例，效果非常酷炫而且支持实时互动。其基本的工作原理是使用HTML的div标签作为容器来承载图表。在下载时会发现提供了4种下载版本，这里推荐大家使用“源代码”版本，方便调试。

image.png

官方教程中给出了一个Demo源码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

显示效果为：（可以看到在鼠标滑过时可以实时显示真实数据）

image.png

异步更新ECharts图表数据

由上述给出的Demo可以看出，Y轴的数据由series中的data项给出，X轴的数据由xAxis中的data给出。在实际使用时，数据不可能在代码中给出，我们往往需要在数据库中查找数据之后进行显示。这种情况下就需要异步加载数据，ECharts 中可以通过jQuery等工具异步获取数据后通过 setOption 将数据填入data项即可。
（附官网给出的异步加载示例）

var myChart = echarts.init(document.getElementById('main'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
});

// 异步加载数据
$.get('data.json').done(function (data) {
    // 填入数据
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});

Think PHP下的配置使用

本次示例使用的Think PHP的版本为3.2.3，目前其最新的版本为5.0.10，不过对于基本功能来说两者的区别不大，所以就算是与我的版本不同，代码也基本上可以运行。（点击下载Think PHP3.2.3）
下载完成之后，我们需要安装本地服务器WAMPServer，点击进入官网进行下载安装即可，这里不再做过多说明。

注：本地服务器也有其它的软件可以选择，如XAMP。WAMPServer属于集成环境，即其包含Apache、PHP和MySql，使用很方便。当然也可以选择安装这三个软件，使用效果是一样的。
附3.2.3版本的快速入门教程ThinkPHP3.2.3快速入门

WAMPServer安装运行之后，会在右下角任务栏处出现一个W型的图标，默认是英文版的，右键可以选择中文语言。然后将下载后的Think PHP代码包放入WAMPServer的www目录，这个就是你服务器的根目录。（ThinkPHPOrigin即是Think PHP的代码包，我这里改了名字）

image.png

这一步完成之后，在浏览器地址栏中输入http://localhost/ThinkPHPOrigin/Home/Index/index，可以看到：

image.png

说明Think PHP已经配置成功！
下面我们开始写代码(●ˇ∀ˇ●)
首先在Home/Controller目录中建立一个新的控制器，文件名为ChartsController.class.php，内容为：

<?php
namespace Home\Controller;
use Think\Controller;
class ChartsController extends Controller{
    public function index(){
        $this->display();
    }

    public function getData(){
        //数据应该从数据库中取出，这里采用直接赋值的方式，和使用数据库时代码一样
        $data['categories']  = array("衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子");
        $data['data'] = array(5, 20, 36, 10, 10, 20);
        $this->ajaxReturn($data);
    }
    
    public function test(){
        echo "__APP__";
    }
}

在对应的Home/View/Charts目录下新建视图文件，index.html：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Ajax Test</title>
<!-- ECharts的js文件 -->
<script src="__PUBLIC__/js/echarts.js"></script>
<!-- JQuery的js文件 -->
<script src="__PUBLIC__/js/jquery-1.4.4.min.js"></script>
<style>
    body{ text-align:center} /* 使div居中显示 */
    #container{margin:0 auto;border:1px solid #000;width:600px;height:400px} 
</style>
</head>
<body>
    <h1>PHP Ajax ECahrts 测试</h1>
    <hr>
    <div id="container"></div>
<script>

var myChart = echarts.init(document.getElementById('container'));
// 显示标题，图例和空的坐标轴
myChart.setOption({
    title: {
        text: '异步数据加载示例'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        center: ['100%', '50%'],
        data: []
    }]
});


$.ajax({
    url:"__CONTROLLER__/getData",//这里指向的就不再是页面了，而是一个方法。路径填写__CONTROLLER__/getData也正确
    data:{},
    type:"POST",
    dataType:"JSON",
    success: function(data){
        var obj = eval('(' + data + ')');//由JSON字符串转换为JSON对象
        myChart.setOption({
            xAxis: {
                data: obj.categories
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: obj.data
            }]
        });

    }
});

</script>

</body>
</html>

其中js文件均放在ThinkPHPOrigin\Public\js\路径下。
在浏览器地址栏中输入http://localhost/ThinkPHPOrigin/Home/Charts/index：

image.png

结语

如果在部署Think PHP代码后，浏览器访问时出现404错误，可以参考Think PHP：Apache开启PATHINFO模式。

Think PHP：异步更新ECharts图表数据

前言

ECharts下载使用

异步更新ECharts图表数据

Think PHP下的配置使用

结语

推荐阅读更多精彩内容