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>
效果
