echarts+php+mysql 繪圖實例

時間 2019-11-08

標籤 echarts+php+mysql echarts php mysql 繪圖實例欄目 PHP 简体版

原文原文鏈接

最近在學習php+mysql，由於以前畫圖表都是直接在echart的實例demo中修改數據，便想着兩相結合練習一下，經過ajax調用後臺數據畫圖表。
我使用的是echart3，相比較第二版，echarts3體積上減小了200k，適配了移動端，且再也不按照需求引入不一樣的包，直接用echarts.init方法初始化就ok。更簡潔更強大，國產良心產品。 5分鐘上手echarts3
javascript

第一步：搭建環境

我使用XAMPP軟件包做爲開發平臺，這個能夠直接百度下載，一直next安裝好。開啓Apache和MySql。
在mysql中建立一個數據庫，我使用了Navicat for mysql來進行數據庫管理。下載及使用方法參考：百度經驗
這是我建好的測試表：
php

第二步：php連接數據庫並處理數據

<?php
    $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文件，處理數據：html

<?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編碼，前端調用的時候會自動轉成中文。java

第三步：前端經過ajax調用數據並繪圖

怎麼調用echarts我就不贅述了，能夠直接去echart官網學習查看，基本沒什麼學習成本，寫幾個demo就會愛上她的。mysql

<!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>

我以爲裏面最重要的就是對json數組的循環，將同屬性的值建立成新的數組，而後return給對應座標軸的data，具體的能夠參考個人上一篇博客。

-------------------------------------------------------------------
同事大哥指出上述代碼中ajax請求了兩次，若是數據量大一點就容易數據冗餘。遂進行改進。將ajax請求放在option外，在一次請求中就返回兩個須要的數組，而後在option時候直接用就ok。jquery

<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>

至此，對先後端的交互過程有了簡單清晰的認識。以前一直以爲是洪水猛獸的數據庫操做起來也沒有很難。

前幾日看到昌喆法師在朋友圈的發文:」作和作好是兩個概念，但不作就永遠作很差「。即是如此。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。