echarts+php+mysql 绘图实例

ElaJoslyn 5年前
   <p>最近在学习php+mysql,因为之前画图表都是直接在echart的实例demo中修改数据,便想着两相结合练习一下,通过ajax调用后台数据画图表。</p>    <p>我使用的是echart3,相比较第二版,echarts3体积上减少了200k,适配了移动端,且不再按照需求引入不同的包,直接用echarts.init方法初始化就ok。更简洁更强大,国产良心产品。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b823aa3560dd1deecc9a9054005f9b4c.png"></p>    <h2><strong>第一步:搭建环境</strong></h2>    <p style="text-align:center"><br> 我使用XAMPP软件包作为开发平台,这个可以直接百度下载,一直next安装好。开启Apache和MySql。<br> 在mysql中创建一个数据库,我使用了Navicat for mysql来进行数据库管理。下载及使用方法参考 : <em> <a href="/misc/goto?guid=4959715039734528718" rel="nofollow,noindex">百度经验</a> </em><br> 这是我建好的测试表:<br> <img src="https://simg.open-open.com/show/2fc2bf3e7591a5a3776b0dba69a1ac40.jpg"></p>    <h2><strong>第二步:php链接数据库并处理数据</strong></h2>    <pre>  <code class="language-php"><?php      $mysql_server_name='localhost'; //改成自己的mysql数据库服务器        $mysql_username='root'; //改成自己的mysql数据库用户名        $mysql_password=''; //改成自己的mysql数据库密码,初始默认密码为空        $mysql_database='study'; //改成自己的mysql数据库名   ?></code></pre>    <p><br> 可以把这个php文件保存为db_config.php,以后再进行数据库链接就直接require("db_config.php")就ok。<br> 接下来,创建另一个php文件,处理数据:</p>    <pre>  <code class="language-php"><?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;  ?></code></pre>    <p><br> 这两个php文件都要放在..\xampp\htdecs下,在浏览器打开: <a href="/misc/goto?guid=4959715039832032099" rel="nofollow,noindex">http://localhost/test1.php</a><br> 可以看到已经处理好的json数组:</p>    <pre>  <code class="language-php">[{"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"}]</code></pre>    <p><br> name的值是php将中文转成unicode编码,前端调用的时候会自动转成中文。</p>    <h2><strong>第三步:前端通过ajax调用数据并绘图</strong></h2>    <p>怎么调用echarts我就不赘述了,可以直接去echart官网学习查看,基本没什么学习成本,写几个demo就会爱上她的。</p>    <pre>  <code class="language-php"><!DOCTYPE html>  <head>      <meta charset="utf-8">      <title>ECharts</title>      <script src="js/echarts.min.js"></script>      <script src="js/jquery.js"></script>  </head>  <body>      <!-- 为ECharts准备一个具备大小(宽高)的Dom -->      <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;i<result.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;i<result.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></code></pre>    <p><br> 我觉得里面最重要的就是对json数组的循环,将同属性的值创建成新的数组,然后return给对应坐标轴的data,具体的可以参考我的上一篇博客。<br> <img src="https://simg.open-open.com/show/205c3fcb9185560b8615e25c8dae750c.png"></p>    <p>至此,对前后端的交互过程有了简单清晰的认识。之前一直觉得是洪水猛兽的数据库操作起来也没有很难。</p>    <h3> </h3>    <p> </p>    <p>来自:http://www.cnblogs.com/qjqcs/p/5852958.html</p>    <p> </p>