CSDN_ptt 2024-09-22 16:07 采纳率: 64.3%
浏览 5

基于flask、echarts实现数据可视化

读取hive数据库,基于flask、echarts实现数据可视化

read_hive_qs.py
```python
from pyhive import hive
import pandas as pd

conn = hive.Connection(host='192.168.107.103',
                       port=10000,
                       username='root',
                       database='dws',
                       auth='NOSASL'
                       )
a = conn.cursor()
def month_jobtype():
    a.execute('select * from month_jobtype')
    b = a.fetchall()
    data = {'岗位类型':[i[1] for i in b],'月份':[i[0] for i in b],'招聘人数':[i[2] for i in b]}
    month_jobtype = pd.DataFrame(data)
    return month_jobtype

flask_qs.py
```python
import read_hive_qs
import json
from flask import Flask, render_template

app=Flask(__name__,static_url_path='',static_folder='static')

@app.route('/')
def main():
    month_jobtype= read_hive_qs.month_jobtype()
    month = month_jobtype['月份'].unique().tolist()
    jobtype = month_jobtype['岗位类型'].unique().tolist()
    list1 = {}
    for i in jobtype:
        list1[i] = month_jobtype[month_jobtype['岗位类型']==i]['招聘人数'].tolist()
    list1_json = json.dumps(list1)

    return render_template('趋势图.html',month1 = month,jobtype = jobtype,list1_json=list1_json)
if __name__=='__main__':
    app.run(debug=True)


趋势图.html


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>趋势图</title>
    <script src="{{ url_for('static', filename='js/echarts.min.js') }}"></script>
</head>
<body>
<h2>不同月份的岗位类型的招聘人数变化</h2>
<div id="month_jobtype"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementsById('month_jobtype')[0]);

    var x = {{ month1|tojson }};  // 使用 tojson 过滤器
    var jobtypes = {{ jobtype|tojson }};  // 使用 tojson 过滤器
    var list1_json = {{ list1_json|safe }};  // 这里也可以使用 tojson,但 safe 通常足够

    var option = {
            xAxis: {
                type: 'category',
                data: x
            },
            yAxis: {
                type: 'value'
            },
            series: []
        };

        jobtypes.forEach(function(jobtype) {
            var y1 = list1_json[jobtype];
            option.series.push({
                name: jobtype,
                type: 'line',
                data: y1
            });
        });

        myChart.setOption(option);
</script>

</body>
</html>


结构

img

运行结果图

img

  • 写回答

1条回答 默认 最新

  • 一轮明月照丘壑 2024-09-22 16:08
    关注

    以下回复参考:皆我百晓生券券喵儿等免费微信小程序作答:

    根据你提供的代码和描述,我理解你正在尝试使用 Flask 和 ECharts 来可视化 Hive 数据库中的数据。不过,从你提供的代码和描述中,我发现可能存在一些问题或需要注意的地方。下面是一些建议的修正和改进点:

    1. 错误处理: 当连接 Hive 数据库或执行查询时,你应该处理可能出现的错误。例如,使用 tryexcept 来捕获和处理任何异常。
    2. Flask 中的静态文件路径: 你已经设置了静态文件的路径,但请确保路径是正确的。并且,如果你将静态文件夹放在非默认的路径上,你需要在 Flask 应用中正确地指定它。
    3. HTML 中的 JavaScript 语法: 在 HTML 中使用 JavaScript 时,确保所有变量都已正确传递并可用。此外,使用 document.getElementsById 应该是一个拼写错误。应该是 document.getElementById。另外确保这个 div 的 id (month_jobtype) 在 HTML 中确实存在。
    4. JSON 安全传递: 在 HTML 中传递 JSON 数据时,确保使用了 safe 过滤器来处理 list1_json。这样可以直接将 JSON 数据插入到 HTML 中而不进行额外的转义或处理。但要注意安全性问题,确保你信任这些数据并且它们不包含任何潜在的恶意代码。
    5. 图表渲染: 确保 ECharts 库已正确加载并可以在浏览器中运行。你可以尝试在浏览器中打开开发者工具并检查是否有任何错误消息。
    6. 图像占位符: 你的描述中使用了 {img1}{img2} 作为图像占位符,但在提供的代码中并没有相应的图像引用或说明。如果你想要展示图表的结果或预期的图表样式,请提供实际的图像或使用工具描述预期的输出。
    7. 其他注意事项: 确保 Hive 数据库的配置是正确的(如主机名、端口、用户名和密码等)。此外,确保你有足够的权限来查询 Hive 数据库中的表和数据。

    如果你遇到具体的错误或问题,请提供更多详细信息(如错误消息、预期输出与实际输出的对比等),这样我可以更准确地帮助你解决问题。

    评论

报告相同问题?

问题事件

  • 修改了问题 9月22日
  • 修改了问题 9月22日
  • 创建了问题 9月22日

悬赏问题

  • ¥15 如何在vue.config.js中读取到public文件夹下window.APP_CONFIG.API_BASE_URL的值
  • ¥50 浦育平台scratch图形化编程
  • ¥20 求这个的原理图 只要原理图
  • ¥15 vue2项目中,如何配置环境,可以在打完包之后修改请求的服务器地址
  • ¥20 微信的店铺小程序如何修改背景图
  • ¥15 UE5.1局部变量对蓝图不可见
  • ¥15 一共有五道问题关于整数幂的运算还有房间号码 还有网络密码的解答?(语言-python)
  • ¥20 sentry如何捕获上传Android ndk 崩溃
  • ¥15 在做logistic回归模型限制性立方条图时候,不能出完整图的困难
  • ¥15 G0系列单片机HAL库中景园gc9307液晶驱动芯片无法使用硬件SPI+DMA驱动,如何解决?