29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32 |
您所在的位置：网站首页 › echarts是基于什么开发的 › 29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32 |
29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32
|
我是 YYDataV数据可视化专注于 数据可视化大屏， 工厂扫码装箱系统等我的微信 6550523，多多交流 ~ 本案例为32：9超宽分辨率的大屏。 效果展示 1.动态实时更新数据效果图
2.鼠标右键切换主题
代码中预置了12个主题风格，实际开发中可根据实际情况二次增加。
切换到一个主题，我们可以看到：主题的颜色发生了变化。 [En]Switch to a theme, we can see: the color of the theme has changed.
一. 确定需求方案
1. 屏幕分辨率
这个案例的大屏分辨率是32:9，超炫的的宽屏比。 根据电脑分辨率屏幕自适应显示，F11全屏查看； 2. 部署方式B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置好python环境即可。 二. 整体架构设计 前端Echarts开源库：使用 WebStorm 编辑器； 后端 http服务器：基于 Python 实现，使用 Pycharm 或 VSCode 编辑器； 数据传输格式：JSON； 数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。 数据更新方式： 采用http get 轮询方式。在实际应用中，也可以视情况选择j监测后端数据实时更新，实时推送到前端的方式； 三.开发思路 1.设计布局根据客户的实际需求，首先画出产品的 原型布局。这里我为了后期方便开发，对不同的div进行了 颜色和数字标识。参考index_layout.html
2. 设置模板
根据原始布局，将设计组提供的UI配置到模板中。参考index_template.html
3. 编写图表
做完以上工作，接下来就可以对div加载各式图表！至此，工作已经完成了一半的样子。 四.编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码） 1. 前端html代码使用bootstrap container-fluid， row， col等实现。 【29】数据可视化大屏 - 企业综合信息 公司概况 营业额达成率 利润达成率 企业文化 市值增长 产品数据 产品人力分布 日活数据 产品印象 专注数据可视化，助力企业智能化 运营概览 客户企业画像 资产负债率 订单完成率 团队风采 性别分布 年龄分布 开发产品分布 团队精神 2. JSON 通信数据定义bar_ROA.json 如下 { "xAxis": { "data": [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10" ] }, "series": [ { "data": [ 84, 76, 99, 51, 65, 98, 72, 100, 67, 87 ] } ] } 3. 前端JS – 数据定时更新控制支持在每个echarts图表中独立控制定时更新的间隔。 // 定时1s执行数据更新函数 setInterval(function () { async_echart_bar_horizontal( container, path_bar_horizontal + "bar_horizontal.json" ); }, 1000); 4.后端 flask 服务器 from flask import Flask app = Flask(__name__, static_folder="static", template_folder="template") # 主程序在这里 if __name__ == "__main__": # 开启线程，触发动态数据 a = threading.Thread(target=asyncJson.loop) a.start() # 开启 flask 服务 app.run(host='0.0.0.0', port=88, debug=True) 四. 启动命令 python main.py http://localhost:88/static/index.html https://yydatav.blog.csdn.net/ https://blog.csdn.net/lildkdkdkjf/article/details/120705616 我的微信号：6550523 欢迎多多交流 五. 运行效果
六. 源码下载
29【源码】数据可视化大屏：基于Echarts+PythonFlask实现的32-9超宽大屏-企业综合信息.zip-企业管理文档类资源-CSDN下载 更多可视化案例YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客 Original: https://blog.csdn.net/lildkdkdkjf/article/details/124270995Author: YYDataV数据可视化Title: 29【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏 – 企业综合信息 相关阅读 Title: Django+VUE使用websocket一个需求,需要读取一个 json 文件然后推送给前端 这里选择用的 dwebsocket,相比channels更简单一些 pip install dwebsocket from dwebsocket.decorators import accept_websocket,require_websocket import sys,os import time import json from django.http import HttpResponse def read(): path=os.path.join(os.path.dirname(os.path.dirname(os.getcwd())),'xxx/public.json') with open("xxx/public.json",'r',encoding='utf8') as f: return f.read() @accept_websocket def demo_api(request): while 1: txt=read() time.sleep(3) request.websocket.send(json.dumps(txt)) return HttpResponse('ok')demo_api是主要函数. @accept_websocket给需要进行 websocket 通信的函数加上装饰器 accept_websocket-—可以接受websocket请求和普通http请求require_websocket—-只接受websocket请求,拒绝普通http请求 我这里使用的accept_websocket.但是我没有过滤请求.如果有需求可以使用 if request.is_websocket() 在循环读取文件时出现一个问题.path 拿到的路径在django 启动之后,这个路径读取不到. 但是我单独去跑这个函数用 path 路径可以读取得到.很奇怪.到最后我写的绝对路径.这并没有发现是哪里的问题. WEBSOCKET_ACCEPT_ALL=True created() { this.initWebSocket(); }, destroyed() { this.websock.close() }, methods: { initWebSocket() { const wsuri = "ws://127.0.0.1:8000/v1.0/flight/"; this.websock = new WebSocket(wsuri); this.websock.onopen = this.websocketonopen; this.websock.onmessage = this.websocketonmessage; }, websocketonopen() { console.log("链接成功") }, websocketonmessage(e) { let redata='' redata = JSON.parse(JSON.parse(e.data)) console.log(redata) } }, websocketsend(Data) { this.websock.send(Data); },Original: https://blog.csdn.net/qq_40600409/article/details/126300829Author: 不要一直敲门Title: Django+VUE使用websocket 原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/302093/ 转载文章受原作者版权保护。转载请注明原作者出处！ |
【本文地址】
今日新闻 |
推荐新闻 |