Deep-Viz

A React chart library: concise, consistent and good-looking charts built on ECharts, Canvas, SVG, WebGL and Chinese e-maps — distilled from years of commercial data-visualisation practice.

Component gallery · npm · Changelog · Contributing · 中文文档

Most chart libraries hand you the whole configuration surface of the engine underneath and leave the design decisions to you. Deep-Viz takes the opposite position: 44 components, each with the options that actually vary in practice, already styled to one visual system. Where you do need the engine's full power, every ECharts-backed component still takes raw option fragments.

• 44 components across six rendering backends: ECharts, Baidu / AMap e-maps, Canvas, SVG, WebGL and plain DOM pictograms.
• Short configuration. A handful of lines produces a complete, consistent chart; roughly 90% of the remaining cases are covered by passing option fragments straight through.
• One visual system. Colours, type scale, grid and tooltip styling are shared across every component, so a dashboard looks designed rather than assembled.
• TypeScript declarations for the whole public API, hand-written to match the runtime propTypes.
• Tree-shakeable — import a single component and nothing else comes with it.

pnpm add deep-viz
# or
npm install deep-viz --save

import { LineChart } from 'deep-viz';

const config = {
  x: { data: lineData.date },
  y: [
    {
      data: [lineData.y1, lineData.y2],
      legend: ['legend1', 'legend2'],
      name: 'yAxisName/unit',
    },
  ],
};

<LineChart config={config} />;

Import a single component when you do not want the rest of the library:

import LineChart from 'deep-viz/lib/Echarts/LineChart';

Every component and its options are shown in the gallery.

The map components expect the Baidu or AMap JavaScript SDK to be loaded by the host page; they read it off window.

Types ship with the package — no @types/deep-viz needed.

import { LineChart, type LineChartProps } from 'deep-viz';

pnpm install
pnpm build       # compiles src/ to lib/, including LESS and the declarations
pnpm test        # vitest
pnpm lint        # eslint
pnpm typecheck   # tsc --noEmit

Contributions are welcome — see CONTRIBUTING.md for the fork → pull request flow.

The library deliberately builds on existing work rather than reinventing it. Thanks to:

• ECharts
• Baidu Map JavaScript API
• AMap JavaScript API
• three.js
• heatmap.js
• anime.js

The first version was built by the big-data front-end and design team, whose work this library still rests on.

MIT