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源码：

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

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，内容为：

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：

    
PHP Ajax ECahrts 测试
    

    

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

image.png

结语

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