【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传

目录

效果展示

多主题样式

一、 确定需求方案

1、确定产品上线部署的屏幕分辨率

2、部署方式 

二、整体架构设计

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 - 页面整体布局 

2、前端JS代码 - Echarts option设置

3、JSON 数据通信格式定义

4、前端数据定时更新控制

5、后端 flask 服务器

四、上线运行效果

五、启动命令

 六、源码下载

 更多精彩案例

---

写在前面，最近收到了小伙伴的建议，大屏的HTTP服务器是否可以由原来最简单的HTTPSERVER，再支持下 Python Flask 框架，这个框架在他们的工作中比较常用，又便于灵活扩展，所以应小伙伴之建议，诞生了这篇【基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传】案例。

效果展示

  

  

一、 确定需求方案

1、确定产品上线部署的屏幕分辨率

根据电脑分辨率屏幕自适应显示，F11全屏查看；

2、部署方式 

B/S方式：支持Windows、Linux、Mac等各种主流操作系统；支持主流浏览器Chrome，Microsoft Edge，360等；服务器采用python语言编写，配置下python依赖即可。

二、整体架构设计

1. 前端Echarts开源库：使用WebStorm编辑器；
2. 后端 http服务器：基于 Python 实现，使用Pycharm或VSCode编辑器；
3. 数据传输格式：JSON；
4. 数据源类型：JSON文件。实际开发需求中，支持定制HTTP API接口方式或其它各种类型数据库，如PostgreSQL、MySQL、Oracle、Microsoft SQL Server、SQLite、Excel表格等。
5. 数据更新方式：采用http get 轮询方式 。在实际开发需求中，采用后端数据实时更新，实时推送到前端这种方式具有实用性；

三、编码实现 （基于篇幅及可读性考虑，此处展示部分关键代码）

1、前端html代码 - 页面整体布局 

2、前端JS代码 - Echarts option设置

var idContainer_4_5 = "container_4_5";
function initEchart_4_5() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById(idContainer_4_5), gTheme);
  option = {
    title: {
      text: "年龄分布",
      top: "10%",
      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];
      },
    },

    grid: {
      left: "0",
      right: "10",
      bottom: "25%",
      top: "20%",
      containLabel: true,
    },

    xAxis: {
      type: "category",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    yAxis: {
      type: "value",
      data: [],
      axisLabel: {
        textStyle: {
          color: "rgba(255,255,255,.8)",
          fontSize: 10,
        },
      },
      axisLine: {
        lineStyle: {
          color: "rgba(255,255,255,.2)",
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        },
      },
    },
    series: [
      {
        name: "年龄分布",
        type: "bar",
        stack: "total",
        label: {
          show: true,
        },
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  window.addEventListener("resize", function () {
    myChart.resize();
  });
}

function getKeys(dataList) {
  var keys = [];
  var len = dataList.length;
  for (var i = 0; i < len; i++) keys.push(dataList[i].name);
  return keys;
}

function asyncData_4_5() {
  $.getJSON("myjson/bar_age.json").done(function (data) {
    var myChart = echarts.init(document.getElementById(idContainer_4_5));
    myChart.setOption({
      xAxis: { data: getKeys(data) },
      series: [{ data: data }],
    });
  }); //end $.getJSON
}

initEchart_4_5();

3、JSON 数据通信格式定义

[{"name": "<18", "value": 2962}, {"name": "18-23", "value": 3119}, {"name": "24-30", "value": 2562}, {"name": "31-40", "value": 1024}, {"name": "41-50", "value": 2791}, {"name": ">50", "value": 4073}]

4、前端数据定时更新控制

function asyncData() {
  asyncData_4_5();
  asyncData_4_6();
  asyncData_5_1();
  asyncData_5_2();
  asyncData_6();
  asyncData_7_1();
  asyncData_7_2();
  asyncData_7_3();
  // 定时从服务器更新数据
  setTimeout(asyncData, 1000);
}

5、后端 flask 服务器

app = Flask(__name__, static_folder="static", template_folder="template")


@app.route('/')
def hello_world():
    return 'Hello World!'

# 主程序在这里
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  欢迎多多交流

 六、源码下载

25【源码】数据可视化：基于 Echarts + Python Flask 动态实时大屏范例 - 企业宣传.zip

https://download.csdn.net/download/lildkdkdkjf/77313397

 更多精彩案例

YYDatav的数据可视化《精彩案例汇总》_YYDataV的博客-CSDN博客