安装PHPstudy
按照步骤安装，完成之后启动
打开浏览器，输入localhost，出现以下界面
可视化工具用的是 echarts
在phpstudy安装目录下的www文件夹里新建目录chart（名称自定义），然后将echarts.js移动到该目录下
新建一个以 .php为后缀名的文件
<!DOCTYPE html> <?php $dbms='mysql'; //数据库类型 $host='192.168.17.200'; //数据库主机名 $dbName='userdb'; //使用的数据库 $user='sqoop'; //数据库连接用户名 $pass='sqoop'; //对应的密码 $dsn="$dbms:host=$host;dbname=$dbName"; $dbh = new PDO($dsn, $user, $pass); //初始化一个PDO对象 /*你还可以进行一次搜索操作*/ foreach ($dbh->query('SELECT * from pvsum') as $row) { $x[]=$row['id']; $y[]=$row['sum']; } $json_x=json_encode($x); $json_y=json_encode($y); ?> <html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 引入 echarts.js --> <script src="echarts.js"></script> </head> <body> <!-- 为ECharts准备一个具备大小（宽高）的Dom --> <div id="main" style=" 800px;height:400px;"></div> <script type="text/javascript"> var x=<?php echo $json_x?>; var y=<?php echo $json_y?>; // 基于准备好的dom，初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); var option = { title : { text: 'PV统计', subtext: '纯属虚构' }, tooltip : { trigger: 'axis' }, legend: { data:['访问量'] }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data :x } ], yAxis : [ { type : 'value' } ], series : [ { name:'访问量', type:'bar', data:y, markPoint : { data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : { data : [ {type : 'average', name: '平均值'} ] } }, ] }; myChart.setOption(option); </script> </body> </html>
保存，然后在浏览器打开localhost，
到这里这个项目基本上就算完成了