折线图
# -*- coding: utf-8 -*- """ @author: Mr_zhang @software: PyCharm @file: record.py @time: 2022/3/18 11:25 """ import datetime import requests map_data = [ { 'address': '广东省深圳市南山区桃源街道中爱花园', # 坐标值(地址) 'geo': '113.942267,22.581026', # 坐标(经纬度) 'create_at': '2022-04-14 00:02:02' # 坐标创建时间|为空直接显示点坐标。有值根据时间排序箭头标注 } ] params = { 'start_time': '20220407000000', 'end_time': '20220408000000' } res = requests.get('http://192.168.2.9:9999/v1/device/photo/snap_count/?format=json', params) results = res.json() dates = results.get('dates') people_list = results.get('people_count') vehicle_list = results.get('vehicle_count') print('起止时间为: ', dates) print('人脸统计: ', people_list) print('车辆统计: ', vehicle_list) print('*' * 100) start_date = datetime.datetime.strptime(dates['start_date'], '%Y%m%d%H%M%S') end_date = datetime.datetime.strptime(dates['end_date'], '%Y%m%d%H%M%S') days = datetime.timedelta(days=1) if end_date - start_date <= days: people_hour_list = [{'date': ''.join([str(i), '点']), 'count': 0} for i in range(24)] vehicle_hour_list = [{'date': ''.join([str(i), '点']), 'count': 0} for i in range(24)] for i in people_list: people_hour_list[int(i.get('date').split(':')[1])]['count'] = i.get('count') for i in vehicle_list: vehicle_hour_list[int(i.get('date').split(':')[1])]['count'] = i.get('count') else: dlt_day = (end_date - start_date).days + 1 people_hour_list = [{'date': (start_date + datetime.timedelta(days=i)).strftime('%Y-%m-%d'), 'count': 0} for i in range(dlt_day)] vehicle_hour_list = [{'date': (start_date + datetime.timedelta(days=i)).strftime('%Y-%m-%d'), 'count': 0} for i in range(dlt_day)] for i, v in enumerate(people_hour_list): for j in people_list: if v.get('date') == j.get('date'): people_hour_list[i]['count'] = j.get('count') break for i, v in enumerate(vehicle_hour_list): for j in vehicle_list: if v.get('date') == j.get('date'): vehicle_hour_list[i]['count'] = j.get('count') break print(people_hour_list) print(vehicle_hour_list)
Vue.component('home-line', { props: ['time_choice'], data() { return { option: { legend: { show: true, data: ['人员', '车辆'] }, grid: { left: '0%', right: '6%', bottom: '1%', top: '10%', containLabel: true }, tooltip: { trigger: 'item' }, xAxis: [ { axisLine: { lineStyle: { color: '#E5E5E5', width: 1 //这里是为了突出显示加上的 } }, axisLabel: { show: true, textStyle: { color: '#999999' } }, data: [ '2022-04-02', '2022-04-03', '2022-04-04', '2022-04-05', '2022-04-06', '2022-04-07', '2022-04-08', '2022-04-09', '2022-04-10', '2022-04-11', '2022-04-12', '2022-04-13', '2022-04-14', '2022-04-15' ], axisTick: { show: false } } ], yAxis: [ { type: 'value', axisLabel: { show: true, textStyle: { color: '#999999' } }, axisLine: { lineStyle: { color: '#E5E5E5', width: 1 //这里是为了突出显示加上的 } }, splitLine: { show: true, lineStyle: { type: 'solid', //设置网格线类型 dotted:虚线 solid:实线 color: '#F0F0F0', width: '1' } } } ], series: [ { name: '人员', type: 'line', data: [5, 14, 13, 15, 17, 18, 20, 10, 11, 34, 32, 87, 12, 10], symbolSize: 8, //折线点的大小 itemStyle: { normal: { color: '#f04767', lineStyle: { width: 2, type: 'solid', //'dotted'虚线 'solid'实线 color: '#f04767' } } } }, { name: '车辆', type: 'line', data: [1, 2, 3, 0, 0, 0, 0, 4, 9, 1, 0, 5, 6, 5], symbolSize: 8, //折线点的大小 itemStyle: { normal: { color: '#3d7efc', lineStyle: { width: 2, type: 'dotted', //'dotted'虚线 'solid'实线 color: '#3d7efc' } } } } ] } } }, mounted() { console.log(this.time_choice) //请求数据 伪代码 let self = this; axios.get("/v1/device/photo/snap_count/?format=json", { params: { start_time: '20220402000000', end_time: '20220422000000' } }, { 'Content-Type': 'application/json;charset=UTF-8' }).then(res => { console.log(res.data); }); }, template: `<div style="display: flex"> <echarts :option="option" style="width: 100%;height: 280px"></echarts> </div>` })
本文来自博客园,作者:一石数字欠我15w!!!,转载请注明原文链接:https://www.cnblogs.com/52-qq/p/16145547.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)