In DSH Web, model outputs usually remain at the code text level. When developers need model-generated charts, they often require additional Tool calls. The dsh-echarts plugin directly renders an echarts code fence in model output as an Apache ECharts Canvas, eliminating extra plotting steps.

Core Features

The plugin is maintained by sheny-bio and is designed to address the need to “output code from the model and view the chart directly.”

  • Zero additional Tool calls: The model only needs to normally reply with an echarts fence, and the Web UI automatically captures the chart.
  • Full interaction preserved: Supports tooltips, legend filtering, zooming, data region selection, and image export.
  • On-demand loading: ECharts is loaded only when a chart approaches the viewport; multiple charts are initialized sequentially, keeping long conversations lighter.
  • Theme following: Automatically responds to DSH Web light / dark themes.
  • Local and controllable: The ECharts bundle is provided locally by the plugin, with no CDN dependency.
  • Source retained on failure: If JSON or rendering errors occur, the original code is preserved, and a copyable error message is displayed.

Installation and Activation

Run the following command in the terminal to install the plugin:

npx @deepseek-ai/dsh plugin --profile web add github:sheny-bio/dsh-echarts

After installation, restart the DSH Web service.

Typical Usage

  1. Fence identifier: Use lowercase echarts as the fence identifier (for example ```echarts).
  2. Content format: The fence must contain a Strict JSON object; do not use comments, functions, or expressions.
  3. Model instruction: Simply instruct the model to output the chart.

Model output example (revenue bar chart + year-over-year growth line chart):

```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]
    }
  ]
}

```

Notes

  • Streaming rendering: No rendering occurs during streaming; rendering happens only after DSH generates a settled block with an echarts infostring.
  • DOM dependency: Depends on the .md-code-block and infostring class segment of DSH CodeBlock.
  • Feature limitations: Does not support JavaScript functions, expressions, renderItem, or event callbacks.
  • Security limitations: Rejects prototype-pollution keys and option depth exceeding 64 levels.
  • Theme limitations: theme: auto only changes the default ECharts theme; hardcoded colors in the option are not automatically converted.

The plugin is suitable for scenarios such as data analysis results, operational reports, experiment comparisons, and trend displays. Repository and source code: dsh-echarts