内容简介：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语言图表排版之一页多图
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
深入理解C++11
Michael Wong、IBM XL编译器中国开发团队 / 机械工业出版社 / 2013-6 / 69.00元
《深入理解C++11:C++11新特性解析与应用》内容简介：国内首本全面深入解读C++11新标准的专著，由C++标准委员会代表和IBM XL编译器中国开发团队共同撰写。不仅详细阐述了C++11标准的设计原则，而且系统地讲解了C++11新标准中的所有新语言特性、新标准库特性、对原有特性的改进，以及如何应用所有这些新特性。 《深入理解C++11:C++11新特性解析与应用》一共8章：第1章从设计......一起来看看 《深入理解C++11》 这本书的介绍吧!
