最近看到有人需要使用php+mysql画图表，之前都是直接在echart的实例demo中修改数据，便想着两相结合练习一下，通过ajax调用后台数据画图表。
我使用的是echart3，相比较第二版，echarts3体积上减少了200k，适配了移动端，且不再按照需求引入不同的包，直接用echarts.init方法初始化就ok。更简洁更强大，国产良心产品。
参照：5分钟上手echarts3
链接：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
我使用phpstudy软件包作为开发平台，这个可以直接百度下载，然后运行phpStudy2018.exe，选择解压目录解压即可。开启Apache和MySql。
在mysql中创建一个数据库，我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考 ：百度经验http://jingyan.baidu.com/article/6181c3e074ba0d152ff15346.html
这是我建好的测试表：
<> $mysql_server_name='localhost'; //改成自己的mysql数据库服务器 $mysql_username='root'; //改成自己的mysql数据库用户名 $mysql_password=''; //改成自己的mysql数据库密码,初始默认密码为空 $mysql_database='study'; //改成自己的mysql数据库名 ?>
可以把这个php文件保存为db_config.php，以后再进行数据库链接就直接require('db_config.php')就ok。
接下来，创建另一个php文件，处理数据：
<> require('db_config.php'); $conn=mysql_connect($mysql_server_name,$mysql_username,$mysql_password) or die('error connecting') ; mysql_query('set names 'utf8''); //数据库输出编码 mysql_select_db($mysql_database); //打开数据库 $result = mysql_query('select * from study'); $data=''; $array= array(); class User{ public $name; public $age; } while($row = mysql_fetch_array($result,MYSQL_ASSOC)){ $user=new User(); $user->name = $row['name']; $user->age = $row['age']; $array[]=$user; } $data=json_encode($array); // echo '{'.''user''.':'.$data.'}'; echo $data;?>
这两个php文件都要放在..\xampp\htdecs下，在浏览器打开：http://localhost/test1.php
可以看到已经处理好的json数组：
[{'name':'\u767d\u96e8\u83f2','age':'40'},{'name':'\u5f20\u5929\u5f3a','age':'42'},{'name':'\u51af\u5176\u5eb8','age':'21'},{'name':'\u9a6c\u6b65\u5ddd','age':'18'},{'name':'\u6d2a\u521a','age':'100'},{'name':'\u5218\u4e09\u96cd','age':'21'},{'name':'\u9f50\u4e00\u9e23','age':'85'},{'name':'\u738b\u660e','age':'21'}]
name的值是php将中文转成unicode编码，前端调用的时候会自动转成中文。
怎么调用echarts我就不赘述了，可以直接去echart官网学习查看，基本没什么学习成本，写几个demo就会爱上她的。
html>head> meta charset='utf-8'> title>EChartstitle> script src='js/echarts.min.js'>script> script src='js/jquery.js'>script>head>body> div id='main' style='height:400px'>div> script type='text/javascript'> var myChart = echarts.init(document.getElementById('main')); var option = { tooltip: { show: true }, legend: { data:['age'] }, xAxis : [ { type : 'category', data : (function(){ var arr=[]; $.ajax({ type : 'post', async : false, //同步执行 url : 'test1.php', data : {}, dataType : 'json', //返回数据形式为json success : function(result) { if (result) { console.log(result); for(var i=0;iresult.length;i++){ console.log(result[i].name); arr.push(result[i].name); } } }, error : function(errorMsg) { alert('sorry，请求数据失败'); myChart.hideLoading(); } }) return arr; })() } ], yAxis : [ { type : 'value' } ], series : [ { 'name':'age', 'type':'bar', 'data':(function(){ var arr=[]; $.ajax({ type : 'post', async : false, //同步执行 url : 'test1.php', data : {}, dataType : 'json', //返回数据形式为json success : function(result) { if (result) { for(var i=0;iresult.length;i++){ console.log(result[i].age); arr.push(result[i].age); } } }, error : function(errorMsg) { alert('sorry，请求数据失败'); myChart.hideLoading(); } }) return arr; })() } ] }; // 为echarts对象加载数据 myChart.setOption(option); // } /script>body>
我觉得里面最重要的就是对json数组的循环，将同属性的值创建成新的数组，然后return给对应坐标轴的data，具体的可以参考http://www.cnblogs.com/qjqcs/p/5850282.html。
-------------------------------------------------------------------
同事大哥指出上述代码中ajax请求了两次，如果数据量大一点就容易数据冗余。遂进行改进。将ajax请求放在option外，在一次请求中就返回两个需要的数组，然后在option时候直接用就ok。
script type='text/javascript'> var myChart = echarts.init(document.getElementById('main')); var arr1=[],arr2=[]; function arrTest(){ $.ajax({ type:'post', async:false, url:'test1.php', data:{}, dataType:'json', success:function(result){ if (result) { for (var i = 0; i result.length; i++) { arr1.push(result[i].name); arr2.push(result[i].age); } } } }) return arr1,arr2; } arrTest(); var option = { tooltip: { show: true }, legend: { data:['age'] }, xAxis : [ { type : 'category', data : arr1 } ], yAxis : [ { type : 'value' } ], series : [ { 'name':'age', 'type':'bar', 'data':arr2 } ] }; // 为echarts对象加载数据 myChart.setOption(option); // } /script>联系客服
