React 数据可视化组件库 —— 基于 ECharts、Canvas、SVG、WebGL 和国内电子地图， 提供简洁、统一、漂亮的图表，糅合多年商业数据展示实践。

组件展示网站 · npm · 更新日志 · 贡献指南 · English

大多数图表库会把底层引擎的全部配置项原样抛给你，设计决策留给使用者自己做。Deep-Viz 走的是相反的路：44 个组件，每个只暴露实际会变化的配置，并且已经按同一套视觉规范调好。确实需要引擎全部能力的时候，所有 ECharts 组件依然支持直接透传原始 option 片段。

• 44 个组件，覆盖六种渲染方式：ECharts、百度/高德电子地图、Canvas、SVG、WebGL，以及纯 DOM 象形图。
• 配置极简。 几行代码就能画出完整、统一的图表；剩下约 90% 的需求，通过透传 option 片段即可覆盖。
• 统一视觉规范。 配色、字号、网格、tooltip 样式在所有组件间共享，拼出来的看板是「设计过的」而不是「拼起来的」。
• 完整 TypeScript 类型定义，手写并与运行时 propTypes 严格对齐。
• 支持按需引入 —— 只引一个组件，不会把整个库带进来。

pnpm add deep-viz
# 或
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 LineChart from 'deep-viz/lib/Echarts/LineChart';

每个组件的完整配置和效果，见展示网站。

地图组件需要宿主页面自行引入百度或高德的 JavaScript SDK，组件从 window 上读取。

类型定义随包发布，不需要额外装 @types/deep-viz。

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

pnpm install
pnpm build       # 把 src/ 编译到 lib/，含 LESS 和类型声明
pnpm test        # 运行 vitest
pnpm lint        # 运行 eslint
pnpm typecheck   # tsc --noEmit

欢迎贡献代码 —— fork → Pull Request 的流程见 CONTRIBUTING.md。

秉持不重复造轮子的初衷，组件库大量使用或借鉴了其他开源社区的图表方案，在此一并致谢。想深入了解某个组件的，也可以去对应的源头项目看看：

• ECharts
• 百度地图 JavaScript API
• 高德地图 JavaScript API
• three.js
• heatmap.js
• anime.js

第一版由大数据前端开发和设计小组完成，这个库至今仍建立在他们的工作之上，感谢他们卓有成效的付出。

MIT