Streamlit 结合 ECharts 快速打造交互式数据大屏

核心工具简介

Streamlit 特性

Streamlit 是一款基于 Python 的开源框架，专为数据科学家和工程师设计。其声明式交互模型允许用户仅用纯 Python 代码即可将脚本转化为可运行的 Web 应用，自动处理状态管理与路由，彻底免去前端工程与服务器配置的繁琐工作。

ECharts 与渲染方案

ECharts 由百度团队开源，提供折线图、柱状图、散点图、地图等数十种丰富组件，支持高度定制与流畅交互。streamlit-echarts 模块作为桥接层，不仅可直接接收原生 JavaScript 风格的 JSON 配置对象，还内置了 Pyecharts 渲染器，满足从轻量配置到复杂绘图库的无缝切换需求。

依赖安装与环境配置

在创建应用前，需通过 pip 获取核心依赖包。建议先在虚拟环境中初始化，避免版本冲突：

pip install streamlit
pip install streamlit-echarts

安装完成后，终端执行任意 Python 脚本并传入命令即可启动本地服务：

streamlit run your_app.py

浏览器默认跳转至 http://localhost:8501 查看渲染结果。

实战操作一：原生配置渲染柱状图

第1步：导入必要模块

目的：初始化运行环境以调用渲染接口。入口为新建 Python 文件，动作是引入 streamlit 主程序与 st_echarts 函数。重要参数：无。可观察的完成状态：编辑器底部显示导入成功且无红色波浪线警告。

第2步：定义图表配置字典

目的：明确图表结构与数据映射关系。入口为代码编辑区，动作是按 ECharts 标准 JSON 规范编写字典。重要参数：title.text（主标题）、xAxis.data（横轴类目）、series[].data（数据序列）。完成状态：字典变量命名如 option 且层级闭合无误。

import streamlit as st
from streamlit_echarts import st_echarts

option = {
    "title": {"text": "商品销量统计"},
    "tooltip": {},
    "xAxis": {
        "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
    },
    "yAxis": {},
    "series": [
        {
            "name": "销量",
            "type": "bar",
            "data": [5, 20, 36, 10, 10, 20]
        }
    ]
}

第3步：调用渲染接口并保存

目的：触发自定义图形在前端生成。入口为 st_echarts() 函数，动作是将字典传入 options 参数并执行。重要参数：options=option。完成状态：页面左侧侧边栏显示脚本元信息，右侧区域稳定渲染出柱状图，且随鼠标悬停出现浮动提示框。

实战操作二：集成 Pyecharts 扩展渲染

第1步：构建 Pyecharts 绘图对象

目的：利用链式语法生成具备高级排版能力的绘图实例。入口为代码区，动作是实例化 Bar 类并连续调用配置方法。重要参数：add_xaxis()、add_yaxis()、set_global_opts()。完成状态：变量 b 成功持有包含完整样式与数据信息的对象。

from pyecharts.charts import Bar
from pyecharts import options as opts
from streamlit_echarts import st_pyecharts

b = (
    Bar()
    .add_xaxis(["Microsoft", "Amazon", "IBM", "Oracle", "Google", "Alibaba"])
    .add_yaxis("2017-2018 Revenue (billion $)", [21.2, 20.4, 10.3, 6.08, 4, 2.2])
    .set_global_opts(
        title_opts=opts.TitleOpts(title="Top Cloud Providers", subtitle="Revenue Trend"),
        toolbox_opts=opts.ToolboxOpts()
    )
)

第2步：流式输出与交互验证

目的：将内部对象转换为前端可视控件。入口为 st_pyecharts() 函数，动作为传入上一步构建的对象。重要参数：options=b。完成状态：图表正常加载，右上角显示工具箱图标，点击可触发下载或缩放交互。

完成判断与排错指南

成功运行的标志是页面无白屏报错，且图表随窗口尺寸自适应重绘。若遇到无法显示或运行中断的情况，请按以下顺序排查：

1. 检查依赖包名称：确认已正确安装 streamlit-echarts（注意连字符），未安装或拼写错误会导致 ModuleNotFoundError。
2. 核对数据结构对齐：原生字典渲染时，series 数组内的 data 维度必须与 xAxis 严格一致，错位将引发静默渲染失败。
3. 处理离线/CDN 限制：ECharts 默认通过网络加载核心 JS。若本地测试断网，需在 st_echarts() 中手动指定 renderer='svg'，或将离线版 echarts.min.js 路径传入 echarts_js_content 参数。

以上就是 Streamlit 结合 ECharts 绘制精美图表的详细内容，更多关于 Python 数据可视化与快速搭建 Web 应用的资料请关注本站其它相关文章！