Echarts+php+sqlserver实现数据可视化

最新推荐文章于 2024-07-23 10:59:27 发布

qq_34556596

最新推荐文章于 2024-07-23 10:59:27 发布

阅读量195

点赞数 3

文章标签：信息可视化 echarts php

本文链接：https://blog.csdn.net/qq_34556596/article/details/140400356

版权

花费了近3天时间，终于可以利用sqlserver数据库的数据实现作图了，直接上代码了。Php文件名称尽量不要带中文，否则可能出现错误。代码参考来源于ECharts数据可视化（3）——echarts+php+mysql实现前后端数据可视化 - 简书

首先是php代码

<?php
	// 指定允许被访问的域名
	header('Access-Control-Allow-Origin:*');  
	// 响应类型  
	header('Access-Control-Allow-Methods:*');  
	// 响应头设置  
	header('Access-Control-Allow-Headers:x-requested-with,content-type'); 

	$serverName = "";//服务器主机地址
    $uid="";//用户名
	$pwd="";//密码
	$database="";//数据库名称
	$connectionInfo=array("UID"=>$uid,"PWD"=>$pwd,"Database"=>$database,"ConnectionPooling"=>false,"CharacterSet"=>"UTF-8","TrustServerCertificate"=>"yes");//连接数据库
	$conn=sqlsrv_connect($serverName,$connectionInfo);
	if(!$conn)
	{
		die('连接失败: ' . sqlsrv_error($conn));
	}
	$JSON  = '';
	$data = array(); 
 	$sql = "SELECT a1,count FROM c1";//sql查询语句，c1是查询的数据表
 	$result = sqlsrv_query($conn,$sql);
	$rows = array(); 
	class User{
	    public $a1;//需要数据表哪一列就写哪一列
	    public $count;
  	}
  	while($row = sqlsrv_fetch_array($result,SQLSRV_FETCH_ASSOC)){
	    $user=new User();
	    $user->a1 = $row['a1'];
	    $user->count = $row['count'];
	    $data[]=$user;
  	}
  	echo json_encode($data);
?>

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>小组的年龄体重统计</title>
    <script type="text/javascript" src="../js/echarts.js"></script>
	<script src="../js/jquery.js"></script>
  
</head>
<body>
    <div style="position: relative; overflow: hidden; width: 1538px; height: 760px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;">
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="bar" style="height:400px"></div>
    <script type="text/javascript">
        var  myChart = echarts.init(document.getElementById('bar'));
        var arr1=[],arr2=[];
        function arrTest(){
         //这个功能块的作用就是读取json数据。
            $.ajax({
                type:"post",//请求服务器载入数据
                async:false,//异步属性
                url:"",//url是上面的PHP文件在浏览器运行时的网址
                data:{},
                dataType:"json",
                success:function(result){
                    if (result) {
	                    for (var i = 0; i < result.length; i++) {
		                    arr1.push(result[i].a1);
		                    arr2.push(result[i].count);//这边更新字段，可以只写你需要展示的字段。 
	                    }
                    }
                }
            })
            return arr1,arr2;
}
        arrTest();
        var  option = {
            title : {
                text: '数量',
			},
            //Bootstrap 提示工具（Tooltip）插件,鼠标悬停时候的提示框
            tooltip: {
            	show: true
            },
            //图例
            legend: {
            	data:['count']
            },
              //x轴
            xAxis : [{
	            type : 'category',
	            data : arr1
            }],
              //y轴
            yAxis : [{
            	type : 'value'
            }],
              //需要展示的系列，根据需要
            series : [{
	            "name":"shuliang",
	            "type":"bar",
	            "data":arr2,
            }]
    	};
                // 为echarts对象加载数据
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
    </script>
</body>
</html>