在 DSH Web 中，模型输出通常停留在代码文本层面。开发者需要模型输出图表时，往往需要额外的 Tool 调用。dsh-echarts 插件将模型输出的 echarts 代码围栏直接渲染为 Apache ECharts Canvas，省去了额外的绘图步骤。
核心功能¶
该插件由 sheny-bio 维护，旨在解决“模型输出代码，直接看图”的需求。
- 零额外 Tool 调用：模型正常回复一个
echarts围栏即可，图表由 Web UI 自动捕获。 - 保留完整交互：支持 tooltip、图例筛选、缩放、数据区域选择和导出图片。
- 按需加载：图表接近视口时才加载 ECharts，多图串行初始化，长对话也更轻量。
- 跟随主题：自动响应 DSH Web 的 light / dark 主题。
- 本地且可控：ECharts bundle 由插件本地提供，不依赖 CDN。
- 失败不丢源码：JSON 或渲染出错时保留原始代码，并显示可复制的错误信息。
安装与启用¶
在终端执行以下命令安装插件：
npx @deepseek-ai/dsh plugin --profile web add github:sheny-bio/dsh-echarts
安装完成后，需要重启 DSH Web 服务。
典型用法¶
- 围栏标识：使用小写
echarts作为围栏标识（例如 ```echarts）。 - 内容格式：围栏内必须包含 Strict JSON object，不要使用注释、函数或表达式。
- 模型指令：直接告诉模型输出图表即可。
模型输出示例（营收柱状图 + 同比增长率折线图）：
```echarts
{
"title": {
"text": "2024 各季度营收与同比增长率",
"subtext": "营收（亿元） · 同比增长率（%）",
"left": "center"
},
"color": ["#5470c6", "#ee6666"],
"tooltip": {
"trigger": "axis",
"axisPointer": { "type": "cross" }
},
"legend": {
"data": ["营收", "同比增长率"],
"top": 56
},
"grid": {
"left": 64,
"right": 64,
"top": 104,
"bottom": 48
},
"xAxis": {
"type": "category",
"data": ["Q1", "Q2", "Q3", "Q4"]
},
"yAxis": [
{
"type": "value",
"name": "营收",
"axisLabel": { "formatter": "{value} 亿" }
},
{
"type": "value",
"name": "增长率",
"axisLabel": { "formatter": "{value}%" }
}
],
"series": [
{
"name": "营收",
"type": "bar",
"barWidth": "38%",
"itemStyle": { "borderRadius": [6, 6, 0, 0] },
"data": [120, 168, 195, 230]
},
{
"name": "同比增长率",
"type": "line",
"yAxisIndex": 1,
"smooth": true,
"symbolSize": 8,
"lineStyle": { "width": 3 },
"data": [15, 22, 28, 18]
}
]
}
```
注意事项¶
- 流式渲染：流式阶段不渲染，只有 DSH 生成带
echartsinfostring 的 settled block 后才渲染。 - DOM 依赖：依赖 DSH CodeBlock 的
.md-code-block和 infostring class segment。 - 功能限制：不支持 JavaScript function、expression、
renderItem或事件回调。 - 安全限制：拒绝 prototype-pollution key、超过 64 层的 option。
- 主题限制：
theme: auto只能改变 ECharts 默认 theme；option 中硬编码的颜色不会自动转换。
该插件适合数据分析结果、运营报表、实验对比、趋势展示等场景。目录与源码：dsh-echarts
