m0_74879466 2024-03-24 22:29 采纳率: 73.4%
浏览 0

django不用orm前端搜索后echarts显示房价条形图怎么做

django不用orm前端搜索后echarts显示房价条形图怎么做

  • 写回答

3条回答 默认 最新

  • 码农阿豪@新空间 新星创作者: 前端开发技术领域 2024-03-24 22:30
    关注
    让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言
    问题描述：如何在Django中不使用ORM，通过前端搜索后，使用echarts显示房价条形图。 回答： 1、首先需要在前端实现搜索功能，可以通过ajax获取到用户输入的搜索内容，然后将搜索内容传递到后端。 案例代码： HTML页面： 
    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.staticfile.org/qs/6.5.2/qs.min.js"></script>
    <style type="text/css">
        html,body{
            height: 100%;
        }
        .el-container{
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .el-header{
            background-color: #9FB1C8;
            color: #333;
            font-size: 24px;
            line-height: 60px;
            padding: 0 20px;
        }
        .el-main{
            display: flex;
            flex-direction: row;
            flex-grow: 1;
        }
        .el-aside{
            background-color: #F8F8F8;
            width: 200px;
            padding: 20px;
        }
        .el-content{
            padding: 20px;
            flex-grow: 1;
        }
        .el-footer{
            line-height: 60px;
            text-align: center;
            background-color: #333;
            color: #fff;
        }
    </style>
</head>
<body>
<div id="app" class="el-container">
    <div class="el-header">房价查询</div>
    <div class="el-main">
        <div class="el-aside">
            <el-input v-model="searchText" placeholder="请输入小区名称"></el-input>
            <el-button type="primary" @click="search">查询</el-button>
        </div>
        <div class="el-content">
            <div id="chart" style="width: 100%; height: 500px;"></div>
        </div>
    </div>
    <div class="el-footer">© 2021 AI智能助手</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            searchText: '',
            chartData: [],
            chart: null
        },
        methods: {
            search: function() {
                let that = this
                axios.post('/search', {
                    searchText: that.searchText
                })
                .then(function(response) {
                    that.chartData = response.data
                    that.renderChart()
                })
                .catch(function(error) {
                    console.log(error)
                });
            },
            renderChart: function() {
                let that = this
                let chart = echarts.init(document.getElementById('chart'));
                let option = {
                    title: {
                        text: '房价查询结果'
                    },
                    tooltip: {},
                    legend: {
                        data:['平均房价']
                    },
                    xAxis: {
                        data: that.chartData.map(item => item.name)
                    },
                    yAxis: {},
                    series: [{
                        name: '平均房价',
                        type: 'bar',
                        data: that.chartData.map(item => item.price)
                    }]
                };
                chart.setOption(option)
                that.chart = chart
            }
        },
        mounted: function () {
        }
    });
</script>
</body>
</html>

    2、在后端实现搜索功能，根据用户输入的搜索内容，在数据库中查询相应的数据。 案例代码： views.py文件：

    from django.shortcuts import render
from django.db import connection
from django.http import JsonResponse
def search(request):
    cursor = connection.cursor()
    searchText = request.POST.get('searchText', '')
    cursor.execute("select name, avg_price from house_prices where name like '%%%s%%'" % searchText)
    data = cursor.fetchall()
    res = []
    for item in data:
        res.append({
            'name': item[0],
            'price': item[1] if item[1] is not None else 0
        })
    cursor.close()
    return JsonResponse(res, safe=False)

    上述代码中，使用了Django自带的数据库连接对象connection，使用cursor.execute方法执行SQL语句查询数据，然后将查询结果封装成一个列表对象，最后通过JsonResponse返回给前端。 3、在前端使用echarts显示房价条形图，根据查询结果生成相应的图表。 案例代码： HTML页面中的渲染图表函数renderChart中展示了如何使用echarts生成柱状图的代码。在这里不再赘述。 最终，用户输入小区名称后，点击查询按钮，前端通过ajax将搜索内容传递到后端，后端根据搜索内容在数据库中查询相应的数据，将查询结果封装成一个列表对象返回给前端，并在前端使用echarts生成相应的柱状图，展示给用户。

    评论

报告相同问题？

  • 基于Django和Vue的学生信息管理及可视化分析系统源码.zip
    2022-05-30 20:52
    1. **条形图**：显示不同类别的学生数量。 2. **饼图**：表示各分类学生的比例。 3. **折线图**：跟踪学生数据随时间的变化趋势。 综上所述，这个项目结合了Django和Vue.js的优点，实现了数据管理、用户交互和数据...
  • 基于python+Django的图书分析大屏展示系统，.zip
    2023-10-10 22:54
    4. 数据可视化：借助Django模板系统和前端库（如ECharts、Highcharts或D3.js），将处理后的数据以图表、仪表盘等形式直观地展示在大屏幕上。可以实现包括条形图、饼图、折线图等多种图表类型，以反映图书的分类分布...
  • WEB开发django-orm篇,元数据
    2023-04-02 19:30
    菜鸟-01的博客 ORM(Object Relational Mapping，对象关系映射)把对象与数据库中的表关联起来，对象的属性映射到表的各个字段，同时，还把...Django 为ORM 提供了强的支持，适配了多种常用的数据库，如 PostgreSQL、MySQL、Oracle等。
  • Django之Models取MySQL数据，并使用Echarts展示
    2021-04-27 16:58
    Cherry*J的博客 提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 提示：以下是本篇文章正文内容，下面案例...
  • python echarts mysql_Django中从mysql数据库中获取数据传到echarts方式
    2020-12-29 00:41
    weixin_39637370的博客 Django中从mysql数据库中获取数据传到echarts方式尝试了几种方法，感觉过于复杂，于是自己写了一个方法。(1)首先在要绘图的页面传入从数据库中提取的参数，这一步通过views可以实现；(2)然后是页面加载完成时执行的...
  • Django+Echarts画图实例
    2018-11-26 07:47
    weixin_33695450的博客 为什么80%的码农都做不了架构师？>>> ...
  • 基于Django环境的轮毂标签打印系统设计与源码
    2024-10-04 07:19
    Django的内置功能，如ORM（对象关系映射）、用户认证、内容管理系统（CMS）等，都在轮毂标签打印系统中有所应用。 基于Django环境的轮毂标签打印系统是一个全面、高效且易用的解决方案。它不仅为轮毂标签的管理提供...
  • 【毕设项目】python Django 疫情数据可视化分析系统 源码 论文
    2024-10-18 09:05
    用户可以通过交互式的界面，例如地图、时间序列图、条形图和饼图等，直观地看到疫情数据的分布、变化趋势，以及与其他数据的关联性。 由于系统是基于Python Django框架开发，因此它具备了Django框架的诸多特性。...
  • django-argon-charts:Django Argon Charts-开源Django示例| 应用种子
    2021-04-01 21:38
    条形图显示了12mo时间范围内的销售额 小部件1：总销售额（价值） 小部件2：偷看交易-具有最大价值的交易 小部件3：总订单（所有交易的总和） 窗口小部件4：最佳月份-按订单数选择 代码库功能 支持UI的应用程序，...
  • python110二维码生成算法研究和实现(django).rar
    2024-04-26 00:17
    在本项目中，Django主要负责处理用户请求，调用二维码生成函数，将生成的二维码图片返回给前端展示，同时，也可以接收前端上传的二维码图片，进行解码操作。 项目的实现过程大致分为以下几个步骤： 1. **环境配置*...
  • 没有解决我的问题, 去提问

问题事件

  • 创建了问题 3月24日