zoukankan      html  css  js  c++  java
  • php与MySQL与echart综合使用

    http://www.yinghualuowu.com/php/echart.html

    创建table sex 有name num            

    <?php
        ini_set('display_errors',1);            //错误信息  
        ini_set('display_startup_errors',1);    //php启动错误信息  
        error_reporting(-1); 
        ini_set('error_log', dirname(__FILE__) . '/error3_log.txt');//打印出所有的 错误信息  
        require("config.php");
          $conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_password) or die("error connecting");
          mysqli_query($conn,'set names utf8'); 
          mysqli_select_db($conn,$mysql_database); 
          $result = mysqli_query($conn,"select * from sex");
          $data="";
          $array= array();
          class User{
            public $name;
            public $num;
          }
         while($row=mysqli_fetch_array($result,MYSQLI_ASSOC)){
            // printf ("%s : %s",$row["name"],$row["num"]);
             $user=new User();
             $user->name=$row['name'];
             $user->num=$row['num'];
             $array[]=$user;
         }
        $data=json_encode($array);
        echo $data;
    ?>

    这样,我们就创建了一个json文件

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script src="../js/echarts.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
    
    <body>
    <div id="main" style="height:400px"></div>
    <script type="text/javascript">
                  var  myChart = echarts.init(document.getElementById('main'));
                  var arr1=[],arr2=[];
                  function arrTest(){
                    $.ajax({
                      
                      type:"post",
                      url:"echart.php",
                      dataType:"json",
                      async:false,
                      data:{},
                      success:function(result){
                        
                        if (result){
                          for (var i = 0; i < result.length; i++) {
                              arr1.push(result[i].name);
                              arr2.push(result[i].num);
                          }
                        }
                      },
                    error:function(errorMsg) {
                        alert("数据读取失败");
                    }    
                      })
                    return arr1,arr2;
                  }
                  arrTest();
                    console.log(arr1[0]);
                  var  option = {
                        tooltip: {
                            show: true
                        },
                        legend: {
                           data:['num']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : arr1
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                "name":"num",
                                "type":"bar",
                                "data":arr2
                            }
                        ]
                    };
    
                    myChart.setOption(option);
       
        </script>
    </body>
    </html>
  • 相关阅读:
    Linux命令之乐--nmap
    shell脚本学习总结09--分支与循环结构
    shell脚本学习总结08--比较与测试
    Linux命令之乐--test
    Linux命令之乐--read
    shell脚本学习总结06--数学计算
    Linux命令之乐--time
    Linux命令之乐--expr
    Linux命令之乐--seq
    Linux命令之乐--rename
  • 原文地址:https://www.cnblogs.com/yinghualuowu/p/7599301.html
Copyright © 2011-2022 走看看