【实战】Streamlit+ECharts绘制多图表可视化大屏,超级实用

实战项目背景介绍

当我们提到数据可视化,常常会想到众多的工具和库,如 MatplotlibSeaborn 甚至于 D3.js 等。但是,有一个特定的组合正在快速走红:StreamlitEChartsStreamlit,作为一个轻量级的 Python 工具,允许数据科学家和工程师轻而易举地创建交互式的 web 应用。而 ECharts,一款来自百度的开源 JavaScript 可视化工具,因其绚丽的效果和广泛的图表类型而广受欢迎。

ac4b64588cab3edfdbf1fb1f5c5af1b4.png

那么,为何我们要将 StreamlitECharts 结合呢?首先,ECharts 提供了一种动态、生动的方式来展示数据,这种方式往往比传统的静态图表更具吸引力。而 Streamlit 的简洁性和灵活性确保了我们可以快速部署应用,无需深入的前端开发经验。将这两者结合,我们可以在短时间内制作出既美观又功能强大的数据可视化大屏。

在上篇文章当中,我们简单地介绍了将 StreamlitECharts 结合来简单地绘制一些图表。Streamlit+Echarts画出的图表,真的是太精湛了!!在本文中,我们将深入探讨如何通过上面两者来制作可视化大屏。无论您是一个经验丰富的开发者还是一个初学者,都能从这个结合中获得启示和灵感。

代码结构

我们先来看一下整个项目的代码结构,如下图所示

1d731c834e6abaa122dcc21469786c79.png

分为 ECharts 的演示 demo 以及 PyeCharts 的演示 demo。我们可根据下拉框来指定是选择用 ECharts 或者是 PyeCharts 来进行图表的绘制,然后我们在具体的图表例子中可以选择一个、例如是折线图、柱状图或者是饼图以及散点图等等,具体的代码如下

def main():
    st.title("Streamlit ECharts 演示")

    with st.sidebar:
        st.header("配置")
        api_options = ("echarts", "pyecharts")
        selected_api = st.selectbox(
            label="选择",
            options=api_options,
        )

        page_options =
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个基于mysql+echarts+flask的可视化大屏项目的简单示例: 1. 数据库设计 假设我们要展示一个销售数据的可视化大屏,我们需要设计一个数据库来存储销售数据。可以创建一个名为 `sales` 的数据库,其中包含两个表: - `product` 表:存储产品信息,包括产品名称(name)、产品类型(type)和产品单价(price)。 - `order` 表:存储订单信息,包括订单号(order_id)、产品名称(product_name)、订单数量(quantity)和订单日期(order_date)。 2. 后端实现 使用 Flask 框架来实现后端接口,可以创建一个名为 `app.py` 的文件。这个文件中需要完成以下功能: - 连接到 MySQL 数据库,并查询销售数据。 - 将查询结果转换成 ECharts 所需的数据格式。 - 提供一个 API,将转换后的数据返回给前端。 示例代码如下: ```python from flask import Flask, jsonify import pymysql app = Flask(__name__) db = pymysql.connect(host='localhost', user='root', password='password', db='sales') @app.route('/api/sales') def sales(): cursor = db.cursor() sql = 'SELECT product.type, SUM(order.quantity * product.price) as total_sales FROM order INNER JOIN product ON order.product_name = product.name GROUP BY product.type' cursor.execute(sql) rows = cursor.fetchall() data = [] for row in rows: data.append({'name': row[0], 'value': row[1]}) return jsonify(data) if __name__ == '__main__': app.run() ``` 3. 前端实现 在前端页面中使用 ECharts 来展示销售数据。可以创建一个名为 `index.html` 的文件。这个文件中需要完成以下功能: - 引入 ECharts 库和 jQuery 库。 - 创建一个容器,用于展示 ECharts 图表。 - 发送 AJAX 请求到后端 API,获取销售数据。 - 使用 ECharts 绘制销售数据图表。 示例代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>销售数据可视化大屏</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> </head> <body> <div id="sales-chart" style="width: 800px;height: 400px;"></div> <script> $.get('/api/sales', function(data) { var chart = echarts.init(document.getElementById('sales-chart')); var option = { title: { text: '销售数据' }, tooltip: {}, xAxis: { data: data.map(function(item) { return item.name }) }, yAxis: {}, series: [{ name: '销售额', type: 'bar', data: data.map(function(item) { return item.value }) }] }; chart.setOption(option); }); </script> </body> </html> ``` 4. 运行项目 将 `app.py` 和 `index.html` 放在同一个目录下,并运行 `app.py` 文件。在浏览器中访问 `http://localhost:5000/index.html`,即可看到销售数据图表

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值