折线图

# -*- 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>`
})