echarts-terminal

Render Apache ECharts inside a terminal.

Preview

These images are real terminal-rendered outputs:

| Bar | Line | | --- | --- | | | |

| Stacked Line | Scatter | | --- | --- | | | |

| Heatmap | Candlestick | | --- | --- | | | |

| Boxplot | Pictorial Bar | | --- | --- | | | |

| Pie | Radar | | --- | --- | | | |

| Gauge | Funnel | | --- | --- | | | |

| Sankey | Tree | | --- | --- | | | |

| Treemap | Sunburst | | --- | --- | | | |

| Graph | Parallel | | --- | --- | | | |

| Theme River | Legend Layout | | --- | --- | | | |

Basic usage

import * as echarts from 'echarts/core';
import { BarChart, LineChart } from 'echarts/charts';
import { GridComponent, TitleComponent } from 'echarts/components';
import {
  TerminalRenderer,
  patchECharts,
  initTerminalChart
} from 'echarts-terminal';

echarts.use([BarChart, LineChart, GridComponent, TitleComponent, TerminalRenderer]);

const terminalEcharts = patchECharts(echarts);
const chart = initTerminalChart(terminalEcharts, null, { width: 72, height: 22 });

chart.setOption({
  title: { text: 'Hello terminal' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'bar', data: [3, 5, 2] }]
});

console.log(chart.renderToTerminalString());

Live updates

const player = chart.createTerminalPlayer({
  output: process.stdout
});

chart.setOption({
  title: { text: 'Tick 1' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [2, 4, 3] }]
});

chart.setOption({
  title: { text: 'Tick 2' },
  xAxis: { type: 'category', data: ['A', 'B', 'C'] },
  yAxis: { type: 'value' },
  series: [{ type: 'line', data: [4, 3, 5] }]
});

player.stop();

Keyboard interaction

Press Enter to enter interaction mode.

• Left / Right: move across data points
• Up / Down: switch series
• Esc: exit interaction mode

Try it:

npm run showcase:interactive

Development

For development commands, screenshot workflows, and baseline comparison:

• docs/development.md