@TOC
前言
在数据驱动决策的时代,快速将原始数据转化为直观、专业的可视化仪表板,是业务分析、战略规划的核心需求。然而,传统数据可视化流程往往面临"技术门槛高""开发周期长""设计与功能难以平衡"的痛点------非技术人员难以独立完成仪表板开发,而工程师则需花费大量时间编写基础代码、调试交互逻辑。
为解决这一问题,我们引入Vizro(Python开源低代码可视化工具包) 与Trae的集成方案。借助蓝耘MCP提供的Vizro专属多能力组件(MCP),可无缝连接Vizro的低代码优势与自动化部署能力,让用户无需复杂编码,即可快速构建、部署可生产级别的数据可视化应用。这种集成不仅大幅缩短开发周期,还能确保仪表板的专业性与可维护性,让业务人员聚焦数据洞察,工程师专注核心功能优化。
一.核心工具与优势解析
在正式操作前,先通过核心能力与优势对比,明确图片素描MCP工具的核心价值:
核心功能 | 具体能力 | 应用场景 |
---|---|---|
多风格素描转换 | 支持经典(classic)、详细(detailed)、柔和(soft) 3种风格,适配不同主体(人像/风景/静物) | 社交媒体配图(如小红书人像素描)、设计素材(如海报线条元素) |
单张/批量处理 | 支持单张图片精准转换,也可批量处理文件夹内所有图片,自动跳过非支持格式文件 | 相册批量素描化(如旅行照片合集)、工作文件批量加工(如产品图素材) |
全格式兼容 | 支持JPG、PNG、BMP、GIF、TIFF、WEBP等常见格式,完美适配中文文件名与路径 | 处理本地存量图片(无需手动修改格式/文件名)、跨平台素材(如从手机导出的WEBP图片) |
参数自定义调节 | 可调节高斯模糊核大小(3-101,奇数) 与对比度(50-500),匹配不同图片分辨率需求 | 大尺寸图片降噪(增大模糊值)、小尺寸图片增强细节(提高对比度) |
图片信息查询 | 快速获取图片分辨率、像素、格式等基础信息,并提供针对性参数建议 | 新手适配(根据图片尺寸自动推荐参数)、批量处理前的素材核查 |
其核心优势在于:零设计门槛、高兼容性、强灵活性------无论是普通用户快速处理一张自拍,还是设计师批量加工素材,都能通过简单配置满足需求,且输出效果专业、文件保存路径清晰。
二.操作步骤:从安装到生成素描效果
第一步. 获取MCP配置代码
进入Vizro 主页,进入图片素描MCP主页,如下: 这里我们进入工具详情,点击链接,获得 json 代码,复制
第二步:下载
Vizro基于Python开发,需先完成本地环境配置,确保后续与MCP服务顺畅对接。
-
安装Python:确保本地安装Python 3.9~3.13 版本(Vizro官方推荐兼容版本),可通过Python官网下载安装。
-
安装Vizro包:打开终端,执行以下命令完成Vizro核心包与依赖安装:
bash# 安装Vizro核心工具包 pip install vizro # (可选)若需AI生成功能,安装Vizro-AI扩展包 pip install vizro_ai
-
验证安装:安装完成后,在终端执行
python -c "import vizro; print(vizro.__version__)"
,若输出当前版本号(如0.4.0),则环境配置成功。 -
这里我们选择直接通过 uvx 安装
第三步:在 Trae 中导入 MCP 配置并建立连接
-
打开 Trae AI功能管理 :打开 Trae 客户端,点击右上角的齿轮图标;
-
选择手动添加"MCP" :选择"MCP",点击"手动添加";
-
导入 JSON 配置文件 :粘贴第一步复制的JSON文件,点击"确定";
-
检验 :如下图所示,就是配置好了
-
创建"智能体" :选择"智能体",点击"创建";
在"工具"那里选择我们刚才创建好的MCP;
下面是一个详细的提示词示例:
bash
你是资深数据可视化工程师,精通Vizro工具包的全流程使用,需以专业、高效的方式解决数据可视化需求:
- 角色与能力:熟练运用Vizro的低代码配置(Python/Pydantic/JSON/YAML),支持柱状图、散点图、地图等20+图表类型;可通过Vizro-AI将自然语言需求转化为可视化代码,优化仪表板交互逻辑(如筛选器、联动效果)。
- 工作流程:先明确用户需求(如"分析各地区销售额趋势,需支持按季度筛选"),调用Vizro MCP的"generate_viz_code"功能生成基础代码,结合数据格式(如CSV/Excel/数据库连接)调整配置,最终输出可运行的仪表板代码与部署指南。
- 规则与偏好:优先遵循视觉设计最佳实践(如配色一致性、标签清晰度);确保仪表板响应式适配(支持桌面/平板查看);代码需包含注释,便于用户二次修改。
- "完成" :创建好了是这样的。
并且8月蓝耘还在举办 MaaS 特价/折扣资源包和周周抢免费无门槛代金券活动
大量的token都在送,感兴趣的赶紧来吧 注册链接
三. 实战:用Vizro MCP快速构建仪表板
以"鸢尾花数据集分析仪表板"为例,演示如何通过智能体+MCP实现低代码开发。
1. 提出需求
在Trae智能体对话界面输入需求:"基于鸢尾花数据集(iris),构建包含两个图表的仪表板:①散点图(展示花瓣长度与宽度的关系,按品种分组);②直方图(展示萼片长度分布,按品种筛选),需添加品种、萼片长度的筛选器控件。"
2.智能体生成代码
智能体会自动调用Vizro MCP的"generate_viz_code"功能,分析需求后输出可运行的Python代码,示例如下:
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 图表或仪表板的规划相关内容 |
get_model_json_schema | 获取指定 Vizro 模型的 JSON 模式 |
get_sample_data_info | 如果用户未提供数据,使用此工具获取样本数据相关信息 |
load_and_analyze_data | 用于理解本地或远程数据文件 |
validate_dashboard_config | 验证 Vizro 模型配置,运行相关验证操作 |
validate_chart_code | 验证用户创建的图表代码 |
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工具包核心优势
- 低代码高效开发:无需精通前端技术,通过几行Python代码或JSON配置,即可构建多图表、多控件的仪表板(传统方案需数百行代码,Vizro可缩短80%开发时间)。
- 专业视觉设计:内置视觉设计最佳实践(如配色方案、图表布局、标签规范),默认生成的仪表板符合企业级审美,无需额外设计调整。
- 高度灵活可定制:支持高级用户通过Python、JavaScript、CSS扩展功能(如自定义图表交互逻辑、添加企业Logo),兼顾"低代码便捷性"与"定制化需求"。
- AI赋能创新:Vizro-AI扩展包支持"自然语言→可视化代码"转化,例如输入"展示各国家GDP与寿命的关系,按大洲分组",即可自动生成气泡图代码。
- 生产级部署能力:基于Plotly Dash底层框架,支持大规模数据处理(百万级数据量无卡顿),可直接部署到云服务器,支持多用户同时访问。
总结
通过"Trae + Vizro"的集成方案,我们打破了数据可视化的技术壁垒,构建了一套"需求→代码→部署→分享"的全自动化工作流。无论是业务分析师快速制作临时报表,还是工程师开发企业级数据平台,这套方案都能兼顾"效率"与"专业性"------业务人员无需学习复杂编码,即可通过自然语言生成可视化结果;工程师则可借助MCP的自动化能力,减少重复工作,聚焦核心功能优化。
对于追求数据驱动决策的团队而言,Trae x Vizro的组合,不仅是"工具的集成",更是"工作流的革新"。它让数据可视化从"工程师专属任务",转变为"全员可参与的高效协作",真正实现"让数据说话,让洞察更快落地"。