python实现可视化大屏（django+pyechars）

Play_Sai2024-06-26 18:44

1.实现效果图

2.对数据库进行迁移

python manage.py makemigrations

python manage.py migrate

3.登录页面

html 复制代码 
{% load static%}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>登录</title>
    <style>
        /* 清除浏览器默认边距，
使边框和内边距的值包含在元素的width和height内 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 使用flex布局，让内容垂直和水平居中 */

section {
    /* 相对定位 */
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
    background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}

/* 背景颜色 */

section .color {
    /* 绝对定位 */
    position: absolute;
    /* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
    filter: blur(200px);
}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #ff359b;
}

section .color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #fffd87;
}

section .color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.box {
    position: relative;
}

/* 背景圆样式 */

.box .circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    animation-delay: calc(var(--x) * -1s);
}


@keyframes animate {
    0%, 100%, {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box .circle:nth-child(1) {
    top: -50px;
    right: -60px;
    width: 100px;
    height: 100px;
}

.box .circle:nth-child(2) {
    top: 150px;
    left: -100px;
    width: 120px;
    height: 120px;
    z-index: 2;
}

.box .circle:nth-child(3) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
    z-index: 2;
}

.box .circle:nth-child(4) {
    bottom: -80px;
    left: 100px;
    width: 60px;
    height: 60px;
}

.box .circle:nth-child(5) {
    top: -80px;
    left: 140px;
    width: 60px;
    height: 60px;
}

/* 登录框样式 */

.container {
    position: relative;
    width: 400px;
    min-height: 400px;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.form {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 50px;
}


.form h2 {
    position: relative;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 5px;
    margin-bottom: 30px;
    cursor: pointer;
}

/* 登录标题的下划线样式 */

.form h2::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0px;
    height: 3px;
    background: #fff;
    transition: 0.5s;
}

.form h2:hover:before {
    width: 53px;
}

.form .inputBox {
    width: 100%;
    margin-top: 20px;
}


.form .inputBox input {
    width: 100%;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.2);
    outline: none;
    border: none;
    border-radius: 30px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 16px;
    letter-spacing: 1px;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form .inputBox input::placeholder {
    color: #fff;
}



.form .inputBox input[type="submit"] {
    background: #fff;
    color: #666;
    max-width: 100px;
    margin-bottom: 20px;
    font-weight: 600;
    cursor: pointer;
}

.forget {
    margin-top: 6px;
    color: #fff;
    letter-spacing: 1px;
}

.forget a {
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}
    </style>
</head>

<body>
    <section>
 
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <div class="box">
     
            <div class="circle" style="--x:0"></div>
            <div class="circle" style="--x:1"></div>
            <div class="circle" style="--x:2"></div>
            <div class="circle" style="--x:3"></div>
            <div class="circle" style="--x:4"></div>
    
            <div class="container">
                <div class="form">
                    <h2>登录页面</h2>
                    <form action="{% url 'pic:login' %}" method="post">
                        {% csrf_token %}
                        <div class="inputBox">
                            <input type="text" placeholder="姓名" name="username">

                        </div>
                        <div class="inputBox">
                            <input type="password" placeholder="密码" name="password">

                        </div>
                        <div class="inputBox">
                            <input type="submit" value="登录">
                        </div>


                    </form>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

4.设置路由

主路由

子路由

5.登录接口完整代码

python 复制代码 
def login(request):
    if request.method == "GET":
        return render(request, 'login.html')

    if request.method == "POST":
        username = request.POST.get("username")
        password = request.POST.get("password")
        print(username, password)
        try:
            # 使用 Django 自带的 authenticate 方法验证用户身份
            user = authenticate(request, username=username, password=password)
            if user:
                request.session["user"] = user.pk
                return redirect('pic:page')
            else:
                return redirect('pic:login')

        except User.DoesNotExist:
            messages.add_message(request, messages.WARNING, "用户名或密码错误！")
            return render(request, "login.html", {})

6.其他接口的完整代码

python 复制代码 
def line_1(request):
    area_color_js = (
        "new echarts.graphic.LinearGradient(0, 0, 0, 1, "
        "[{offset: 0, color: '#eb64fb'}, {offset: 1, color: '#3fbbff0d'}], false)"
    )
    l1 = (
        Line()
            .add_xaxis(xaxis_data=data['日期'].dt.strftime('%Y-%m-%d').tolist())
            .add_yaxis(
            series_name="涨跌幅",
            y_axis=data['涨跌幅'].tolist(),
            symbol_size=8,
            is_hover_animation=False,
            label_opts=opts.LabelOpts(is_show=True),
            linestyle_opts=opts.LineStyleOpts(width=1.5, color='#D14A61'),
            is_smooth=True,
            areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
        )
            .set_global_opts(
            title_opts=opts.TitleOpts(
                title="涨跌幅及涨跌额趋势", pos_left="center",
                title_textstyle_opts=opts.TextStyleOpts(color='#ededed')
            ),
            tooltip_opts=opts.TooltipOpts(trigger="axis"),
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True, link=[{"xAxisIndex": "all"}]
            ),
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_show=True,
                    is_realtime=True,
                    start_value=30,
                    end_value=70,
                    xaxis_index=[0, 1],
                )
            ],
            xaxis_opts=opts.AxisOpts(
                type_="category",
                boundary_gap=False,
                axisline_opts=opts.AxisLineOpts(is_on_zero=True, linestyle_opts=opts.LineStyleOpts(color='#FFF')),
                axislabel_opts=opts.LabelOpts(color='#FFF')
            ),
            yaxis_opts=opts.AxisOpts(name="幅度", axislabel_opts=opts.LabelOpts(color='#FFF'),
                                     axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color='#fff'))),
            legend_opts=opts.LegendOpts(pos_left="center", pos_top='6%', orient='horizontal', is_show=True,
                                        textstyle_opts=opts.TextStyleOpts(color='#ffffff')),
            toolbox_opts=opts.ToolboxOpts(
                is_show=True,
                feature={
                    "dataZoom": {"yAxisIndex": "none"},
                    "restore": {},
                    "saveAsImage": {},
                },
            ),
        )
    )

    l2 = (
        Line()
            .add_xaxis(xaxis_data=data['日期'].dt.strftime('%Y-%m-%d').tolist())
            .add_yaxis(
            series_name="涨跌额",
            y_axis=data['涨跌额'].tolist(),
            xaxis_index=1,
            yaxis_index=1,
            symbol_size=8,
            is_hover_animation=False,
            label_opts=opts.LabelOpts(is_show=True, color="#6E9EF1", position='bottom'),
            linestyle_opts=opts.LineStyleOpts(width=1.5, color="#6E9EF1"),
            is_smooth=True,
            areastyle_opts=opts.AreaStyleOpts(color=JsCode(area_color_js), opacity=1),
        )
            .set_global_opts(
            axispointer_opts=opts.AxisPointerOpts(
                is_show=True, link=[{"xAxisIndex": "all"}]
            ),
            tooltip_opts=opts.TooltipOpts(trigger="axis"),
            xaxis_opts=opts.AxisOpts(
                grid_index=1,
                type_="category",
                boundary_gap=False,
                axisline_opts=opts.AxisLineOpts(is_on_zero=True, linestyle_opts=opts.LineStyleOpts(color='#FFF')),
                position="top",
                axislabel_opts=opts.LabelOpts(color='#FFF'),
            ),
            datazoom_opts=[
                opts.DataZoomOpts(
                    is_realtime=True,
                    type_="inside",
                    start_value=30,
                    end_value=70,
                    xaxis_index=[0, 1],
                )
            ],
            yaxis_opts=opts.AxisOpts(is_inverse=True, name="额度", axislabel_opts=opts.LabelOpts(color='#FFF'),
                                     axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color='#fff'))),
            legend_opts=opts.LegendOpts(pos_left="center", pos_top='9%',
                                        textstyle_opts=opts.TextStyleOpts(color='#ffffff')),
        )
    )
    c = (
        Grid(init_opts=opts.InitOpts(width="540px", height="710px", bg_color='#0256B6'))
            .add(chart=l1, grid_opts=opts.GridOpts(pos_left=50, pos_right=50, height="35%"))
            .add(
            chart=l2,
            grid_opts=opts.GridOpts(pos_left=50, pos_right=50, pos_top="55%", height="35%")

        )
    )
    # return HttpResponse(c.render_embed())
    return c


def pie_1(request):
    # 转换日期列为日期时间格式并排序
    data['日期'] = pd.to_datetime(data['日期'])
    data.sort_values(by='日期', inplace=True)

    # 将日期列转换为年月格式
    data['年月'] = data['日期'].dt.to_period('M').astype(str)

    # 将成交量列除以10000
    data['成交量'] = round(data['成交量'] / 10000, 2)

    # 按年月分组，并计算平均成交量
    grouped_data = data.groupby('年月', as_index=False).agg({'成交量': 'mean'})

    tl = Timeline(init_opts=opts.InitOpts(width='450px', height='710px', bg_color='#0256B6'))
    for year in range(2023, 2025):
        # 获取当前年份的数据
        current_year_data = grouped_data[grouped_data['年月'].str.startswith(str(year))]

        pie = (
            Pie(init_opts=opts.InitOpts(bg_color='#0256B6'))
                .add(
                "商家A",
                [list(z) for z in zip(current_year_data['年月'], current_year_data['成交量'].round(2))],
                rosetype="radius",
                radius=["30%", "55%"],
            )
                .set_global_opts(title_opts=opts.TitleOpts(title="{}年成交量（万）".format(year),
                                                           title_textstyle_opts=opts.TextStyleOpts(color='#FFF'),
                                                           pos_top='top', pos_right='center'),
                                 legend_opts=opts.LegendOpts(pos_top='10%',
                                                             textstyle_opts=opts.TextStyleOpts(color='#FFF')))
        )
        pie.set_colors(
            ["#91CC75", "#EE6666", "#EEC85B", "#64B5CD", "#FF69B4", "#BA55D3", "#CD5C5C", "#FFA500",
             "#40E0D0"])
        tl.add_schema(
            play_interval=1500,  # 表示播放的速度（跳动的间隔），单位毫秒（ms）
            is_auto_play=True,  # 设置自动播放
            # is_timeline_show=False,  # 不展示时间组件的轴
            pos_bottom='5%',
            is_loop_play=True,  # 是否循环播放
            width='300px',
            pos_left='center',
            label_opts=opts.LabelOpts(color='#FFF'),
        )
        tl.add(pie, "{}年".format(year))

    return tl


def heatmap_1(request):
    # 转换日期列为日期时间格式并排序
    data['日期'] = pd.to_datetime(data['日期'])
    data.sort_values(by='日期', inplace=True)
    # 创建年月列
    data['年月'] = data['日期'].dt.to_period('M').astype(str)  # 这将把日期转换为年月格式，例如 2024-03
    # 按年月分组
    grouped_data = data.groupby('年月')

    # 计算每个月的平均交易量（除以1000000以便缩小范围）
    avg = round(grouped_data['成交额'].mean() / 10000000, 2)
    value = [[i, j, avg[i]] for i in range(len(grouped_data['年月'])) for j in range(1)]
    # 创建热力图
    heatmap = (
        HeatMap(init_opts=opts.InitOpts(height='200px', width='300px', bg_color='#0256B6'))
            .add_xaxis(avg.index.tolist())
            .add_yaxis("", [''], value,
                       label_opts=opts.LabelOpts(is_show=True, color='#FFF', position='inside', font_size=10))
            .set_global_opts(
            visualmap_opts=opts.VisualMapOpts(
                min_=min(avg.values.tolist()),
                max_=max(avg.values.tolist()),
                range_text=["High", "Low"],
                textstyle_opts=opts.TextStyleOpts(color='#EDEDED'),
                orient="vertical",
                pos_left="left",
                item_height=280,
                item_width=10,
                pos_bottom='20px'
            ),
            xaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color='#FFF'), is_show=False),
            yaxis_opts=opts.AxisOpts(axislabel_opts=opts.LabelOpts(color='#FFF'), is_show=False),

        )
    )
    return heatmap


def scatter_1(request):
    # 转换日期列为日期时间格式并排序
    data['日期'] = pd.to_datetime(data['日期'])
    data.sort_values(by='日期', inplace=True)
    # 创建年月列
    data['年月'] = data['日期'].dt.to_period('M').astype(str)  # 这将把日期转换为年月格式，例如 2024-03
    # 按年月分组并计算每月的最高和最低平均值
    grouped_data = data.groupby('年月', as_index=False).agg({'最高': 'mean', '最低': 'mean'})
    # 将平均值转换为万美元
    grouped_data['最高平均'] = round(grouped_data['最高'] / 1, 0)
    grouped_data['最低平均'] = round(grouped_data['最低'] / 1, 0)

    # 获取最低值和最高值
    min_value = grouped_data['最低平均'].min()

    s = (
        EffectScatter(init_opts=opts.InitOpts(width='430px'))
            .add_xaxis(grouped_data['年月'].tolist())
            .add_yaxis("最高平均", grouped_data['最高平均'].tolist(), symbol=SymbolType.ARROW)
            .add_yaxis("最低平均", grouped_data['最低平均'].tolist(), symbol=SymbolType.DIAMOND)
            .set_global_opts(
            title_opts=opts.TitleOpts(title="每月平均的最高开盘、最低开盘及成交额（百万）",
                                      title_textstyle_opts=opts.TextStyleOpts(color='#ededed')),
            # visualmap_opts=opts.VisualMapOpts(max_=2100, min_=1000, is_show=True),
            yaxis_opts=opts.AxisOpts(min_=1600, max_=min_value, axislabel_opts=opts.LabelOpts(interval=100),
                                     axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color='#fff')),
                                     splitline_opts=opts.SplitLineOpts(is_show=True)),
            legend_opts=opts.LegendOpts(orient='vertical', pos_right='3%', legend_icon='pin', pos_top='5%',
                                        textstyle_opts=opts.TextStyleOpts(color='#ededed')),
            xaxis_opts=opts.AxisOpts(axisline_opts=opts.AxisLineOpts(linestyle_opts=opts.LineStyleOpts(color='#FFF'))),
        )
            .set_series_opts(label_opts=opts.LabelOpts(color='pink'))
    )
    c = (
        Grid(init_opts=opts.InitOpts(width="470px", height="710px", bg_color='#0256B6'))
            .add(chart=s, grid_opts=opts.GridOpts(pos_left=50, pos_right=50, height="35%"))
            .add(
            chart=heatmap_1(request),
            grid_opts=opts.GridOpts(pos_left=50, pos_right=50, pos_top="55%", height="35%")

        )
    )

    return c


def page(request):
    page2 = Page(layout=Page.SimplePageLayout)
    page2.add(
        line_1(request),
        pie_1(request),
        scatter_1(request),
    )
    return HttpResponse(page2.render_embed())

7.排版(将可视化图表的位置进行排版)

html 复制代码 
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #currentTime {
            position: fixed;
            bottom: 25px;
            left: 20px;
            color: white;
            font-size: 15px;
            z-index: 999;
        }

        body {
            overflow-y: hidden;
        }
    </style>
</head>
<body style="background-color: #0D325F">
<div style="display: flex; justify-content: space-between;">
    <span id="currentTime"></span>

    <div style="width:calc(25%); height: 900px; margin-top: 20px">
        <iframe src="{% url 'pic:line' %}" width="100%" height="72%" frameborder="0" scrolling="no"
                style="background-color: rgba(128, 128, 128, 0.2);"></iframe>
    </div>


    <div style="width:calc(50%); height: 900px; display: flex; flex-direction: column; justify-content: center; align-items: center;">
{#        <iframe src="{% url 'pic:' %}" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>#}
        <iframe src="{% url 'pic:polar' %}" width="100%" height="100%" frameborder="0" scrolling="no"
                style="margin-left: 28%"
        ></iframe>
    </div>


    <div style="width:calc(25%); height: 800px; display: flex; justify-content: center; flex-direction: column; align-items: center;">
        <iframe src="{% url 'pic:heat' %}" width="100%" height="100%" frameborder="0" scrolling="no"
                style="background-color: rgba(128, 128, 128, 0);"></iframe>
        <iframe src="{% url 'pic:graph' %}" width="100%" height="100%" frameborder="0" scrolling="no"
                style=" background-color: rgba(128, 128, 128, 0); margin-top: 10%"></iframe>
    </div>

</div>


<script>
    function updateTime() {
        var now = new Date();
        var weekdays = ["日", "一", "二", "三", "四", "五", "六"]; // 中文星期
        var year = now.getFullYear();
        var month = now.getMonth() + 1; // getMonth() returns 0-based month
        var day = now.getDate();
        var dayOfWeek = weekdays[now.getDay()];
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();

        // Add leading zero if the number is less than 10
        month = month < 10 ? '0' + month : month;
        day = day < 10 ? '0' + day : day;
        hours = hours < 10 ? '0' + hours : hours;
        minutes = minutes < 10 ? '0' + minutes : minutes;
        seconds = seconds < 10 ? '0' + seconds : seconds;

        var currentTimeString = year + '-' + month + '-' + day + ' 星期' + dayOfWeek + ' ' + hours + ':' + minutes + ':' + seconds;
        document.getElementById('currentTime').textContent = currentTimeString;
    }

    updateTime(); // Call the function initially to display time without delay

    // Update time every second
    setInterval(updateTime, 1000);
</script>

</body>
</html>
相关推荐
海绵波波1072 分钟前
flask后端开发（9）：ORM模型外键+迁移ORM模型
后端·python·flask
余生H7 分钟前
前端Python应用指南（二）深入Flask：理解Flask的应用结构与模块化设计
前端·后端·python·flask·全栈
酥饼~18 分钟前
html固定头和第一列简单例子
前端·javascript·html
m0_7482509324 分钟前
html 通用错误页面
前端·html
CriticalThinking32 分钟前
Pycharm不正常识别包含中文路径的解释器
ide·python·pycharm
AI人H哥会Java1 小时前
【Spring】基于XML的Spring容器配置——＜bean＞标签与属性解析
java·开发语言·spring boot·后端·架构
计算机学长felix1 小时前
基于SpringBoot的“大学生社团活动平台”的设计与实现（源码+数据库+文档+PPT)
数据库·spring boot·后端
sin22011 小时前
springboot数据校验报错
spring boot·后端·python
去哪儿技术沙龙1 小时前
去哪儿机票智能预警系统-雷达系统落地实践
后端
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07怎么找小红书美食探店博主合作？08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10STM32 无法烧录