内容简介：Think PHP：异步更新ECharts图表数据
前言
在对一个以ThinkPHP为基础的网站源码进行改动时，由于其没有数据统计的功能，我想着在其代码的基础上机上这个功能。当然，数据统计的结果最好能够以图表的形式显示出来。经过在网上搜索之后，我选择了EChart，其是个开源的数据可视化Javascript库，操作简单，使用方便。
ECharts下载使用
官网介绍：
ECharts，一个纯Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 [ZRender (https://github.com/ecomfe/zrender)，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。
ECharts 3 中更是加入了更多丰富的交互功能以及更多的可视化效果，并且对移动端做了深度的优化。
官网给出了很多示例，效果非常酷炫而且支持实时互动。其基本的工作原理是使用
<a href="https://www.52bz.la/tag/html" title="HTML" target="_blank">HTML</a>
的
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 中可以通过
<a href="https://www.52bz.la/tag/jquery" title="Jquery" target="_blank">Jquery</a>
等 工具 异步获取数据后通过 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 }] }); });
ThinkPHP下的配置使用
本次示例使用的
Think <a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
的版本为
3.2.3
，目前其最新的版本为
5.0.10
，不过对于基本功能来说两者的区别不大，所以就算是与我的版本不同，代码也基本上可以运行。（点击下载
Think <a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>3.2.3
）
下载完成之后，我们需要安装本地服务器
WAMPServer
，点击进入官网进行下载安装即可，这里不再做过多说明。
注：本地服务器也有其它的软件可以选择，如
XAMP
。
WAMPServer
属于集成环境，即其包含
Apache
、
<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
和
<a href="https://www.52bz.la/tag/mysql" title="Mysql" target="_blank">Mysql</a>
，使用很方便。当然也可以选择安装这三个软件，使用效果是一样的。
附
3.2.3
版本的快速入门教程ThinkPHP3.2.3快速入门
WAMPServer
安装运行之后，会在右下角任务栏处出现一个
W
型的图标，默认是英文版的，右键可以选择中文语言。然后将下载后的
Think <a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
代码包放入
WAMPServer
的
www
目录，这个就是你服务器的根目录。（
Think<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>Origin
即是
Think <a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
的代码包，我这里改了名字）
image.png
这一步完成之后，在浏览器地址栏中输入
http://localhost/Think<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>Origin/Home/Index/index
，可以看到：
image.png
说明
Think <a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
已经配置成功！
下面我们开始写代码(●ˇ∀ˇ●)
首先在
Home/Controller
目录中建立一个新的控制器，文件名为
ChartsController.class.<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>
，内容为：
<?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.<a href="https://www.52bz.la/tag/html" title="HTML" target="_blank">HTML</a>
：
<!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
文件均放在
Think<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>Origin/Public/js/
路径下。
在浏览器地址栏中输入
http://localhost/Think<a href="https://www.52bz.la/tag/php" title="PHP" target="_blank">PHP</a>Origin/Home/Charts/index
：
image.png
结语
如果在部署ThinkPHP代码后，浏览器访问时出现404错误，可以参考Think PHP：Apache开启PATHINFO模式。
以上所述就是小编给大家介绍的《Think PHP：异步更新ECharts图表数据》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- DataGear 1.8.1 发布，看板支持异步加载图表和参数传入
- 统计图表之线状图
- 统计图表之柱状图
- 用 Matplotlib 库生成动画图表
- 一起撸个环形 Android 图表
- R语言图表排版之一页多图
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
The Art of Computer Programming, Volumes 1-3 Boxed Set
Donald E. Knuth / Addison-Wesley Professional / 1998-10-15 / USD 199.99
This multivolume work is widely recognized as the definitive description of classical computer science. The first three volumes have for decades been an invaluable resource in programming theory and p......一起来看看 《The Art of Computer Programming, Volumes 1-3 Boxed Set》 这本书的介绍吧!
