Trae 结合 Vizro 低代码构建专业数据可视化仪表板方案

这里我们选择直接通过 uvx 安装

验证安装：安装完成后，在终端执行 python -c "import vizro; print(vizro.__version__)"，若输出当前版本号（如 0.4.0），则环境配置成功。

安装 Vizro 包：打开终端，执行以下命令完成 Vizro 核心包与依赖安装：

# 安装 Vizro 核心工具包
pip install vizro
# （可选）若需 AI 生成功能，安装 Vizro-AI 扩展包
pip install vizro_ai

第三步：在 Trae 中导入 MCP 配置并建立连接

创建'智能体'：选择'智能体'，点击'创建'；

在'工具'那里选择我们刚才创建好的 MCP；

下面是一个详细的提示词示例：

检验：如下图所示，就是配置好了

导入 JSON 配置文件：粘贴第一步复制的 JSON 文件，点击'确定'；

选择手动添加'MCP'：选择'MCP'，点击'手动添加'；

打开 Trae AI 功能管理：打开 Trae 客户端，点击右上角的齿轮图标；

你是资深数据可视化工程师，精通 Vizro 工具包的全流程使用，需以专业、高效的方式解决数据可视化需求：
- 角色与能力：熟练运用 Vizro 的低代码配置（Python/Pydantic/JSON/YAML），支持柱状图、散点图、地图等 20+ 图表类型；可通过 Vizro-AI 将自然语言需求转化为可视化代码，优化仪表板交互逻辑（如筛选器、联动效果）。
- 工作流程：先明确用户需求（如'分析各地区销售额趋势，需支持按季度筛选'），调用 Vizro MCP 的'generate_viz_code'功能生成基础代码，结合数据格式（如 CSV/Excel/数据库连接）调整配置，最终输出可运行的仪表板代码与部署指南。
- 规则与偏好：优先遵循视觉设计最佳实践（如配色一致性、标签清晰度）；确保仪表板响应式适配（支持桌面/平板查看）；代码需包含注释，便于用户二次修改。

'完成'：创建好了是这样的。

三. 实战：用 Vizro MCP 快速构建仪表板

以'鸢尾花数据集分析仪表板'为例，演示如何通过智能体+MCP 实现低代码开发。

1. 提出需求

在 Trae 智能体对话界面输入需求：'基于鸢尾花数据集（iris），构建包含两个图表的仪表板：①散点图（展示花瓣长度与宽度的关系，按品种分组）；②直方图（展示萼片长度分布，按品种筛选），需添加品种、萼片长度的筛选器控件。'

2. 智能体生成代码

智能体会自动调用 Vizro MCP 的'generate_viz_code'功能，分析需求后输出可运行的 Python 代码，示例如下：

import pandas as pd
import vizro as vz
import vizro.models as vm
import vizro.plotly.express as px

# 加载鸢尾花数据集
df = pd.read_csv('data.csv') # 换成文件地址

# 创建散点图：花瓣长度与宽度的关系，按品种分组
scatter_fig = px.scatter(
    df, x="PetalLength", y="PetalWidth", color="Species",
    title="花瓣长度与宽度的关系",
    labels={"PetalLength":"花瓣长度","PetalWidth":"花瓣宽度","Species":"品种"}
)

# 创建直方图：萼片长度分布，按品种筛选
hist_fig = px.histogram(
    df, x="SepalLength", color="Species", barmode="overlay",
    title="萼片长度分布",
    labels={"SepalLength":"萼片长度","count":"数量","Species":"品种"}
)

# 创建仪表板页面
page = vm.Page(
    title="鸢尾花数据集分析",
    components=[
        vm.Graph(figure=scatter_fig),
        vm.Graph(figure=hist_fig)
    ],
    controls=[
        # 品种筛选器
        vm.Filter(column="Species"),
        # 萼片长度筛选器
        vm.Filter(column="SepalLength")
    ],
    layout=vm.Layout(grid=[[0,1]])
)

# 创建仪表板模型
dashboard = vm.Dashboard(pages=[page])

# 构建并运行应用
if __name__ == "__main__":
    app = vz.Vizro()
    app.build(dashboard)
    app.run(debug=True)

这是我们的输出结果：

3. 查看运行结果

打开这个页面，我们就可以看到，它已经帮我们实现页面可视化了：

4. 优化与部署

若需调整样式（如配色、字体），可在代码中添加 vm.Theme 配置；若需多页面切换，可新增 vm.Page 并添加到 Dashboard 的 pages 列表中。

四. Vizro MCP 核心功能解析

Vizro MCP 提供 6 大核心能力，覆盖从代码生成到部署的全流程需求：

get_vizro_chart_or_dashboard_plan

主要功能： 获取创建 Vizro 图表或仪表板的说明。当被要求创建 Vizro 相关内容时，首先调用此工具。

必须始终先以 advanced_mode=False 调用，若 JSON 配置不再够用，再以 advanced_mode=True 再次调用。

参数：

• user_plan：用户想要创建的 Vizro 内容类型。
• advanced_mode：仅当需要使用自定义 CSS、自定义组件或自定义操作时调用。如果需要高级图表，无需使用 advanced_mode=True 调用此工具，而是在 validate_dashboard_config 工具中使用 custom_charts。

返回： 创建 Vizro 图表或仪表板的说明。

get_model_json_schema

主要功能： 获取指定 Vizro 模型的 JSON 模式。

参数：

• model_name：要获取模式的 Vizro 模型的名称（例如，'Card'、'Dashboard'、'Page'）

返回： 所请求的 Vizro 模型的 JSON 模式

get_sample_data_info

主要功能： 如果用户未提供数据，使用此工具获取样本数据信息。

可将以下数据用于以下用途：

• iris（鸢尾花数据集）：主要是数值型数据，包含一个分类列，适用于散点图、直方图、箱线图等。
• tips（小费数据集）：包含数值型和分类列的混合数据，适用于条形图、饼图等。
• stocks（股票数据集）：股票价格数据，适用于折线图、散点图，通常适用于随时间变化的数据。
• gapminder（盖普曼德数据集）：人口统计数据，适用于折线图、散点图，通常适用于涉及地图或多分类的内容。

参数：

• data_name：要获取样本数据的数据集名称

返回： 包含数据集相关信息的数据信息对象

load_and_analyze_data

主要功能： 用于了解本地或远程数据文件。必须使用绝对路径或 URL 调用。

支持的格式：

• CSV（.csv）
• JSON（.json）
• HTML（.html, .htm）
• Excel（.xls, .xlsx）
• 开放文档电子表格（.ods）
• Parquet（.parquet）

参数：

• path_or_url：数据文件的绝对（重要！）本地路径或 URL

返回： 包含 DataFrame 信息和元数据的 DataAnalysisResults 对象

validate_dashboard_config

主要功能： 验证 Vizro 模型配置。当你有完整的仪表板配置时，务必运行此工具。

如果验证成功，该工具将返回 Python 代码；如果是远程文件，将返回图表的 py.cafe 链接。如果 auto_open 为 True，PyCafe 链接将在你的默认浏览器中自动打开。

参数：

• dashboard_config：表示 Vizro 仪表板模型配置的 JSON 字符串或字典
• data_infos：包含数据文件相关信息的 DFMetaData 对象列表
• custom_charts：包含仪表板中自定义图表相关信息的 ChartPlan 对象列表
• auto_open：是否在浏览器中自动打开 PyCafe 链接

返回： 包含状态和仪表板详情的 ValidationResults 对象

validate_chart_code

主要功能： 验证用户创建的图表代码，也可选择在浏览器中打开 PyCafe 链接。

参数：

• chart_config：带有图表配置的 ChartPlan 对象
• data_info：要在图表中使用的数据集的元数据
• auto_open：是否在浏览器中自动打开 PyCafe 链接

返回： 包含状态和仪表板详情的 ValidationResults 对象

五. Vizro 工具包核心优势

1. 低代码高效开发：无需精通前端技术，通过几行 Python 代码或 JSON 配置，即可构建多图表、多控件的仪表板（传统方案需数百行代码，Vizro 可缩短 80% 开发时间）。
2. 专业视觉设计：内置视觉设计最佳实践（如配色方案、图表布局、标签规范），默认生成的仪表板符合企业级审美，无需额外设计调整。
3. 高度灵活可定制：支持高级用户通过 Python、JavaScript、CSS 扩展功能（如自定义图表交互逻辑、添加企业 Logo），兼顾'低代码便捷性'与'定制化需求'。
4. AI 赋能创新：Vizro-AI 扩展包支持'自然语言→可视化代码'转化，例如输入'展示各国家 GDP 与寿命的关系，按大洲分组'，即可自动生成气泡图代码。
5. 生产级部署能力：基于 Plotly Dash 底层框架，支持大规模数据处理（百万级数据量无卡顿），可直接部署到云服务器，支持多用户同时访问。

总结

通过'Trae + Vizro'的集成方案，我们打破了数据可视化的技术壁垒，构建了一套'需求→代码→部署→分享'的全自动化工作流。无论是业务分析师快速制作临时报表，还是工程师开发企业级数据平台，这套方案都能兼顾'效率'与'专业性'——业务人员无需学习复杂编码，即可通过自然语言生成可视化结果；工程师则可借助 MCP 的自动化能力，减少重复工作，聚焦核心功能优化。

对于追求数据驱动决策的团队而言，Trae x Vizro 的组合，不仅是'工具的集成'，更是'工作流的革新'。它让数据可视化从'工程师专属任务'，转变为'全员可参与的高效协作'，真正实现'让数据说话，让洞察更快落地'。