? ? ? ? 暑假的时候老师布置了一个作业，使用STM32f103c8t6制作简易示波器将波形检测后上传到网页进行描点绘图，这个小项目是我和同学一起完成的，我是负责网页的那一部分，我同学则是负责硬件部分。
? ? ? ? 附带网址：基于STM32的ESP8266WiFi模块波形检测仪
? ? ? ? 我是用Django为框架进行网页的编写。因为要绘图，所以要涉及到Echarts。
? ? ? ? 有关于Echarts可以进入官网进行了解：Echarts官网
? ? ? ? 下面是我的html代码
<script type="text/javascript" src="{% static 'echarts.js' %}"></script>引入E charts
<script type="text/javascript" src="{% static 'jquery.js' %}"></script>
<div class="box1"></div>
<script>
var myChart = echarts.init(document.querySelector(".box1"));
//var shuju=[1,2,3,45,6,4,10000]
function printf() {
$.getJSON('http://127.0.0.1:8000/text/shujuku/', function (context) {
shuju = context['date'];
{#console.log(shuju);#}
})
{#console.log("======"+shuju)#}
//3.初始化实例对象 echarts.init(dom容器)
//4.指定配置项和数据
var option = {
title: {
text: '电压'
},
xAxis: {
boundaryGap: true,// 刻度离纵轴有无间隙，默认true有间距
type: 'category',//'value' 数值轴，适用于连续数据。 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
// 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，
// 在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。 'log' 对数轴。适用于对数数据。
name: ' ',// 横轴名称
nameTextStyle: {// 名称样式
fontSize:15,
color:'#333',
fontWeight: 'bold'
},
axisLabel : {//坐标轴刻度标签的相关设置。如果这个字段不设置，echarts会根据屏宽及横坐标数据自动给出间隔
// clickable:true,//并给图表添加单击事件 根据返回值判断点击的是哪里
interval: 0,// 间隔长度，可自定义（如果是时间格式，echarts会自动处理）
rotate: 40,// 文字倾斜度
},
data: [' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',
' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',' ', ' ', ' ',' ',' ',' ',' ', ' ', ' ', ' ',],// 横轴坐标值
splitLine: {show: false},// 显示隐藏刻度线
},
yAxis: {
type: 'value'
},
series: [{
name:"电压",
type: 'line',
data: shuju,//[1, 23, 45, 5, 69, 69, 69, 69, 69],
smooth:true,
}]
};
myChart.setOption(option);
window.addEventListener("resize", function() {
// 让我们的图表调用 resize这个方法
myChart.resize();
});
}
var time1 = setInterval(function () {
printf();
}, 1000);
clearInterval(function () {
time1;
})
</script>? ? ? ? views视图函数代码
def sendtohtml():
n = 1
while n == 1:
tcp_socket = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
tcp_socket.connect(('192.168.4.1', 8888))
print("连接成功")
recv_data = tcp_socket.recv(1024)
if n == 1:
print("接收到数据：")
date = []
for i in recv_data.decode("utf-8"):
date = date+[i]
if len(date) > 3:
date = date[0]+date[1]+date[2]+date[3]
msg = ChartModel()
msg.c_time = date
msg.save()
print(msg.c_time)
date = []
data_list = []
time1 = ChartModel.objects.all()
for a in time1:
data_list = data_list + [a.c_time]
if len(data_list) > 100:
for c in range(25):
ChartModel.objects.all().first().delete()
tcp_socket.close(),
time.sleep(0.1)
continue
return HttpResponse()
def shujuku(request):
data_list = []
time1 = ChartModel.objects.all()
for a in time1:
data_list = data_list+[a.c_time]
context = {
'date': data_list,
}
return JsonResponse(data=context)
def send(request):
t = threading.Thread(target=sendtohtml) #双线程
t.start()
return render(request,'tubiao1.html')? ? ? ? 接下来我会解释一下视图函数里面的代码
? ? ? ? 第一个sendtohtml()，这个函数主要是进行数据的接受和数据的处理，因为我们所接受到的数据是一串串字符串，并不是我们想要的数据，所以只能对这些数据进行数据处理，当我们把数据处理完之后，我们就把数据存进我们的数据库里面，当我们所存进的数据达到一定的量的时候，我们就会把多出来的数据进行删除。
? ? ? ? 第二个shujuku(request)，这个函数是把数据库里面的数据一个个提取出来，之后发送到网页端，网页再把数据绘成图展示出来。
? ? ? ? 第三个send(request)，这个函数的作用是对函数sendtohtml()进行引用，最后的再返回网页。
? ? ? ? 下面的是我的model代码
class ChartModel(models.Model):
c_time = models.CharField(max_length=16,unique=False)
class Meta:
db_table = 'Chart'? ? ? ? 这个代码只是单纯的创建一个数据库进行数据存储。
? ? ? ? 这些代码组合在一起就能实现数据的接收和绘图。
?
? ? ? ? 作者本人学代码是断断续续的学了一年，这是本人的第一个博客，语言有可能不通顺，当然代码也不一定是最好的，若有错误之处，望各位大佬赐教。