頁面特效 UI組件庫 菜單導航 窗口特效 幻燈片滑動 圖像相冊 表單 選項卡 表格 評分星級 手風琴 文本鏈接 布局 日歷 顏色選擇器 按鈕 圖表 html5 提示 ExtJS 在線客服 其他特效 地圖 樹形控件 移動開發 BootStrap 滑動條 文件上傳 表單驗證 分頁 播放器 Angular VUE

echarts+php+mysql 繪圖實例

圖表 HTML我幫您 1月前  次瀏覽

第一步:搭建環境


我使用寶塔面板安裝lnmp軟件包作為開發平臺。開啟nginx和MySql。
在mysql中創建一個數據庫,我使用了Navicat for mysql來進行數據庫管理

第二步: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文件,處理數據:

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

可以看到已經處理好的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編碼,前端調用的時候會自動轉成中文。

第三步:前端通過ajax調用數據并繪圖

<!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準備一個具備大?。▽捀撸┑腄om -->
    <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>

上述代碼中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>



相關鏈接

發表評論

2017怎样手机上赚钱