可视化 – 一个HR

Apache ECharts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

连接数据库

创建sql_config.php

<?php
    $mysql_server_name='127.0.0.1'; //mysql数据库服务器
    $mysql_username='cs'; //mysql数据库用户名
    $mysql_password='123456'; //mysql数据库密码,初始默认密码为空
    $mysql_database='cs'; //mysql数据库名
 ?>

因为是测试用的甲骨文云服务器，就不再做脱敏了，以下亦同。

读取并处理数据库数据

<?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 wp_statistics_visit");//打开你的表
  $data="";
  $array= array();
  class User{
    public $last_counter;
    public $visit;
  }
  while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
    $user=new User();
    $user->last_counter = $row['last_counter'];
    $user->visit = $row['visit'];
    $array[]=$user;
  }
  $data=json_encode($array);
  // echo "{".'"user"'.":".$data."}";
  echo $data;
?>

数据呈现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>访问统计</title>
    <script type="text/javascript" src="https://www.guohao.asia/cdn/echarts-5.4.0/dist/echarts.js"></script>
    <script type="text/javascript" src="https://www.guohao.asia/cdn/jquery-3.6.1.min.js"></script>

</head>
<body>
    <div style="position: relative; overflow: hidden; width: 600px; height: 400px; 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:"bar.php",
                  data:{},
                  dataType:"json",
                  success:function(result){
                    if (result) {
                      for (var i = 0; i < result.length; i++) {
                          arr1.push(result[i].last_counter);
                          arr2.push(result[i].visit); //这边更新字段，可以只写你需要展示的字段。 
                      }
                    }
                  }
                })
                return arr1,arr2;
              }
              arrTest();
              var  option = {
              title : {
                    text: '访问数据',
                    subtext: '测试'},

              //Bootstrap 提示工具（Tooltip）插件,鼠标悬停时候的提示框
              tooltip: {
              show: true
              },
              //图例
              legend: {
              data:['last_counter','visit']
              },
              //工具箱
              toolbox: {
                    show : true,
                    feature : {
                         dataView : {show: true, readOnly: false},
                           magicType : {show: true, type: ['line', 'bar']},
                           restore : {show: true},
                           saveAsImage : {show: true}
                        }
              },
                        calculable : true,
              //x轴
              xAxis : [
              {
              type : 'category',
              data : arr1
              }],
              //y轴
              yAxis : [
              {type : 'value'}
              ],
              //需要展示的系列，根据需要
              series : [
               {
               "name":"访问量",
               "type":"bar",
               "data":arr2,
               markPoint : {
                            data : [
                            {type : 'max', name: '最大值'},
                            {type : 'min', name: '最小值'}
                                    ]
                                        },
                            markLine : {
                            data : [
                            {type : 'average', name: '平均值'}
                                   ]
                                        }
                        },
                    ]
                };
                // 为echarts对象加载数据
                if (option && typeof option === "object") {
                      myChart.setOption(option, true);
                  }
    </script>
</body>
</html>

一个HR

标签：可视化

Echarts PHP MySQL 调用实例

Apache ECharts

连接数据库

读取并处理数据库数据

数据呈现

效果

标签： 可视化

Echarts PHP MySQL 调用实例

Apache ECharts

连接数据库

读取并处理数据库数据

数据呈现

效果

标签：可视化