Echarts PHP MySQL 调用实例

22次阅读

共计 2673 个字符，预计需要花费 7 分钟才能阅读完成。

中文英文韩语日语

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>