上位机:
一、文件结构
二、HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ESP8266_DHT11</title>
</head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<body>
<div>
<div id="myChart" style="height:230px;width:100%"></div>
<script>
$(function(){
myChart1 = echarts.init(document.getElementById('myChart'), 'default');
myChart1.setOption({
title : {
text: new Date()
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['温度']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
grid : {
top: '49',
right: '20',
bottom: '30'
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : []
}
],
yAxis : [
{
type : 'value'
}
],
//color: ['#FAD860','#F3A43B','#60C0DD','#C6E579'],
series : [
{
name:'温度',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[0,0,0,0,0,0,0]
}
]
});
});
</script>
</div>
</body>
<script src="./echarts/echarts.min.js"></script>
<script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
<script>
$(function(){
$(window).resize(function(){
var footerHeight = $('.main-footer').outerHeight() || 0;
var windowHeight = $(window).height();
$('.content').css('min-height', windowHeight - footerHeight);
myChart1.resize();
}).resize();
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$(window).resize();
});
});
// Create a client instance
var options = {
//mqtt客户端的id,这里面应该还可以加上其他参数,具体看官方文档
clientId: 'esp8266-client'
}
//console.log(options.clientId);
//浏览器采用websocket协议,host主机地址为192.168.0.200,端口为9001,路径为/mqtt
var client = mqtt.connect("ws://127.0.0.1:8083/mqtt",options) // you add a ws:// url here
//建立连接
client.on('connect', function () {
console.log("connect success!")
//订阅主题 presence
client.subscribe('publishTopic', function (err) {
if (!err) {
console.log("subscribe success!")
//发布主题presence,消息内容为Hello mqtt
client.publish('subscribeTopic', 'Hello mqtt')
}else{
//打印错误
console.log(err)
}
})
})
//如果连接错误,打印错误
client.on('error', function (err) {
console.log(err)
client.end()
})
xData = [];
tempData = [];
//如果client订阅主题成功,那么这里就是当接收到自己订阅主题的处理逻辑
client.on('message', function (topic, message) {
// message is Buffer,此处就是打印消息的具体内容
console.log('json-> ' + message.toString());
var jsonMsg = JSON.parse(message);
console.log('temperature-> ' + jsonMsg.temperature);
if(message.toString()){
var myDate = new Date();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
var date = hour+":"+minute+":"+second;
xData.push(date);
tempData.push(jsonMsg.temperature);
var myChart1 = echarts.init(document.getElementById('myChart'), 'default');
myChart1.setOption({
title : {
text: new Date()
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['时间']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
grid : {
top: '49',
right: '20',
bottom: '30'
},
xAxis : [
{
type : 'category',
boundaryGap : false,
data : xData
}
],
yAxis : [
{
type : 'value'
}
],
//color: ['#FAD860','#F3A43B','#60C0DD','#C6E579'],
series : [
{
name:'温度',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:tempData
}
]
});
}
})
</script>
</html>
三、jquery.js
jQuery JavaScript Library v1.10.2
四、echarts.min.js