m0_74879466 2024-04-22 21:28 采纳率: 73.4%
浏览 2

django不用orm画排行榜echarts怎么用echarts对数据排序

django不用orm画排行榜echarts怎么用echarts对数据排序

  • 写回答

5条回答 默认 最新

  • 专家-赤兔[在线] 优质创作者: 编程框架技术领域 2024-04-22 21:28
    关注

    引自免费微信小程序：皆我百晓生

    在Django项目中，如果你不想使用ORM（Object-Relational Mapping）来处理数据库查询，你可以直接通过SQL查询获取数据，然后将数据转换为ECharts支持的数据格式进行渲染。这里是一个简单的步骤指南：

    1. 执行SQL查询：首先，在你的Django应用中的models.py文件里定义一个函数，执行你需要的SQL查询。例如，如果你有一个名为UserScore的模型，且你想根据分数对用户进行排名，可以这样写：
    from django.db import connection

def get_score_ranking():
    with connection.cursor() as cursor:
        cursor.execute("""
            SELECT user_id, score
            FROM appname_UserScore
            ORDER BY score DESC;
        """)
        rows = cursor.fetchall()
    return rows
    1. 在视图中调用这个函数并返回数据：在相应的视图中，调用上述函数获取数据，并将其转化为JSON格式，以便于前端渲染。
    from django.http import JsonResponse
from .models import get_score_ranking

def ranking_view(request):
    data = get_score_ranking()
    response_data = {
        'status': 'success',
        'data': [{'user_id': row[0], 'score': row[1]} for row in data]
    }
    return JsonResponse(response_data)
    1. 前端获取数据并渲染ECharts：在前端页面（HTML），使用Ajax从后端获取数据，然后利用ECharts创建图表。这里我们使用JavaScript编写ECharts的部分代码：
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ranking</title>
    <!-- 引入 ECharts -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>

    <script>
        // 调用Ajax获取数据
        fetch('/api/ranking')
            .then(response => response.json())
            .then(data => {
                if (data.status === 'success') {
                    var scores = data.data;

                    // 数据清洗，根据需求可能需要进一步处理
                    var sortedScores = scores.sort((a, b) => b.score - a.score);

                    // ECharts配置项
                    var option = {
                        title: {
                            text: 'User Score Ranking'
                        },
                        tooltip: {},
                        xAxis: {
                            type: 'category',
                            data: sortedScores.map(item => item.user_id)
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: 'Score',
                            type: 'bar',
                            data: sortedScores.map(item => item.score)
                        }]
                    };

                    // 初始化ECharts实例
                    var chart = echarts.init(document.getElementById('main'));
                    chart.setOption(option);
                } else {
                    console.error('Error fetching data');
                }
            })
            .catch(error => console.error('Error:', error));
    </script>
</body>
</html>

    这段代码首先从后端获取数据，然后根据分数降序排序。接着，它设置了一个柱状图的ECharts选项，包括标题、轴标签、数据等。最后，初始化ECharts实例并设置其配置。

    注意：确保在HTML中正确引入了ECharts库，并且服务器端API路径 /api/ranking 需要替换为你实际的URL。

    这只是一个基本示例，具体实现可能需要根据你的项目结构和需求进行调整。

    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 4月22日