实验室最近分配的项目,我的任务是将数据库的数据使用echarts显示出来。
代码如下:
sql_config.php:
<?php
$servername='localhost'; //mysql数据库服务器
$username='root'; //mysql数据库用户名
$password='你的密码'; //mysql数据库密码,初始默认密码为空
$database='zsy'; //mysql数据库名
?>
等下要用的话直接require就可以。
接下来就是将数据从数据库取出并储存成json格式,这里我遇到一个问题,就是给的数据库数据的字段名称有特殊符号,比如℃,我使用了sql的as语句解决,将特殊的字段名转换成了易操作的字段名。
get.php:
<?php
require("sql_config.php");
$conn = new mysqli($servername, $username, $password);
mysqli_query($conn,"set names 'utf8'"); //数据库输出编码
mysqli_select_db($conn,$database); //打开数据库
$result = mysqli_query($conn,"select 采样日期 ,`闪点(闭口)(℃)` as 闪点1");//打开表
$data="";
$array= array();
class User{
public $采样日期;
public $闪点1;
}
//mysql_fetch_array() 函数从结果集中取得一行作为关联数组,返回根据从结果集取得的行生成的数组,如果没有更多行则返回 false
while($row = mysqli_fetch_array($result,MYSQLI_ASSOC)){
$user=new User();
$user->采样日期 = $row['采样日期'];
$user->闪点1 = $row['闪点1'];
$array[]=$user;//将数据给到数组
}
$data=json_encode($array);//转化为json格式
echo $data;//检查是否能够输出正确的json格式数据。
?>
接下来是显示界面,关于echarts的知识可以百度去echarts的官网,五分钟就可以上手。
echarts.php:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts</title>
<script type="text/javascript" src="echarts.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main1" style="width: 1400px;height:400px;"></div>
<script type="text/javascript">
var arr1=[],arr2=[];
function arrTest(){
//这个功能块的作用就是读取json数据。
$.ajax({
type:"post",//请求服务器载入数据
async:false,//异步属性
url:"get.php",
data:{},
dataType:"json",
success:function(result){
if (result) {
for (var i = 0; i < result.length; i++) {
arr1.push(result[i].采样日期);
arr2.push(result[i].闪点1);
}
}
}
})
return arr1,arr2;
}
arrTest();
//第一个图
var myChart = echarts.init(document.getElementById('main1'));
option = {
tooltip: {
trigger: 'axis',
position: function (pt) {
return [pt[0], '10%'];
}
},
title: {
left: 'center',
text: '闪点(闭口),℃',
},
toolbox: {
feature: {
dataZoom: {
yAxisIndex: 'none'
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:arr1
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%']
},
series: [
{
name:'闪点',
type:'line',
smooth:true,
symbol: 'none',
sampling: 'average',
itemStyle: {
normal: {
color: 'rgb(255, 70, 131)'
}
},
areaStyle: {
normal: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgb(255, 158, 68)'
}, {
offset: 1,
color: 'rgb(255, 70, 131)'
}])
}
},
data: arr2
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
这样echarts图就出来咯:
在写该文章时我删了大部分代码,只留了部分代码并做了部分修改,只显示了一个图,如果要显示多个图,只需要增加容器。这里只是用一个图举例子,如果代码有问题可以留言。