在 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
