前言
在对一个以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 "";
}
}
在对应的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模式。
网友评论