echarts + sql + php 一个简单的可视化示例

长街395

已于 2022-08-31 20:47:06 修改

阅读量1.6k

点赞数 5

分类专栏： web 文章标签： php vscode echarts

于 2022-03-29 23:24:22 首次发布

本文链接：https://blog.csdn.net/weixin_56301399/article/details/123834984

版权

web 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

首先在数据库内创造一个表格，注：我的数据库是test,工具是xampp和vscode（不知道怎么配置的可以看上一篇博客：https://blog.csdn.net/weixin_56301399/article/details/123809119?spm=1001.2014.3001.5502）

数据库代码：

[sql] view plain copy
-- ----------------------------  
-- Table structure for `guizhou`  
-- ----------------------------  
DROP TABLE IF EXISTS `guizhou`;  
CREATE TABLE `guizhou` (  
  `id` int(11) NOT NULL AUTO_INCREMENT,  
  `place` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,  
  `num` int(11) DEFAULT NULL,  
  PRIMARY KEY (`id`)  
) ENGINE=InnoDB AUTO_INCREMENT=7 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;  
  
-- ----------------------------  
-- Records of guizhou  
-- ----------------------------  
INSERT INTO `guizhou` VALUES ('1', '贵阳市', '5');  
INSERT INTO `guizhou` VALUES ('2', '遵义市', '20');  
INSERT INTO `guizhou` VALUES ('3', '凯里市', '36');  
INSERT INTO `guizhou` VALUES ('4', '六盘水市', '10');  
INSERT INTO `guizhou` VALUES ('5', '都匀市', '10');  
INSERT INTO `guizhou` VALUES ('6', '毕节市', '20');

首先先写一个连接数据库的php文件：

我命名为sql_config.php

<?php
    $mysql_server_name='localhost'; //mysql数据库服务器

    $mysql_username='root'; //mysql数据库用户名

    $mysql_password='root'; //mysql数据库密码,初始默认密码为空

    $mysql_database='test'; //mysql数据库名
 ?>

后来将数据库中内容转为josn文件：

我命名为sql.php

<?php
//这部分的功能是读表数据并且转为json格式，便于js处理。
  require("sql_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 guizhou");//打开你的表
  $data="";
  $array= array();
  class User{
    public $id;
    public $place;
    public $num;//字段添加处1
  }
  while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
    $user=new User();
    $user->id = $row['id'];
    $user->place = $row['place'];
    $user->num = $row['num'];//字段添加处2
    $array[]=$user;
  }
  $data=json_encode($array);
  // echo "{".'"user"'.":".$data."}";
  echo $data;
?>

运行效果如下（转为josn文件）：

最后开始画图，需要引入echarts.min.js 和 jquery-1.9.1.min.js 文件，可以私信小编获得哦（或者自己到官网上下载）

最后index.html的代码：

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8">  
    <title>ECharts</title>  
    <!-- 引入 echarts.js -->  
    <script src="echarts.min.js"></script>  
    <script src="jquery-2.2.1.min.js"></script>  
</head>  
<body>  
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
    <div id="main" style="width: 600px;height:400px;"></div>  
    <script type="text/javascript">  
        // 基于准备好的dom，初始化echarts实例  
        var myChart = echarts.init(document.getElementById('main'));  
        // 初始化两个数组，盛装从数据库中获取到的数据  
        var places=[], nums=[];  
        function TestAjax(){  
            $.ajax({  
                type: "post",  
                async: false,     //异步执行  
                url: "sql.php",   //SQL数据库文件  
                data: {},         //发送给数据库的数据  
                dataType: "json", //json类型  
                success: function(result) {  
                    if (result) {  
                        for (var i = 0; i < result.length; i++) {  
                            places.push(result[i].place);  
                            nums.push(result[i].num);  
                            console.log(result[i].place);  
                            console.log(result[i].num);  
                        }  
                    }  
                }  
            })  
            return places, nums;  
        }  
  
        //执行异步请求  
        TestAjax();  
  
        // 指定图表的配置项和数据  
        var option = {  
            title: {  
                text: 'ECharts+Ajax+MySQL+PHP'  
            },  
            tooltip: {  
                show : true  
            },  
            legend: {  
                data:['数量']  
            },  
            xAxis: [{  
                //data: ["贵阳市","遵义市","凯里市","六盘水市","都匀市","毕节市"]  
                type : 'category',  
                data : places  
            }],  
            yAxis: {  
                type : 'value'  
            },  
            series: [{  
                name : "数量",  
                type : "bar",  
                data : nums  
            }]  
        };  
  
        // 使用刚指定的配置项和数据显示图表。  
        myChart.setOption(option);  
    </script>  
    <marquee>下班了，梅桑快吃饭</marquee>  
</body>  
</html>

效果如下：