jquery echarts 从数据库获取数据
一、原理首先得有个数据库，实验性质的话本地的就行，通过PHP study和Navicat。然后写一个PHP文件从数据库拿数据（代码我放下面了），接着通过ajax来获取到php获取到的数据，将数据放到图表对应位置，渲染到容器上就行。
二、直接上代码，解释都在注释里
1.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="echarts.js的路径"></script>
<script src="jquery-3.4.1.js的路径"></script>
<title>Title</title>
</head>
<body>
</body>
<div id="main2" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
//初始化
var myChart = echarts.init(document.getElementById('main2'));
//数据都先不填，这里也是采用直接渲染的方式，配置也放在setOption中，可以参考我的博客里“echarts图表动态化”这篇文章
myChart.setOption({
title: {
text: 'test'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
//数据加载完之前先显示一段简单的loading动画
myChart.showLoading();
//名字数组（实际用来盛放X轴坐标值）
var names=[];
//value数组（实际用来盛放Y坐标值）
var nums=[];
$.ajax({
type : "get",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
//我的类似这种 "http://localhost/文件夹名字t/php/**.php", 不太明白的可以查查PHP study的东西
url : "php文件的路径或者链接",
data : {},
//返回数据形式为json
dataType : "json",
//请求成功时执行该函数内容，result即为服务器返回的json对象
success : function(result) {
// alert("连接成功");
if (result) {
for(var i=0;i<result.length;i++){
//挨个取出name并填入名字数组，这个xname是根据你在php那发过来的列表来的，下面那个ysh也是
names.push(result[i].xname);
}
for(var i=0;i<result.length;i++){
//挨个取出value并填入value数组
nums.push(result[i].ysh);
}
//数据都存进去了，就不需要加载动画了，所以这里把他隐藏
myChart.hideLoading();
//将图表渲染进容器里
myChart.setOption({
xAxis: {
data: names
},
series: [
name: '销量',
data: nums
}]
});
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
})
</script>
</html>
2.php代码
<?php
header("Content-Type: text/html;charset=utf-8");
$datalist = [];
$servername = "地址（本地的话就localhost）";
$username = "用户名";
$password = "密码";
$dbname = "数据库名";
// 创建连接
$link = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($link->connect_error) {
die("连接失败: " . $link->connect_error);
}
$link->set_charset("utf8");
//学过点数据库的应该知道这句话是啥意思把。。。。。。
$sql = "select * from 表名";
//执行上面的语句并把结果存在res里
$res = $link->query($sql);
$new = [];
$i=0;
if ($res->num_rows > 0) {
while($row = $res->fetch_assoc()) {
//这里将从数据库拿的数据赋值给一个变量，便于我们下面将他们存列表里，这里怎么写取决于你数据形式
$xname=$row["xname"];
$ysh=$row["ysh"];
$news[$i] = array("xname"=>"$xname","ysh"=>"$ysh");
$i=$i+1;
}
}
$datalist = $news;
echo json_encode($datalist,JSON_UNESCAPED_UNICODE);
