当前位置: 首页 > 后端技术 > Python

基于Echarts+PythonFlask动态实时大屏监控系统

时间:2023-03-25 19:59:31 Python

效果展示1.动态实时更新数据效果图2.鼠标右键切换主题1.确定需求方案1.屏幕分辨率本案例的分辨率为16:9,最常用的宽屏比例。根据电脑分辨率屏幕自适应显示,F11全屏查看;2、部署方式B/S方式:支持Windows、Linux、Mac等主流操作系统;支持主流浏览器Chrome、MicrosoftEdge、360等;server是用python语言写的,可以配置python环境。最近刚刚整理了电子版的Python书籍资料,都是打包好的。需要的可以直接去gzh【Python编程学习圈】获取。关注回复关键词【学习资料】即可免费获取,包括入门。进阶、爬虫、数据分析等方向的教程不要错过!2.整体架构设计前端Echarts开源库:使用WebStorm编辑器;后端http服务器:基于Python实现,使用Pycharm或VSCode编辑器;数据传输格式:JSON;数据源类型:JSON文件。实际开发需要,支持自定义HTTPAPI接口或其他各类数据库,如PostgreSQL、MySQL、Oracle、MicrosoftSQLServer、SQLite、Excel表等。数据更新方式:使用httpget轮询方式。在实际应用中,也可以选择j监听后端数据实时更新,实时推送到前端的方式;三、编码实现(基于篇幅和可读性考虑,此处展示部分关键代码)1、前端html代码本页面布局采用H5的网格布局,代码简洁易操作。

32位高速容器-网格容器

新增量金累计数量现有数量
910>grid-containerdefinition.grid-container{display:grid;/*6列,定义列宽*/grid-template-columns:14%14.5%20%20%14.5%14%;/*auto:用于自动设置行高,即根据容器的大小和行中的内容*/网格模板行:10%25%30%30%;网格间隙:10px;/*背景颜色:#2196F3;*/填充:0;宽度:100%;高度:100%;跨多行多列的网格定义#lo_5{grid-area:3/1/4/3;}2。前端JS-echarts图表functioninit_echart_line_visualMap(container){//根据准备好的dom,初始化echarts实例varmyChart=echarts.init(document.getElementById(container),g主题);option={title:{text:"股票市值实时监控",//top:0,//left:"center",textStyle:{//color:"#17c0ff",fontSize:"12",},},tooltip:{trigger:"item",formatter:"{a}
{b}:{c}({d}%)",position:function(p){//其中p是当前鼠标位置return[p[0]+10,p[1]-10];},},网格:{左:“3%”,右:“3%”,下:“3%",top:"25%",containLabel:true,},xAxis:{name:"名称",type:"category",data:[],axisLabel:{textStyle:{color:"rgba(255,255,255,.8)",//fontSize:14,},//格式化程序:"{value}%",},axisLine:{lineStyle:{color:"rgba(255,255,255,.2)",},},splitLine:{lineStyle:{color:"rgba(255,255,255,.1)",},},},yAxis:{name:"亿元",type:"value",data:[],axisLabel:{textStyle:{颜色:"rgba(255,255,255,.8)",//fontSize:14,},formatter:"{value}",},axisLine:{lineStyle:{color:"rgba(255,255,255,.2)",},},splitLine:{lineStyle:{颜色:"rgba(255,255,255,.1)",},},},visualMap:{top:"top",left:"right",textStyle:{color:"rgba(255,255,255,.8)",//字体大小:14,},pieces:[{gt:0,lte:100,颜色:"#FF0000",},{gt:100,lte:800,颜色:"#FFA500",},{gt:800,lte:900,color:"#2E8B57",},],},series:[{name:"AgeDistribution",type:"line",//stack:"total",//label:{//显示:true,//},//使用系统函数markPoint:{label:{textStyle:{color:"rgba(255,255,255,.8)",//fontSize:14,},},data:[{type:"最大”,名称:“Max"},{type:"min",name:"Min"},],},markLine:{data:[{type:"average",name:"Avg"}],},//自定义数据//markLine:{////图形是否不响应并触发鼠标事件//silent:true,//label:{//textStyle:{//color:"rgba(255,255,255,.8)",////fontSize:14,//},//},//数据:[//{//yAxis:100,//lineStyle:{//color:"#FF0000",//},//},//{//yAxis:800,//lineStyle:{//颜色:"#FFA500",//},//},//{//yAxis:900,//lineStyle:{//颜色:"#2E8B57",//},//},//],//},},],};//使用刚刚指定的配置项和数据显示图表myChart.setOption(option);window.addEventListener("resize",function(){myChart.resize();});}functiongetKeys(dataList){varkeys=[];varlen=dataList.length;对于(vari=0;ipythonmain.pyhttp://localhost:88/static/index.html五.运行效果