PHP绘制曲线（历史曲线和实时曲线都可以）

MZZ骏马_279644337

于 2024-08-09 16:09:09 发布

阅读量144

点赞数 2

文章标签： php android 开发语言

本文链接：https://blog.csdn.net/qq_30754685/article/details/141064665

版权

数据库连接部分

<?php
    $mysql_server_name='localhost'; //改成自己的mysql数据库服务器

    $mysql_username='root'; //改成自己的mysql数据库用户名

    $mysql_password='123456'; //改成自己的mysql数据库密码,初始默认密码为空

    $mysql_database='login'; //改成自己的mysql数据库名
 ?>

php查询数据库部分

<?php
  require("db_config.php");
  $conn=mysqli_connect($mysql_server_name,$mysql_username,$mysql_password,$mysql_database);
  //mysqli_query("set names 'utf8'"); //数据库输出编码
  //mysql_select_db($mysql_database); //打开数据库
  $result = mysqli_query($conn,"select * from test1");
  $data="";
  $array= array();
  class User{
    public $name;
    public $data1;
	public $data2;
	public $data3;
	public $data4;
	public $data5;
	public $data6;
	public $data7;
  }
  while($row = mysqli_fetch_assoc($result)){
    $user=new User();
    $user->name = $row['username'];
    $user->data1 = $row['data1'];
	$user->data2 = $row['data2'];
	$user->data3 = $row['data3'];
	$user->data4 = $row['data4'];
	$user->data5 = $row['data5'];
	$user->data6 = $row['data6'];
	$user->data7 = $row['data7'];
    $array[]=$user;
	//echo "1111";
  }
  $data=json_encode($array);
   //echo "{".'"user"'.":".$data."}";
  echo $data;
?>

html调用echart展示曲线部分

<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
	   <meta http-equiv="refresh" content="10">
   </head>
   <body style="height: 100%; margin: 0">
       <div id="container" style="height: 100%"></div>
       <script type="text/javascript" src="echarts.js"></script>
	    <script src="jquery-3.4.1.min.js"></script>
	
	
  <script type="text/javascript">
 
         var arr1=[],arr2=[];arr3=[];arr4=[];arr5=[];arr6=[];
              function arrTest1()
			  {
                  $.ajax({
                  type:"post",
                  async:false,
                  url:"data.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].data1);
						  arr3.push(result[i].data2);
						  arr4.push(result[i].data3);
						  arr5.push(result[i].data4);
						  arr6.push(result[i].data5);
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
			  
			  arrTest1();   
              
              console.log(arr2[0]);			  
            

        
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            title: {
                text: '折线图堆叠'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data:['1#进线','2#进线','3#进线','4#进线','5#进线','xxx']
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data:arr1
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name:'1#进线',
                    type:'line',
                    stack: '总量',
                    data:arr2
                },
                {
                    name:'2#进线',
                    type:'line',
                    stack: '总量',
                    data:arr3
                },
                {
                    name:'3#进线',
                    type:'line',
                    stack: '总量',
                    data:arr4
                },
                {
                    name:'4#进线',
                    type:'line',
                    stack: '总量',
                    data:arr5
                },
                {
                    name:'5#进线',
                    type:'line',
                    stack: '总量',
                    data:[20, 32, 91, 94, 129, 130, 320]
                },
				  {
                    name:'xxx',
                    type:'line',
                    stack: '总量',
                    data:arr2
                }
            ]
        };

            myChart.setOption(option, true);

  </script>


   </body>
</html>