HTML Echarts图形统计实时显示DHT11温度（二）

我也不清楚

已于 2022-08-02 11:25:02 修改

阅读量395

点赞数

分类专栏： IOT 文章标签： echarts html javascript

于 2022-08-02 11:09:31 首次发布

本文链接：https://blog.csdn.net/chenyang_wei/article/details/126118055

版权

IOT 专栏收录该内容

12 篇文章 3 订阅

订阅专栏

上位机：

一、文件结构

二、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

http://t.csdn.cn/8ZpX1

四、echarts.min.js

https://download.csdn.net/download/chenyang_wei/86271647