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

YYDataV数据可视化

已于 2022-02-09 19:35:05 修改

阅读量1.5w

点赞数 49

分类专栏：【可视化大屏案例Python/Echarts】文章标签： python echarts flask 数据可视化前端

于 2022-01-22 13:38:01 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/lildkdkdkjf/article/details/122636269

版权

【可视化大屏案例Python/Echarts】专栏收录该内容

73 篇文章 213 订阅

订阅专栏

目录

多主题样式

一、确定需求方案

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依赖即可。

二、整体架构设计

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

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

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

<div class="container_fluid">
        <!-- 标题栏 -->
        <div class="row_fluid">
            <div id="container_1" class="col-xs-12 col-md-12">

            </div>
        </div>

        <!-- 上栏 -->
        <div class="row_fluid">

            <!-- 上左栏 -->
            <div id="container_2" class="col-xs-12 col-md-4">
                <div id="container_2_1" class="col-xs-12 col-md-6">
                </div>
                <div id="container_2_2" class="col-xs-12 col-md-6">
                </div>
                <div id="container_2_3" class="col-xs-12 col-md-12">
                </div>
            </div>

            <!-- 上中栏 -->
            <div id="container_3" class="col-xs-12 col-md-4">
                <iframe src="myimg/video.mp4" scrolling="no" border=0 frameborder="no" framespacing=0
                    allowfullscreen="true" width="100%" height="100%"> </iframe>
            </div>

            <!-- 上右栏 -->
            <div id="container_4" class="col-xs-12 col-md-4">
                <div id="container_4_1" class="col-xs-12 col-md-3">
                </div>

                <div id="container_4_2" class="col-xs-12 col-md-3">
                </div>

                <div id="container_4_3" class="col-xs-12 col-md-3">
                </div>

                <div id="container_4_4" class="col-xs-12 col-md-3">
                </div>

                <div id="container_4_5" class="col-xs-12 col-md-6">
                </div>

                <div id="container_4_6" class="col-xs-12 col-md-6">
                </div>
            </div>
        </div>
    </div>

    <!-- 下栏 -->
    <div class="row_fluid">
        <!-- 下左栏 -->
        <div id="container_5" class="col-xs-12 col-md-4">

            <div id="container_5_1" class="col-xs-12 col-md-12">
            </div>
            <div id="container_5_2" class="col-xs-12 col-md-12">
            </div>
        </div>

        <!-- 下中栏 -->
        <div id="container_6" class="col-xs-12 col-md-4">
        </div>

        <!-- 下右栏 -->
        <div class="col-xs-12 col-md-4">
            <div id="container_7" class="row_fluid">
                <div id="container_7_1" class="col-xs-12 col-md-6">
                </div>
                <div id="container_7_2" class="col-xs-12 col-md-6">
                </div>
                <div id="container_7_3" class="col-xs-12 col-md-12">
                </div>
            </div>
        </div>

    </div>

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} <br/>{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)

四、上线运行效果

五、启动命令

<!-- 启动server命令 -->
python main.py 

<!-- 浏览器中输入网址查看大屏（端口为 main.py 中的 port 参数定义） -->
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博客

YYDataV数据可视化

关注

49
点赞
踩
342

收藏

觉得还不错? 一键收藏
打赏
42
评论
【25】数据可视化：基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传

写在前面，最近收到了小伙伴的建议，大屏的HTTP服务器是否可以由原来最简单的HTTPSERVER，再支持下Python Flask 框架，这个框架在他们的工作中比较常用，又便于灵活扩展，所以应小伙伴之建议，诞生了这篇【基于 Echarts + Python Flask框架动态实时大屏范例 - 企业宣传】案例。效果展示多主题样式一、确定需求方案1、确定产品上线部署的屏幕分辨率根据电脑分辨率屏幕自适应显示，F11全屏查看；2、部署方式B/S方...
复制链接

扫一扫

专栏目录

评论 42

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

YYDataV数据可视化 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。